ホームページ作成 人気記事ランキング(3ページ目)
2025年10月18日 ホームページ作成内でアクセスの多かった記事をご紹介します。
21位CSSの使い方!半端な自動改行(折り返し)を防ぐ
CSSのinline-blockを使うと、自動改行での折り返し位置が中途半端になってしまう表示を避けやすくなります。日本語の文章は多少の禁則を除けばどこでも改行できるため、改行位置が「単語の途中」や「残り1文字の直前」のように中途半端になりがちです。画面幅が足りない場合にだけ、自然な位置で自動改行されるようinline-blockを指定するCSSの書き方を解説。
テキストの配置・装飾 (HTML,CSS)ガイド記事22位CSSのletter-spacingでHTMLの文字間隔を調整する方法
HTMLで書いた文章の文字間隔を調整するには、CSSのletter-spacingプロパティを使います。単位emやpxを使って望みの字間を数値で指定すれば、細かく自由な幅で文字と文字の距離を広げられます。マイナスの値を指定すれば文字詰めもできます。CSSで字間を広げたり狭めたりする簡単な方法を解説。特に文字間隔を広げたい場合に、空白文字を使って調節してはダメな理由もご紹介。
テキストの配置・装飾 (HTML,CSS)ガイド記事23位イメージマップの作り方 !HTMLで1画像内に複数リンクを設定
イメージマップの作り方をご紹介。1枚の画像内部に複数個のリンクを設定できるイメージマップ。画像1つを丸ごとリンクにするのではなく、画像内の一部分だけをリンクにしたり、画像の中の座標ごとに移動先の異なる複数のリンクを作ったりできます。HTMLのmap要素とarea要素を使って、画像内を円形や矩形など自由な形で区切るだけです。
画像の表示・活用 (HTML,CSS,JavaScript)ガイド記事24位メールアドレスやURLの例に使えるサンプル用ドメイン
メールアドレスやURLの例を書きたいとき、誰かに所有されているドメイン名を使ってサンプル文字列を作ると問題があります。URLやメールアドレスなどの例示に使えるドメイン名としてexample.comなどいくつかのドメイン名が用意されていますので、それらを使ってサンプルを書きましょう。危険なサイトに繋がる可能性もある紛らわしいドメイン名にも注意して下さい。
ホームページ作成テクニック、小技ガイド記事25位枠線の真下に描画される背景画像のずれを調整する方法
ボックスの背景画像は、実は「枠線(border)の真下」にも描かれています。ところが「描画開始位置」の仕様のため、半透明や点線の枠線を引くと、背景画像がずれているように見えることがあります。CSS3のプロパティ「background-clip」や「background-origin」を使えば、背景画像の表示範囲や開始位置を調節でき、ずれに対処できます。
画像の表示・活用 (HTML,CSS,JavaScript)ガイド記事26位ハートマークの出し方!ハート記号を表示したい
ハート記号(ハートマーク)を書く方法を解説。画像を使わなくても、Unicodeに定義された絵文字を使えば20種類以上のハート記号を簡単にウェブ上に表示できます。CSSを使えばハートの色もサイズも自由に装飾可能。文字実体参照や数値文字参照の書き方を使ってハート記号をウェブページ上に表示する方法などをご紹介。
特殊文字・記号の記述 (HTML)ガイド記事27位HTMLファイルの中に画像を埋め込んで表示させる方法
HTMLソースの中に画像を直接埋め込んで表示する方法を解説。HTMLはテキストデータですから、そのままではバイナリデータである画像を含められません。しかし、Base64という方法で画像をエンコード(=テキストデータに変換)すれば、画像をHTMLソースの中に直接埋め込むことができます。読み込むファイル数を削減して高速化したい場合などに活用できます。HTMLソース内に画像を直接挿入してみましょう。
画像の表示・活用 (HTML,CSS,JavaScript)ガイド記事28位CSSの両端揃え(均等割り付け)で行の右端も揃える方法
HTMLに記述したテキストをCSSで両端揃え(均等割り付け)にする方法を解説。行揃え方法を指定するtext-alignプロパティに、両端揃えを示す値「justify」を指定するだけで、各行の左端だけではなく右端もきれいに揃えられます。ただし、IEとEdgeではtext-justifyプロパティを併用する必要があります。
テキストの配置・装飾 (HTML,CSS)ガイド記事29位HTML5のaudio要素で、音楽の再生や効果音を鳴らす方法
HTMLのaudio要素を使って、Webページ上で音楽を再生したり効果音を鳴らしたりする方法を解説。ブラウザ内蔵の音楽再生コントロール(再生ボタンがあるプレーヤー)を表示させてMP3ファイルなどの音楽を流す方法や、JavaScriptを使って音を鳴らすタイミングを制御する方法を解説。autoplay属性で自動再生させたり、source要素で複数のファイル形式に対応させたりできます。
HTML5とはガイド記事30位スマホ対応も!アコーディオンメニューの簡単な作り方
HTML+CSSだけでアコーディオンメニューを作る方法を解説。スクリプトは一切不要。アコーディオンメニューは、質問をクリックすると回答がスライド表示されたり、題名をクリックすると対応コンテンツが表示されたりするUIによく使われます。jQueryなどを活用してJavaScriptを書く必要があると思いがちですが、ラジオボタンやチェックボックスを活用するという意外なテクニックを使うことで、CSSだけで作成できます。
ガイド記事