ホームページ作成 人気記事ランキング(3ページ目)

CSSのinline-blockを使うと、自動改行での折り返し位置が中途半端になってしまう表示を避けやすくなります。日本語の文章は多少の禁則を除けばどこでも改行できるため、改行位置が「単語の途中」や「残り1文字の直前」のように中途半端になりがちです。画面幅が足りない場合にだけ、自然な位置で自動改行されるようinline-blockを指定するCSSの書き方を解説。

HTMLで書いた文章の文字間隔を調整するには、CSSのletter-spacingプロパティを使います。単位emやpxを使って望みの字間を数値で指定すれば、細かく自由な幅で文字と文字の距離を広げられます。マイナスの値を指定すれば文字詰めもできます。CSSで字間を広げたり狭めたりする簡単な方法を解説。特に文字間隔を広げたい場合に、空白文字を使って調節してはダメな理由もご紹介。

イメージマップの作り方をご紹介。1枚の画像内部に複数個のリンクを設定できるイメージマップ。画像1つを丸ごとリンクにするのではなく、画像内の一部分だけをリンクにしたり、画像の中の座標ごとに移動先の異なる複数のリンクを作ったりできます。HTMLのmap要素とarea要素を使って、画像内を円形や矩形など自由な形で区切るだけです。

メールアドレスやURLの例を書きたいとき、誰かに所有されているドメイン名を使ってサンプル文字列を作ると問題があります。URLやメールアドレスなどの例示に使えるドメイン名としてexample.comなどいくつかのドメイン名が用意されていますので、それらを使ってサンプルを書きましょう。危険なサイトに繋がる可能性もある紛らわしいドメイン名にも注意して下さい。

ボックスの背景画像は、実は「枠線(border)の真下」にも描かれています。ところが「描画開始位置」の仕様のため、半透明や点線の枠線を引くと、背景画像がずれているように見えることがあります。CSS3のプロパティ「background-clip」や「background-origin」を使えば、背景画像の表示範囲や開始位置を調節でき、ずれに対処できます。

ハート記号（ハートマーク）を書く方法を解説。画像を使わなくても、Unicodeに定義された絵文字を使えば20種類以上のハート記号を簡単にウェブ上に表示できます。CSSを使えばハートの色もサイズも自由に装飾可能。文字実体参照や数値文字参照の書き方を使ってハート記号をウェブページ上に表示する方法などをご紹介。

HTMLソースの中に画像を直接埋め込んで表示する方法を解説。HTMLはテキストデータですから、そのままではバイナリデータである画像を含められません。しかし、Base64という方法で画像をエンコード(＝テキストデータに変換)すれば、画像をHTMLソースの中に直接埋め込むことができます。読み込むファイル数を削減して高速化したい場合などに活用できます。HTMLソース内に画像を直接挿入してみましょう。

HTMLに記述したテキストをCSSで両端揃え(均等割り付け)にする方法を解説。行揃え方法を指定するtext-alignプロパティに、両端揃えを示す値「justify」を指定するだけで、各行の左端だけではなく右端もきれいに揃えられます。ただし、IEとEdgeではtext-justifyプロパティを併用する必要があります。

HTMLのaudio要素を使って、Webページ上で音楽を再生したり効果音を鳴らしたりする方法を解説。ブラウザ内蔵の音楽再生コントロール（再生ボタンがあるプレーヤー）を表示させてMP3ファイルなどの音楽を流す方法や、JavaScriptを使って音を鳴らすタイミングを制御する方法を解説。autoplay属性で自動再生させたり、source要素で複数のファイル形式に対応させたりできます。

HTML＋CSSだけでアコーディオンメニューを作る方法を解説。スクリプトは一切不要。アコーディオンメニューは、質問をクリックすると回答がスライド表示されたり、題名をクリックすると対応コンテンツが表示されたりするUIによく使われます。jQueryなどを活用してJavaScriptを書く必要があると思いがちですが、ラジオボタンやチェックボックスを活用するという意外なテクニックを使うことで、CSSだけで作成できます。