HTML

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

  1. 擬似要素 focus-within を使う時に気を付けること
    カテゴリ: CSS, HTML, ホームページ
    更新日:
    先日,「キーボードナビゲーションの実現」という記事を投稿した後に気づいたのだが,擬似要素 focus-within を使って,ドロップダウンメニューを制御すると問題があることが判明した. 条件は少し限定されるが,それはド […]
  2. キーボードだけで操作
    キーボードナビゲーションの実現
    カテゴリ: HTML, ホームページ, 知識
    更新日:
    「Skip Link コンテンツをスキップ というナビゲーション」という記事でスキップリンクのことに言及したが,そもそもホームページはキーボードで全部操作出来るべきだという考えがあり,それがキーボードナビゲーションという […]
  3. 【CSS】画像クリックでポップアップウィンドウ(拡大画像)を表示する方法
    カテゴリ: CSS, HTML, ホームページ
    更新日:
    javascript を使用しないで CSS のみでウィンドウ・レイヤー(拡大・縮小)を表示する方法について,いろいろ調べていたが,うまく見つからなかったので考えて作ってみた.(当然だが HTML は使っている.) モー […]
  4. 【レスポンシブ対応】CSSのみでの多階層ドロップダウンメニューを作成
    カテゴリ: CSS, HTML
    更新日:
    javascript 無しでナビゲーションメニューを作る 弊社のホームページはナビゲーションメニューとしてドロップダウンメニューを採用している. 当初は drawer.js を使用して作成されていた. しかし,このレスポ […]
  5. 【CSS】FlexBoxで縦に中央揃えさせる方法
    カテゴリ: CSS, HTML
    更新日:
    FlexBoxで縦に中央揃えさせる方法 FlexBox を使って要素を縦並びかつ、中央揃えさせる方法を紹介します。 例は以下の通りです。開発者ツールから FlexBox で要素を縦に中央揃えさせていることも確認いただけま […]
  6. 【CSS】簡単な下線(アンダーライン)の引き方【HTML】
    カテゴリ: CSS, HTML
    更新日:
    本文中のテキストや見出しに下線を付けたい時があると思います。アンダーラインは text-decoration や border を利用してとても簡単に実装できますので、1本の下線をはじめとして、二重線、点線、破線など用途 […]
  7. 【CSS】五角形の矢印を作成する
    カテゴリ: CSS, HTML
    更新日:
    CSSで五角形の矢印を作成する方法 状態の遷移を表す際などに用いられる、五角形の矢印をCSSで簡単に実装する方法をご紹介します。 以下、五角形の矢印のサンプルです。 HTML <div class="ar […]
  8. 【CSS】矢印の中に文字を書く方法
    カテゴリ: CSS, HTML
    更新日:
    矢印の中に文字を書く実装方法 今回は矢印の上に文字を書く方法を紹介します。図形の上に文字を書く時の参考にしていただければと思います。矢印も CSS のみで作成していますので、その方法も併せてご紹介します。 サンプルコード […]
  9. 【WordPress】リッチリザルト対応の自動パンくずリスト生成
    カテゴリ: HTML, php, 知識
    更新日:
    このところ,リッチリザルトの投稿が続いている. そこで今更ではあるが「パンくずリスト」についても書いてみる. 折角なので WordPress を使っている場合に自動でパンくずリストを生成する方法を書いてみよう. プラグイ […]
  10. CSSで二重の目のマークを作成する
    カテゴリ: CSS, HTML
    更新日:
    CSSで二重の目のマークを作成する方法 CSSで目のマークを作成するで作成した目のマークを二重にしました。作成手順はCSSで目のマークを作成する手順に加えて実装方法を後述します。 サンプルコード HTML <div […]
  11. サーチコンソール(速度)
    「オフスクリーン画像の遅延読み込み」への対策
    カテゴリ: HTML, ホームページ
    更新日:
    PageSpeed Insights の「改善できる項目」の中の「オフスクリーン画像の遅延読み込み」で 「オフスクリーンの非表示の画像は、重要なリソースをすべて読み込んだ後に遅れて読み込むようにして、操作可能になるまでの […]
  12. CLS (Cumulative Layout Shift) の改善
    カテゴリ: HTML, ホームページ
    更新日:
    CLSとは(累積レイアウト変更とは) PageSpeed Insights に出てくる Cumulative Layout Shift 解説ページである Web Vitals を見てみると Cumulative Layo […]
  13. LCP (Largest Contentful Paint) について
    カテゴリ: CSS, HTML, ホームページ, 知識
    更新日:
    LCPとは(最大コンテンツの描画とは) PageSpeed Insights に出てくる Largest Contentful Paint 解説ページである Web Vitals を見てみると Largest Conte […]
  14. 【CSS】目のマークでパスワードの表示を切り替える実装方法
    カテゴリ: CSS, HTML, 言語
    更新日:
    目のマークでパスワードの表示非表示を切り替える 目のアイコンをクリックすることでパスワードの表示非表示の切り替える方法を今回は CSS で実装しました。 javascript での実装は【JavaScript】目のマーク […]
  15. 【CSS】ボタンクリックでパスワード(テキスト)の表示・非表示を切り替える
    カテゴリ: CSS, HTML, 知識
    更新日:
    概要 ログイン画面で、パスワード表示ボタンをクリックするとパスワードが表示されるという機能は、現在では当たり前になっています。 ですが、もしパスワード表示ボタンが無く、表示・非表示が切り替えられなかったらとても不便に感じ […]
  16. アコーディオン
    アコーディオン表示をやめたほうがいい理由
    カテゴリ: CSS, HTML, ホームページ
    更新日:
    ウェブにおけるアコーディオン表示とは HTML 界でのアコーディオン表示とは呼んで字のごとく,楽器のアコーディオンのように折り畳みが出来るような表示の仕方を表す. なんとなくエレガント?にも見えるためか,いろんなページで […]
  17. アンケートフォーム
    カテゴリ: HTML, JavaScript, システム, ホームページ, マーケティング
    更新日:
    問い合わせやアンケートを自由に簡単に作成したい! アンケートフォームとは 資料請求やお問い合わせなど引き合いを出したい時に必要な情報だけを記入して,ボタンを押すだけでそのホームページを持っている会社や人宛にメッセージを送 […]
  18. レスポンシブな多階層ハンバーガーメニューの作り方【CSSのみ】
    カテゴリ: CSS, HTML, ホームページ
    更新日:
    スマホで現れるハンバーガーメニューとは スマホでホームページを見ていると右上に「三」のようなマークを見ることが多いと思う. これを見かけがハンバーガーのようだからハンバーガーメニューと呼ぶようだ. 恐らく,箇条書きのメニ […]
  19. CSS のみでアコーディオン表示する
    カテゴリ: CSS, HTML, システム
    更新日:
    ウェブページでアコーディオン表示を使う場合は気をつけましょうというページを書いておいてどうなのかということだが,一応,javascript (jQuery) を使わない「アコーディオン表示」の書き方を説明する. アコーデ […]
  20. 開発者ツールで要素を書き換える方法
    カテゴリ: CSS, HTML, 知識, 言語
    更新日:
    Chromeの開発者ツールで書き換える方法 Chrome のデベロッパーツールで HTML を一時的に書き換える方法をご紹介します。HTML ファイルを直接書き換える前に、ブラウザ上で変更の実装前確認、変更箇所の特定を行 […]
Pagetop