言語

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

【CSSのみ】ヘルプボタンを作成する
カテゴリ: CSS, HTML
更新日: 2022年11月09日
画像を使用しないヘルプボタン【CSSのみ】ヘルプボタンをクリックしたときに説明を表示する方法では、ヘルプボタンは画像を使用していましたが、CSSのみでヘルプボタンを作成することができたのでご紹介します。チェックボック […]
CSSで目のマークを作成する
カテゴリ: CSS, HTML
更新日: 2022年11月09日
パスワード表示非表示用、CSSのみで目のマークを作成する画像の目のマークと比べるとかなりシンプルになりますが、できる限り簡単に CSS のみで実装できる目のマークを作成しました。パスワードの表示、非表示のために用いられ […]
CSSで二重の目のマークを作成する
カテゴリ: CSS, HTML
更新日: 2022年11月09日
CSSで二重の目のマークを作成する方法 CSSで目のマークを作成するで作成した目のマークを二重にしました。作成手順はCSSで目のマークを作成する手順に加えて実装方法を後述します。サンプルコード HTML <div […]
【CSS】矢印の中に文字を書く方法
カテゴリ: CSS, HTML
更新日: 2022年11月09日
矢印の中に文字を書く実装方法今回は矢印の上に文字を書く方法を紹介します。図形の上に文字を書く時の参考にしていただければと思います。矢印も CSS のみで作成していますので、その方法も併せてご紹介します。サンプルコード […]
【CSS】マーカー風の下線(アンダーライン)を引く方法
カテゴリ: CSS, HTML
更新日: 2022年11月09日
マーカー風の下線(アンダーライン)を引く css では【CSS】簡単な下線(アンダーライン)の引き方【HTML】にあるように簡単に下線の実装ができます。今回実装したいマーカー風の下線(アンダーライン)ですが、少し css […]
【Chrome】開発者ツールの使い方【デバッグ】
カテゴリ: JavaScript, システム, 知識
更新日: 2022年11月09日
開発者ツールを使ったデバッグ方法開発者ツールの各機能の使い方はわかったが、実際にどう使えばいいのかわからないという方向けに、javascript で作成した関数のデバッグを実践的に行います。今回はボタンのクリックでパ […]
「リンクはクロールできません」と言われた時
カテゴリ: HTML, JavaScript, ホームページ, 知識
更新日: 2022年11月08日
引き続き，新しいPageSpeed Insights 対策． PageSpeed Insights で SEO という種別の中に「リンクはクロールできません」という文言が出てくるときがある．「リンクはクロールできません […]
「不適切なアスペクト比の画像が表示されています」と言われる時
カテゴリ: CSS, HTML, ホームページ, 知識
更新日: 2022年11月07日
PageSpeed Insights の結果の「おすすめの方法」の中で「不適切なアスペクト比の画像が表示されています」と言われる時． img タグには正しい width height を指定しているのになぜか「アスペ […]
「タップターゲットのサイズが適切に設定されていません」と言われるとき
カテゴリ: CSS, 知識
更新日: 2022年11月02日
PageSpeed Insights の仕様がまた変わっていたので，新しいPageSpeed Insights 対策．新たに「ユーザー補助」「おすすめの方法」「SEO」の項目が現れた．その中の SEO の中に「タップ […]
CLS (Cumulative Layout Shift) の改善
カテゴリ: HTML, ホームページ
更新日: 2022年11月02日
PageSpeed Insights 対策の一環． CLSとは(累積レイアウト変更とは) PageSpeed Insights に出てくる Cumulative Layout Shift 解説ページである Web Vit […]
【CSS】レスポンシブ対応縦横ヘッダ固定テーブル(縦横スクロール)
カテゴリ: CSS, HTML, ホームページ
更新日: 2022年10月28日
スマホ表示の時に画面からはみ出る table をスライドさせる方法に関して以前に書いたが，それらは IE11 で動くようにするために面倒くさいことをしていた．しかし，もうサポートも終了するので，IE11 は無視してもよ […]
URLのルート相対パスとは
カテゴリ: HTML, ホームページ, 知識
更新日: 2022年10月04日
ホームページを作成する際，URL のパス(Path)をどうするかという問題がある．パスとはそのファイルまでのディレクトリ(フォルダ)を示すもので，これによってファイルがどこにあるかが分かる．ホームページを制作する際に […]
スキップリンクとは(Skip Link)
カテゴリ: CSS, ホームページ, 知識
更新日: 2022年08月09日
WordPress の公式テーマ登録時に知ったことを少し書いてみる．テーマを投稿するとレビュアーからのダメ出しが来る．自分の時間もあるだろうに大変ありがたいことである．そこで指摘されたものにスキップリンクというもの […]
擬似要素 focus-within を使う時に気を付けること
カテゴリ: CSS, HTML, ホームページ
更新日: 2022年08月09日
先日，「キーボードナビゲーションの実現」という記事を投稿した後に気づいたのだが，擬似要素 focus-within を使って，ドロップダウンメニューを制御すると問題があることが判明した．条件は少し限定されるが，それはド […]
キーボードナビゲーションの実現
カテゴリ: HTML, ホームページ, 知識
更新日: 2022年08月08日
「Skip Link コンテンツをスキップというナビゲーション」という記事でスキップリンクのことに言及したが，そもそもホームページはキーボードで全部操作出来るべきだという考えがあり，それがキーボードナビゲーションという […]
【CSS】簡単なアニメーションの作り方【transform】
カテゴリ: CSS, ホームページ
更新日: 2022年08月03日
アニメーションについて書いた他の記事は以下で．【CSS】簡単なアニメーションの作り方【transition】【CSS】簡単なアニメーションの作り方【animation】【keyframes】 CSS だけを使ってもア […]
【CSS】画像クリックでポップアップウィンドウ(拡大画像)を表示する方法
カテゴリ: CSS, HTML, ホームページ
更新日: 2022年07月30日
javascript を使用しないで CSS のみでウィンドウ・レイヤー(拡大・縮小)を表示する方法について，いろいろ調べていたが，うまく見つからなかったので考えて作ってみた．(当然だが HTML は使っている．) モー […]
【レスポンシブ対応】CSSのみでの多階層ドロップダウンメニューを作成
カテゴリ: CSS, HTML
更新日: 2022年07月25日
javascript 無しでナビゲーションメニューを作る弊社のホームページはナビゲーションメニューとしてドロップダウンメニューを採用している．当初は drawer.js を使用して作成されていた．しかし，このレスポ […]
【CSS】簡単なアニメーションの作り方【animation】【keyframes】
カテゴリ: CSS, ホームページ
更新日: 2022年07月14日
今まで CSS で簡単にアニメを作れるという話を書いてきた．【CSS】簡単なアニメーションの作り方【transition】【CSS】簡単なアニメーションの作り方【transform】 CSS だけを使ってもアニメーシ […]
【CSS】簡単なアニメーションの作り方【transition】
カテゴリ: CSS, ホームページ
更新日: 2022年07月14日
アニメーションについて少し書いてみた．続きは以下で．【CSS】簡単なアニメーションの作り方【transform】【CSS】簡単なアニメーションの作り方【animation】【keyframes】 CSS だけを使って […]
【CSS】FlexBoxで縦に中央揃えさせる方法
カテゴリ: CSS, HTML
更新日: 2022年07月07日
FlexBoxで縦に中央揃えさせる方法 FlexBox を使って要素を縦並びかつ、中央揃えさせる方法を紹介します。例は以下の通りです。開発者ツールから FlexBox で要素を縦に中央揃えさせていることも確認いただけま […]
【CSS】五角形の矢印を作成する
カテゴリ: CSS, HTML
更新日: 2022年06月27日
CSSで五角形の矢印を作成する方法状態の遷移を表す際などに用いられる、五角形の矢印をCSSで簡単に実装する方法をご紹介します。以下、五角形の矢印のサンプルです。 HTML <div class="ar […]
「ウェブフォント読み込み中のテキストの表示」問題の解決方法
カテゴリ: CSS
更新日: 2022年06月09日
引き続き，PageSpeed Insights の診断で表示される問題について扱う．いつの間にか「ウェブフォント読み込み中の全テキストの表示」から「ウェブフォント読み込み中のテキストの表示」に表記が変わっていたので修正 […]
「オフスクリーン画像の遅延読み込み」への対策
カテゴリ: HTML, ホームページ
更新日: 2022年06月09日
PageSpeed Insights の「改善できる項目」の中の「オフスクリーン画像の遅延読み込み」で「オフスクリーンの非表示の画像は、重要なリソースをすべて読み込んだ後に遅れて読み込むようにして、操作可能になるまでの […]
FID (First Input Delay) の改善
カテゴリ: JavaScript, ホームページ, 知識
更新日: 2022年06月09日
FIDとは(初回入力遅延とは) PageSpeed Insights に出てくる Core Web Vitals の一つ First Input Delay 解説ページである Web Vitals を見てみると Firs […]
LCP (Largest Contentful Paint) について
カテゴリ: CSS, HTML, ホームページ, 知識
更新日: 2022年06月09日
LCPとは(最大コンテンツの描画とは) PageSpeed Insights に出てくる Largest Contentful Paint 解説ページである Web Vitals を見てみると Largest Conte […]
【CSS】レスポンシブ(スマホ)対応横スクロールテーブル(表)
カテゴリ: CSS, HTML
更新日: 2022年04月28日
(2021/03/18 文章追加とコード微修正) レスポンシブ対応のホームページの制作で面倒なものの一つに表(table)がある．横に並んだものを縦にする CSS はよく目にするが，横長のものだと項目が多い場合に訳が分 […]
リッチリザルトへの BlogPosting での対応
カテゴリ: HTML, 知識
更新日: 2022年04月25日
リッチリザルトとはリッチリザルトは、通常の青色リンクよりも高度な機能を持つ、Google サービス（Google 検索など）での検索結果です。引用: リッチリザルトテスト(google) つまり，より情報量の多い豊か […]
画像スライダー Swiper の使い方・設定(HTML, CSS, JavaScript)
カテゴリ: CSS, HTML
更新日: 2022年04月20日
ホームページで使われる「画像スライダー」は種類が多数あり，どれを使うか迷う．無料で商用利用可能な画像スライダー Swiper 少し調べてみた限り，Swiper というスライダーがとてもよく出来ていると思ったのでこのスラ […]
CSSで円(丸)を描き，内側にテキスト(文字)を入れる
カテゴリ: CSS, HTML
更新日: 2022年04月18日
円をかいて，中に文字を入れるとはこのような絵のこと．上左中央右下 CSS と HTML による円とテキストの記述方法中の文字の位置指定のポイント CSS は以下のようになる．円は position: rel […]

言語

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

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