HTML

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

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