タグ

関連タグで絞り込む (161)

タグの絞り込みを解除

HTMLに関するiwwのブックマーク (452)

  • 「MIMEタイプ」と「Content-type」の違い｜「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典


    メールやホームページのファイルにくっつけて送られる﹁このファイルは、こんな種類のファイルですよ﹂な情報……と気が向いたら文字エンコードの指定︵Shift-JISとかUTF-8とか︶も書いてある項目 似ているところ どちらも﹁ファイルの種類﹂を表す情報です。 完全に同じものと解釈する人もいます。 メールやホームページのファイルにくっついている情報です。 実際には﹁くっついている﹂と表現するよりも﹁一緒に送られる﹂と表現した方が正確かもしれませんけどね。 そこら辺は、ゆるく解釈してください。 違うところ あくまで個人的な解釈ですが MIMEタイプ‥ファイルの種類を示す﹁情報﹂ Content-Type‥ファイルの種類を示す情報を指定する﹁項目﹂ と理解しています。 メールを例に説明しますが、Content-Typeは例えば Content-Type: text/plain; charset=i
    「MIMEタイプ」と「Content-type」の違い｜「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典

  • CSSだけでテーブルの縦横２列を固定してスクロールできるようにする


    ※この記事ははてなブログ、別アカウント(hyiromori)から引っ越しました はじめに タイトルのような、とても大変な要件のテーブルを作って欲しいという要望があったので、その際に試行錯誤した結果を記録しておいたエントリです。 サンプル コードの解説 このコードではposition: stickyを使用することで、テーブルの行、列を固定しています。 position: sticky は top right bottom left と組み合わせて使うことで position: relative と position: absoluteを組み合わせたような動きが可能になる指定です。 Safari ではposition: -webkit-sticky;のようにベンダープレフィックスをつけないと動作しませんでした。 詳細はMDNの解説をご覧ください。 position: sticky の対応状況
    CSSだけでテーブルの縦横２列を固定してスクロールできるようにする
    iww
    iww 2024/02/08
    スクロールバーがヘッダ部分にかかってしまう
    リンク

  • overflow-wrap: break-word; や word-break: break-all; が万能の改行処理だったなら、こんなに苦労していない - Qiita


    overflow-wrap: break-word; や word-break: break-all; が万能の改行処理だったなら、こんなに苦労していないHTMLCSS初心者 はじめに 今回解決したいのはこれです。 ﹁overflow-wrapかけたのに改行されないしテーブルwidthもなんか勝手に伸ばされちゃってる問題﹂です。 こんなんHTML / CSSの初歩中の初歩じゃんwwwという方は、どうぞごゆるりとブラウザバックしてやってくださいませ… ﹁それ地味に悩んでた！﹂という方がもしいらっしゃいましたら、少しでも助けになれれば嬉しいです。というか一緒に悩みましょう。 あ、でも、もしそんな方が本当にいたら、こんなことに悩むよりも、 ﹁全半角記号のブラウザテストだけ許容する﹂という呪文を唱えた方が5億倍早いです…というネタバレだけ先にしておきますね＞＜ もくじ 当記事は、以下の内容に関する
    overflow-wrap: break-word; や word-break: break-all; が万能の改行処理だったなら、こんなに苦労していない - Qiita
    iww
    iww 2024/01/23
    改行位置の話
    リンク

  • HTML：textareaの拡大/縮小を禁止し、サイズを固定する方法 | WWWクリエイターズ


    HTMLにおいて、フォーム要素のテキストエリア︵textarea︶の領域の拡大、縮小などのリサイズを禁止したり、サイズ変更に関する振る舞いを制限する方法についてです。 textarea の拡大機能について HTMLフォームのテキストエリア︵textarea︶要素は、デフォルトで下記のような﹁つまみ﹂が存在し、ドラッグすることで拡大することが可能になっています。 ユーザの操作によって、エリアの大きさが勝手に変わってしまい、予期せぬレイアウト乱れが発生してしまったりします。このようなリサイズを禁止し、サイズを固定するように対策します。 拡大・縮小を禁止し、サイズを固定する 下記のように、CSSのリサイズを制御するプロパティ︵resize︶を使って禁止し、サイズを固定することができます。 resizeプロパティを﹁none﹂に指定する事により完全に大きさを固定できます。 textarea {r

  • ［html］親要素からはみ出すtextareaを簡単に修正


    親要素の中に入れた textarea 要素のwidthを100%にした場合、親要素からはみ出してしまいます。よく確認せずこの状態のまま本番環境にアップすると、そのサイトの評価を下げることになるかもしれません。 これを簡単に修正‥ textarea要素の box-sizing 属性の初期値は、padding と border の値を幅と高さに含めない content-box になっています。これを padding と border の値を幅と高さに含める border-box にすることで、きれいに収まります。 初期値のままのサンプル
    iww
    iww 2024/01/19
    box-sizing: border-box;
    リンク

  • 常に画面最下部に要素を固定するCSS - Tomcky's blog

    position: fixed; と bottom: 0; を使えばOK。 #footer { position: fixed; bottom: 0; width: 100%; } codepen.io

    常に画面最下部に要素を固定するCSS - Tomcky's blog
    iww
    iww 2024/01/19
    リンク

  • 【html/CSS】幅(width)を子要素に合わせる方法

    親要素がdivなどのブロック要素の場合、何もしないと横幅がいっぱいになります。 下記は青背景が親要素、オレンジ背景が子要素です。後述する方法の比較のため兄弟要素にspanタグをいれています。 divの兄弟要素のspan <style> .example{ background: #77abd8; } .example>*{ background: #d3a142; } </style> <div class="example"> <a href="#">子要素(aタグ)</a> </div> <span>divの兄弟要素のspan</span> この親要素を子要素の幅に合わせましょう。

  • 朱色／バーミリオン／#ed514e十六進の色コード


    十六進の色コードで朱色／バーミリオン色#ed514e赤色の明るさの中間の色合いです。光の三原色RGBにおいて色モデル#ed514eは92.94％の赤色、31.76％の绿色、30.59％の青色でできている。HSLで色彩空間#ed514eは1°度の色調、82％の彩度、62％の明るさを有している。この色は約609.9nmの波長である。 色のバリエーション反転 #12aeb125％飽和度 #ff3e3a濃淡階調 #9e9e9e25％明るく #eba09fオリジナル #ed514e25％暗く #d02f2cウェブセーフ‥ red #ff0000 / #f0025％不飽和度 #dd605eHTML: indianred #cd5c5c名前付き色密接関係レッド #ea5550ゼラニウムレッド #e45653トマトレッド #ea5549しゅいろJIS／しんしゅ／ほんしゅ #ef454a紅緋︵べにひ︶ #e
    朱色／バーミリオン／#ed514e十六進の色コード
    iww
    iww 2023/05/22
    Vermilion
    リンク

  • divはボタンではない、ボタンの実装について知っておくべきすべてのこと


    クリックできるボタンを実装するとき、HTMLの何をよく使用しますか？ buttonタグ、もしくはdivタグ？ divを使用してはいけない理由、buttonを使用するときの注意点、場合によってはaがよい理由を紹介します。 Everything you didn’t know you need to know about buttons by Steve Sewell 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに ボタンの実装にdivを使用したときの問題点 ボタンをbuttonで実装する buttonのスタイルに関する問題点 buttonのスタイルを正しく設定する方法 フォーム内のbuttonの動作を修正する 他のページへのリンクに使用する場合はaタグで ボタンの実装をコンポーネントにする 終わりに はじめに クリックで
    divはボタンではない、ボタンの実装について知っておくべきすべてのこと
    iww
    iww 2023/02/10
    サンプルをおけばいいのに
    リンク

  • 文字化けしないようにするには - とほほのWWW入門


    Webページを見ていると、時たま日本語がちゃんと表示されないときがあります。これを﹁文字化け﹂と呼びます。文字化けをおこす原因はいくつかあります。 ︻原因︼日本語の漢字コードにはJIS、シフトJIS(Shift_JIS)、EUC(EUC-JP)などいくつもの種類があります。(→漢字コードについて) 通常はブラウザが自動的に漢字コードを判別するのですが、たまに判別を誤ってしまうことがあります。一般に、JISコード ＜ シフトJIS　＜ EUCの順で、文字化けする可能性が高いようです。 ︵補足します。最近では、シフトJISのパソコンが大半であることから、ブラウザはシフトJISを優先する傾向にあるようです。従って、シフトJIS が一番文字化けしにくい漢字コードになっています。(2001.7.5追記)︶ ︻対策︼文書をJISコードで記述するか、﹁対策1‥おまじないの文字を書く﹂、﹁対策2‥文字コー
    iww
    iww 2023/02/09
    美乳
    リンク

  • span要素にwidth（横幅）を指定する方法


    span 要素は﹁インライン要素﹂なので、 本来は ﹁width﹂プロパティで横幅を指定することはできません。 ですが﹁display:inline-block;﹂ を指定することでインラインレベルのブロック要素となり、 width︵横幅︶や height︵高さ︶を指定することができます。 width、height を指定するサンプルコード 次のように﹁display:inline-block;﹂を指定することで、 width や height プロパティを指定できるようになります。 span { display: inline-block; width: 100px; height: 20px; } ﹁display:inline-block;﹂とは？ ﹁display﹂プロパティは、要素の表示形式を指定するプロパティです。 値として﹁inline-block﹂を指定することで、 指定さ
    iww
    iww 2023/01/12
    リンク

  • HTMLタグ/フレームタグ/フレームの境界線を消す（frameset） - TAG index


    上記の属性は、HTML 4.01では定義されていません。 境界線の消え方の違い frameborder属性で境界線を消した場合は、ブラウザにより次のような違いが出てしまいます。 IE … 2ピクセル程度の隙間が空いてしまいます Firefox … 境界線は完全に消えますIEでも完全に消したい場合︵隙間をなくしたい場合︶は、border属性を使用します。
    HTMLタグ/フレームタグ/フレームの境界線を消す（frameset） - TAG index
    iww
    iww 2023/01/10
    わざとIEのときのようにフレーム間に白い線を出したいときはコツが必要
    リンク

  • CSSでスクロールバーの有無によるがたつきをなくす: Days on the Moon


    この記事はCSS Advent Calendar 2022の9日目の分です。 CSSのボックスモデルにおいては、ボーダーの内辺とパディングの外辺の間にスクロールバーが配置されます。最近はどのOSでもオーバーレイスクロールバー︵スクロールバーが内容の前面に覆いかぶさるようなもの︶が主流となり、スクロールバーが存在してもしなくても内容の幅が変わらないようになっています。一方、クラシックスクロールバー︵スクロールバーが常に表示されるようなもの︶が使われる環境では、overflow: autoな要素において内容がはみ出すときとはみ出さないときで内容の幅が変わってきます。 クラシックスクロールバーが使われる環境でも内容の幅を一定に保ちたいという場合は、scrollbar-gutterプロパティを使います。scrollbar-gutter: stableを指定すれば、スクロールバーが表示されないときで
    iww
    iww 2022/12/09
    こんな便利なプロパティがあるのか。 スクロールバーの幅を求めたり足したり引いたりすげー苦労してるのがもうやらなくて済むのか
    リンク

  • CSSで画像をハーフトーン（網点）に加工する


    2022年10月19日 CSS 画像の中の色や明るさの濃淡を、様々な大きさのドットで表現するハーフトーン。日本語では網点とも言うようです。どこかレトロで、アメコミタッチなこのハーフトーンを、CSSで表現してみます！ ↑私が10年以上利用している会計ソフト！ グラフィックツールを使わず、CSSだけでひとつの画像をこんな感じに加工してみます。 1. 画像をdivに入れておく まずは下準備。﹁halftone﹂というクラス名をつけた div に画像を入れておきます。今回は猫ちゃんの画像を用意しました。 HTML <div class="halftone"> <img src="cat.jpg" alt=""> </div> 2. CSSで水玉模様を作成 ﹁halftone﹂クラスに ::after で疑似要素を作成。 position を使って猫ちゃん画像の上に重ねます。水玉模様は円形グラデーシ
    CSSで画像をハーフトーン（網点）に加工する
    iww
    iww 2022/10/20
    おもしろい
    リンク

  • 【サボりたいエンジニア向け】コーディングに役立つチートシートまとめ - Qiita

    はじめに こんな人が役に立つ記事 コーディング業務の効率を上げたい。 コーディングに関するチートシートを知りたい。 打つのもめんどいからコピペでなんとかしたい（笑） 今回は、コーディングに役立つチートシートをまとめました。 VSCODEチートシート エンジニアなら必ず使うであろうVsCodeのショートカットチートシート。これはよく使ってます！ HTML系のチートシート集 HTMLに関するチートシートをまとめてみました。 HTML5 タグチートシート HTML5 のタグチートシート。サイトには 5 から廃止になった避けるべきタグなどもまとめてられており、 PDFでダウンロードできます。 HTML5 入れ子チートシート HTML の入れ子の可否を視覚的に分かりやすく、色づけしてくれます。対象要素の親、子を選ぶだけで、簡単に調べることが出来ますので便利なチートシート 特殊文字一覧：HTMLで使え

    【サボりたいエンジニア向け】コーディングに役立つチートシートまとめ - Qiita
    iww
    iww 2022/09/06
    リンク

  • 【CSS】tableの奇数行,偶数行・奇数列,偶数列の指定方法

    「表の奇数行と偶数行の色を変えたい！」 tableの奇数行・偶数行、奇数列・偶数列を指定する方法を紹介します。 結論 【偶数行】tr:nth-of-type(2n) td【奇数行】tr:nth-of-type(2n-1) td【偶数列】td:nth-of-type(2n)【奇数列】td:nth-of-type(2n-1) 下記より詳しく解説します。

  • HTMLのリセット(reset)ボタンで検索条件をクリアのときに、すでにデータがあるとクリアされない - それマグで！

    html で検索フォーム HTMLのFormで検索フォームを作ると、検索条件のリセットが欲しくなる。 とくにテストしているとリセットボタンが欲しくなる。 フォームのリセット フォームのリセット、とても簡単です。HTMLの遺物を使えばいいんです。 <form action=search method=get> <input type=search name=user value='' > <input type=submit value=search> <input type=reset value=reset > </form> とても簡単です、ボタンを一つおけばいいのですから <input type=reset value=reset > 問題点：リセットはクリアじゃない WEB側のCGI*1でHTMLを生成するとき サーバー側でHTMLレンダリングを行っていると <input type

    HTMLのリセット(reset)ボタンで検索条件をクリアのときに、すでにデータがあるとクリアされない - それマグで！
    iww
    iww 2022/06/07
    type=search
    リンク

  • HTML audio要素で音声ファイルを再生する | ITSakura


    audio要素で音声を再生する audio要素で音声を再生するサンプルです。 真ん中の線は音声の進み具合を操作するバーです。 音量の調整は、マイクのアイコンにカーソルを置くと表示されるバーで行います。 上記サンプルのコードです。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>sample</title> </head> <body> <audio src="audiotest1.mp3" controls> </body> </html>8行目がaudio要素です。 srcは、mp3のパス(ファイル名)を指定しています。 controlsは、音声の再生ボタン等のコントロールバーを表示します。 代替の音声ファイル/文言を指定する mp3ファイルが再生できないときに、代わりにwavファイルで再生する

  • 電脳麻将

    HTML5 + Javascriptで動作する麻雀アプリ

    電脳麻将
    iww
    iww 2022/04/02
    ちまちました華のないアガリを続けられていつの間にか負けるという現実味のある打ち方をされて悔しい
    リンク

  • <frameset> - HTML: HyperText Markup Language | MDN

    HTML チュートリアル HTML の基本 HTML 入門 HTML 入門の概要 HTML を始めよう ヘッド部には何が入る? HTML のメタデータ HTML テキストの基礎 ハイパーリンクの作成 高度なテキスト整形 文書とウェブサイトの構造 HTML のデバッグ 評価課題: 手紙のマークアップ 評価課題: コンテンツのページの構造化 マルチメディアとその埋め込み マルチメディアとその埋め込みの概要 HTML の画像 動画と音声のコンテンツ object から iframe まで — その他の埋め込み技術 ウェブへのベクターグラフィックの追加 レスポンシブ画像 評価課題: Mozilla のスプラッシュページ HTML の表 HTML の表の概要 HTML の表の基本 HTML 表の高度な機能とアクセシビリティ 評価課題: 太陽系の惑星データの構造化 リファレンス HTML 要素 <a>

    <frameset> - HTML: HyperText Markup Language | MDN
    iww
    iww 2022/03/07
    『この機能は非推奨になりました。まだ対応しているブラウザーがあるかもしれませんが、すでに関連するウェブ標準から削除されているか、削除の手続き中であるか、互換性のためだけに残されている可能性があります
    リンク
  • 1 2 3 4 5 6 7 8 9 10 次のページ

お知らせ

もっと読む

公式Twitter

  • @HatenaBookmark

    リリース、障害情報などのサービスのお知らせ

  • @hatebu

    最新の人気エントリーの配信

はてなブックマーク

公式Twitter

はてなのサービス

  • App Storeからダウンロード
  • Google Playで手に入れよう
Copyright © 2005-2024 Hatena. All Rights Reserved.