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