ホームページ作成/ボックスや枠線の表示・装飾 (HTML,CSS)

色も線種も線幅も自由な枠を作る(2ページ目)

「枠を作りたい」と思う場面はたくさんありますね。実線・点線・破線・二重線など、様々な種類の枠を作ってみませんか? 線幅は1ピクセル単位で自由自在に指定可能。実現はとっても簡単です。

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

枠線と中身との間隔を調整したい

枠線とその中身との間隔がちょっと詰まっていますから、ここを調整したいですね。そこで、次のプロパティを使用します。

  • padding : 枠線と中身の間隔

パディング(padding)とは、枠線から中身までの間隔を指定するプロパティです。
百聞は一見にしかずということで、先ほどの例にさらに加えてみましょう。

<p style="border-width: 5px; border-color: green; border-style: solid;" background-color: #ccffcc; color: #0000cc; padding: 0.5em;>
枠線と中身との間隔が結構開いたことがお分かり……
</p>

枠線と中身との間隔が結構開いたことがお分かりでしょう。(0.5文字分の間隔が開いています。)

いかがでしょうか。 上記の例では、パディングに「 0.5em 」と指定しましたから、周囲に0.5文字分の余白ができています。
先ほどまでの詰まった感じよりも、ずいぶんと見やすくなりましたね。

もちろん、先の枠線の太さと同じように、単位「px」を使って指定することもできます。 「padding: 12px;」と記述すれば、周囲に12ピクセルの余白が確保されます。

ここでは、枠線と中身(この文章)との間隔が、12ピクセルになっています。

枠そのものの幅や高さを指定したい

さて、これまでは「枠の幅」や「枠の高さ」は指定しませんでした。何も指定しなければ、中身に応じて自動的に決定(※)されます。デザインによっては、枠の大きさを指定したい場合もあるでしょう。その場合は、次のプロパティを使用します。

※ここでは、段落を表す p要素(<p>~</p>)に対してスタイルを適用していますので、横幅は「行全体」になります。 高さは、内容量に応じて必要なだけ確保されます。

  • width : 横幅
  • height : 高さ

これを先ほどの例にさらに加えてみましょう。

<p style="border-width: 5px; border-color: green; border-style: solid;" background-color: #ccffcc; color: #0000cc; padding: 0.5em; width: 340px;>
枠の横幅が 340ピクセルになっていることが……
</p>

枠の横幅が 340ピクセルになっていることがお分かりいただけると思います。 中身の文章は、自動的に適宜改行されて複数行になります。

上記の例では、枠の横幅を「340ピクセル」(340px)に指定しています。 これで、どれだけ中身の文章が多くても、アクセス者のウインドウサイズが何であっても、横幅は340ピクセルに固定されます。

横幅の指定は、「 width: 75%; 」というような割合での指定も可能です。 この場合は、枠が描画されうる領域の75%(横幅のみ)を枠で占有するこになります。 この場合だと、「枠の横幅」が「ウインドウの横幅」よりも大きくなって、ウインドウに横スクロールバーがでてしまう事態を回避できます。

枠の横幅が ウインドウの横幅に対して 75%の幅になっていることがお分かりいただけると思います。 ウインドウサイズを変化させて、枠の横幅も変化することを確認してみて下さい。

なお、ここでの横幅は「枠線も含めた幅」です。「中身(内側)の幅」ではありません。ピクセル単位で細かくデザインしたい場合には特に注意して下さい。

段落だけ?

今までは、「段落」を表す p要素(<p>~</p>)に対してスタイルシートを適用してきました。他にも、「文章中の特定の単語だけ」に適用することも可能です。

その方法は... 次のページへ →

  • 前のページへ
  • 1
  • 2
  • 3
  • 次のページへ

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

    All About公式SNS
    日々の生活や仕事を楽しむための情報を毎日お届けします。
    公式SNS一覧
    © All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます