HTML

HTML カテゴリー記事(更新日順)

  1. 【CSS】入れ子のリストを複数列に並べる
    【CSS】入れ子のリストを複数列に並べる
    カテゴリ: CSS, HTML
    更新日:
    入れ子のリストを複数列に並べる 下記のようなリストを画面幅に応じて複数列に並べます。 column-count で複数列に並べることもできますが、何列に並べるか指定する必要があり、画面幅に応じた列数に並べることはできませ […]
  2. 「ページ上で視認性の高い動画は検出されませんでした」の解決方法
    「ページ上で視認性の高い動画は検出されませんでした」の解決方法
    カテゴリ: HTML, ホームページ
    更新日:
    「ページ上で視認性の高い動画は検出されませんでした」はサーチコンソールで左側メニューの 動画ページ ↓ 動画ページのインデックス登録 を表示した時に インデックス登録された動画はありません と警告をいわれる場合の理由とし […]
  3. 「適切なサイズの画像」の警告を受けたとき
    「適切なサイズの画像」の警告を受けたとき
    カテゴリ: HTML, ホームページ
    更新日:
    PageSpeed Insights の警告の中でも最もよく受けると言っても過言ではない「適切なサイズの画像」の警告に関して,ここで対策を書いてみる. どうもよく勘違いされる方がいるが「適切なサイズ」とはファイルサイズの […]
  4. VIDEO タグの動画で大きな再生ボタンを配置する方法
    VIDEO タグの動画で大きな再生ボタンを配置する方法
    カテゴリ: HTML, JavaScript
    更新日:
    動画をホームページに置きたい場合,Youtube を利用するのが手軽ではあるが,自分のサイトにファイルを置きたい場合の方法を書く. 再生ボタンを中心に配置した VIDEO タグでの動画表示 Chrome で video […]
  5. 「リンクに識別可能な名前が指定されていません」と言われた時
    「リンクに識別可能な名前が指定されていません」と言われた時
    カテゴリ: HTML, ホームページ
    更新日:
    新しいPageSpeed Insights 対策. PageSpeed Insights で ユーザー補助 という種別の中に「リンクに識別可能な名前が指定されていません」という文言が出てくるときがある. 「リンクに識別可 […]
  6. 「リンクはクロールできません」と言われた時
    「リンクはクロールできません」と言われた時
    カテゴリ: HTML, JavaScript, ホームページ, 知識
    更新日:
    引き続き,新しいPageSpeed Insights 対策. PageSpeed Insights で SEO という種別の中に「リンクはクロールできません」という文言が出てくるときがある. 「リンクはクロールできません […]
  7. 「不適切なアスペクト比の画像が表示されています」と言われる時
    「不適切なアスペクト比の画像が表示されています」と言われる時
    カテゴリ: CSS, HTML, ホームページ, 知識
    更新日:
    PageSpeed Insights の結果の「おすすめの方法」の中で 「不適切なアスペクト比の画像が表示されています」 と言われる時. img タグには正しい width height を指定しているのになぜか「アスペ […]
  8. URLのルート相対パスとは
    URLのルート相対パスとは
    カテゴリ: HTML, ホームページ, 知識
    更新日:
    ホームページを作成する際,URL のパス(Path)をどうするかという問題がある. パスとはそのファイルまでのディレクトリ(フォルダ)を示すもので,これによってファイルがどこにあるかが分かる. ホームページを制作する際に […]
  9. 【CSS】マーカー風の下線(アンダーライン)を引く方法
    【CSS】マーカー風の下線(アンダーライン)を引く方法
    カテゴリ: CSS, HTML
    更新日:
    マーカー風の下線(アンダーライン)を引く css では【CSS】簡単な下線(アンダーライン)の引き方【HTML】にあるように簡単に下線の実装ができます。今回実装したいマーカー風の下線(アンダーライン)ですが、少し css […]
  10. 擬似要素 focus-within を使う時に気を付けること
    擬似要素 focus-within を使う時に気を付けること
    カテゴリ: CSS, HTML, ホームページ
    更新日:
    先日,「キーボードナビゲーションの実現」という記事を投稿した後に気づいたのだが,擬似要素 focus-within を使って,ドロップダウンメニューを制御すると問題があることが判明した. 条件は少し限定されるが,それはド […]
  11. キーボードナビゲーションの実現
    キーボードナビゲーションの実現
    カテゴリ: HTML, ホームページ, 知識
    更新日:
    「Skip Link コンテンツをスキップ というナビゲーション」という記事でスキップリンクのことに言及したが,そもそもホームページはキーボードで全部操作出来るべきだという考えがあり,それがキーボードナビゲーションという […]
  12. 【CSS】FlexBoxで縦に中央揃えさせる方法
    【CSS】FlexBoxで縦に中央揃えさせる方法
    カテゴリ: CSS, HTML
    更新日:
    FlexBoxで縦に中央揃えさせる方法 FlexBox を使って要素を縦並びかつ、中央揃えさせる方法を紹介します。 例は以下の通りです。開発者ツールから FlexBox で要素を縦に中央揃えさせていることも確認いただけま […]
  13. 【CSS】矢印の中に文字を書く方法
    【CSS】矢印の中に文字を書く方法
    カテゴリ: CSS, HTML
    更新日:
    矢印の中に文字を書く実装方法 今回は矢印の上に文字を書く方法を紹介します。図形の上に文字を書く時の参考にしていただければと思います。矢印も CSS のみで作成していますので、その方法も併せてご紹介します。 サンプルコード […]
  14. 【CSS】五角形の矢印を作成する
    【CSS】五角形の矢印を作成する
    カテゴリ: CSS, HTML
    更新日:
    CSSで五角形の矢印を作成する方法 状態の遷移を表す際などに用いられる、五角形の矢印をCSSで簡単に実装する方法をご紹介します。 以下、五角形の矢印のサンプルです。 HTML <div class="ar […]
  15. CSS のみでアコーディオン表示する
    CSS のみでアコーディオン表示する
    カテゴリ: CSS, HTML, システム
    更新日:
    ウェブページでアコーディオン表示を使う場合は気をつけましょうというページを書いておいてどうなのかということだが,一応,javascript (jQuery) を使わない「アコーディオン表示」の書き方を説明する. アコーデ […]
  16. アコーディオン表示をやめたほうがいい理由
    アコーディオン表示をやめたほうがいい理由
    カテゴリ: CSS, HTML, ホームページ
    更新日:
    ウェブにおけるアコーディオン表示とは HTML 界でのアコーディオン表示とは呼んで字のごとく,楽器のアコーディオンのように折り畳みが出来るような表示の仕方を表す. なんとなくエレガント?にも見えるためか,いろんなページで […]
  17. 開発者ツールで要素を書き換える方法
    開発者ツールで要素を書き換える方法
    カテゴリ: CSS, HTML, 知識, 言語
    更新日:
    Chromeの開発者ツールで書き換える方法 Chrome のデベロッパーツールで HTML を一時的に書き換える方法をご紹介します。HTML ファイルを直接書き換える前に、ブラウザ上で変更の実装前確認、変更箇所の特定を行 […]
  18. 左側メガメニューの作り方(横スライドタイプ)【レスポンシブ】【CSSのみ】
    左側メガメニューの作り方(横スライドタイプ)【レスポンシブ】【CSSのみ】
    カテゴリ: CSS, HTML, ホームページ
    更新日:
    【【レスポンシブ対応】メガメニューの簡単な作り方【CSSのみ】 のページで簡単な「メガメニュー」の作成方法を記事にしたが,これは一般的な縦スライドタイプのメガメニューだった. 今回,必要に迫られて横タイプも作ってみたので […]
  19. CSSで二重の目のマークを作成する
    CSSで二重の目のマークを作成する
    カテゴリ: CSS, HTML
    更新日:
    CSSで二重の目のマークを作成する方法 CSSで目のマークを作成するで作成した目のマークを二重にしました。作成手順はCSSで目のマークを作成する手順に加えて実装方法を後述します。 サンプルコード HTML <div […]
  20. CSSで目のマークを作成する
    CSSで目のマークを作成する
    カテゴリ: CSS, HTML
    更新日:
    パスワード表示非表示用、CSSのみで目のマークを作成する 画像の目のマークと比べるとかなりシンプルになりますが、できる限り簡単に CSS のみで実装できる目のマークを作成しました。パスワードの表示、非表示のために用いられ […]
Pagetop