言語

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

「オフスクリーン画像の遅延読み込み」への対策
カテゴリ: HTML, ホームページ
更新日: 2022年03月31日
PageSpeed Insights の「改善できる項目」の中の「オフスクリーン画像の遅延読み込み」で「オフスクリーンの非表示の画像は、重要なリソースをすべて読み込んだ後に遅れて読み込むようにして、操作可能になるまでの […]
Hタグ(見出しタグ)とHTML5 アウトライン
カテゴリ: HTML, 知識
更新日: 2022年03月31日
本記事は HTML Standard のサイトの説明に基づいている．アウトラインとは，「概要，あらまし，輪郭」などと辞書にあるが，まさにその通りで見出し(heading content)ごとに文章をグループ(secti […]
FID (First Input Delay) の改善
カテゴリ: JavaScript, ホームページ, 知識
更新日: 2022年03月31日
FIDとは(初回入力遅延とは) PageSpeed Insights に出てくる Core Web Vitals の一つ First Input Delay 解説ページである Web Vitals を見てみると Firs […]
【CSS】画像クリックでポップアップウィンドウ(拡大画像)を表示する方法
カテゴリ: CSS, HTML, ホームページ
更新日: 2022年03月31日
javascript を使用しないで CSS のみでウィンドウ・レイヤー(拡大・縮小)を表示する方法について，いろいろ調べていたが，うまく見つからなかったので考えて作ってみた．(当然だが HTML は使っている．) モー […]
Lightbox のような高級感を CSS のみで実現
カテゴリ: CSS, HTML, ホームページ
更新日: 2022年03月31日
lightbox 風な動作を CSS のみで実現してみた．(javascript や jQuery を使わないで) ライトボックスは画像の拡大表示で手軽に高級感を醸し出せるので使っているサイトは結構あると思う．前回書い […]
Youtube 動画の埋め込みで遅いページの高速化
カテゴリ: CSS, JavaScript, ホームページ
更新日: 2022年03月31日
Youtube の複数の動画を埋め込むとページ自体が非常に遅くなる(重い)時の高速化(軽量化)の方法．原因は iframe で各動画を読み込みに行くため．「youtube 複数埋め込み高速化」「youtube 複 […]
CSSで目のマークを作成する
カテゴリ: CSS, HTML
更新日: 2022年03月29日
パスワード表示非表示用、CSSのみで目のマークを作成する画像の目のマークと比べるとかなりシンプルになりますが、できる限り簡単に CSS のみで実装できる目のマークを作成しました。パスワードの表示、非表示のために用いられ […]
「ウェブフォント読み込み中のテキストの表示」問題の解決方法
カテゴリ: CSS
更新日: 2022年03月15日
引き続き，PageSpeed Insights の診断で表示される問題について扱う．いつの間にか「ウェブフォント読み込み中の全テキストの表示」から「ウェブフォント読み込み中のテキストの表示」に表記が変わっていたので修正 […]
【CSS】画像の上に文字を重ねる・重ねた文字を読みやすくする方法
カテゴリ: CSS, HTML
更新日: 2022年03月02日
画像の上に文字を重ねる・重ねた文字を読みやすくする方法画像の上に文字を重ねて表示させたいときがあると思います。例えば、製品画像に製品名を載せたい場合などです。この時に画像に直接文字を重ねるのではなく、文字の背景に4分の […]
【WordPress】多言語対応 404 エラーページ
カテゴリ: php, ホームページ
更新日: 2022年02月25日
ホームページを制作する場合はページが存在しない時のために表示するページを作成しておく．いわゆる 404 Page Not Found の 404 ページのことである．ページが見つからない時，その URL に相当するペ […]
チェックボックスのデザインをカスタマイズする
カテゴリ: CSS, HTML, JavaScript
更新日: 2022年01月26日
チェックの切り替えでデザインが変わるチェックボックスチェックボックスの切り替え時に、デザインを変更したい場合はないでしょうか。例えば会員登録情報の変更時に、登録済みの情報とは別の情報を選択した場合、変更したことが目に見 […]
【CSSのみ】ヘルプボタンを作成する
カテゴリ: CSS, HTML
更新日: 2022年01月07日
画像を使用しないヘルプボタン【CSSのみ】ヘルプボタンをクリックしたときに説明を表示する方法では、ヘルプボタンは画像を使用していましたが、CSSのみでヘルプボタンを作成することができたのでご紹介します。チェックボック […]
【CSSのみ】ヘルプボタンで説明を表示する方法
カテゴリ: CSS, HTML
更新日: 2022年01月07日
JavaScriptを使用しないヘルプボタンフォームの入力項目や機能の使い方についての説明を、？マーク(ヘルプボタン)をクリックしたときに表示する方法をご紹介します。今回は HTML と CSS のみを使用しており、 […]
レスポンシブデザインとは
カテゴリ: CSS, HTML, ホームページ, 知識
更新日: 2021年12月22日
レスポンシブデザインとは何か？「今さら何をいうのか」という話であるが，たまたま，ちょっと不可解な HTML のソースを見たので今回取り上げることにした．レスポンシブデザインとは wikipedia のレスポンシブデザ […]
【WordPress】リッチリザルト対応の自動パンくずリスト生成
カテゴリ: HTML, php, 知識
更新日: 2021年12月21日
このところ，リッチリザルトの投稿が続いている．そこで今更ではあるが「パンくずリスト」についても書いてみる．折角なので WordPress を使っている場合に自動でパンくずリストを生成する方法を書いてみよう．プラグイ […]
【CSS】テキストやリンクを目立たせるいくつかの方法
カテゴリ: CSS, HTML, ホームページ
更新日: 2021年12月21日
新しい記事を投稿した時や新商品を発売した時にその説明ページに対するリンクを目立たせたいという場合がある．そのような場合にアイコン画像を作って張るのもよいが，CSS だけで作ったほうがスッキリする．お客様に質問いただき […]
ホームページメンテナンス
カテゴリ: HTML, ホームページ, 知識
更新日: 2021年12月16日
「ホームページ担当がいない」「ホームページ作っても認めてくれない」製造業では特によく聞く言葉です．ホームページは作り方によっては実は非常に優秀な営業マンです．しかしホームページ作成担当者が成果を出しても，その成果に […]
ホームページ制作＆コンサルティング
カテゴリ: CSS, システム, ホームページ, マーケティング
更新日: 2021年12月16日
見る人のことを考えたホームページになっていますか？初心者をターゲットにしていますか？どのような人たちがページを見に来ると考えていますか？「知っている人にだけ分かればいい」大きな間違いです．ちょっと考えればわかり […]
【拡張機能】Chromeで文字コードを変更する方法【文字化け対策】
カテゴリ: HTML
更新日: 2021年11月10日
Chrome拡張機能で文字コード変更 Chromeには文字コードの変更・設定機能はない Chromeには文字コードの変更機能が存在しないので、「拡張機能」を使用します。文字コードを変更できる拡張機能「Charset」 […]
【CSS】z-index が効かない場合の注意点
カテゴリ: CSS, HTML
更新日: 2021年11月10日
z-index が効かない場合に z-index は要素の重ね合わせの順番を定義できます。以下のように使いますが、数字が大きいほど上に表示されます。 #test { z-index: 1; } スタイルシートを使って、 […]

言語

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

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