ショップハンター

　不定期でお送りする「css でつくる h タグ」のカスタマイズシリーズですが、今回は、公開済みの h タグの幅の変更方法をご紹介します。

---

幅を変更するには width: をつかう

　まずはフラットタイプからやってみましょう。
　以下のページをご覧ください（クリックで別タブで開きます）



　実線タイプ、一番上の「のしめはないろ」の幅を変えてみましょう。
　コピー＆ペースト用コードの最後の部分に、赤色で示したようなコードを追加すると見出しの幅を変えられます。


　これだけです。今までの流れに比べると圧倒的に簡単ですね^^。
　width: 80%; を追加することによって、 Web ブラウザで閲覧したときに元の表示幅（デフォルトが 100%）の 80% の幅で見出しが表示されます。

　こちらがカスタマイズ後の表示効果になります。




　元の幅の 80% の幅で表示されていますね。
　これは相対的な指定方法ですので、ウィンドウの見出し表示幅が 1000 ピクセルだった場合、800 ピクセルの幅に換算されて表示されるということになります。
　
　このとき、相対幅を 50% 以下にするなど、あまり数値を小さくしてしまうと、小さな（画面解像度の低い）ディスプレイを使っている訪問者が閲覧した場合に、表示幅が狭くなりすぎてかえって不格好に見えることもありますから、必要に応じて固定幅も検討してみてください。


　固定幅の指定のしかたは次のとおりです。
　以下に 3 種類の方法を示しますが、Web で最もよく使われる単位は px ですね。



　こちらが width: 20em; でカスタマイズしたの表示効果になります。

---

　つぎは立体系でやってみましょう。

　以下のページをご覧ください（クリックで別タブで開きます）

　


　例として、この中から「文字エフェクト＆ラウンドボックスタイプ」を使います。
　一番上の「べにみどり」の幅を 550 ピクセルに変更してみます。
　width: 550px; ですね。最後のセミコロン(;)も忘れないようにしましょう。



　こちらがカスタマイズ後の表示効果になります。

---

　こんどはインパクト系の「ネイルファイル形」でやってみます。

　以下のページをご覧ください（クリックで別タブで開きます）




　「こけいろ」の幅を 30 パイカ（width: 30pc;）にしてみます。



　こちらがカスタマイズ後の表示効果になります。

---

　最後にフィルム系の「ノーマル」でやってみます。

　以下のページをご覧ください（クリックで別タブで開きます）



　黒いフィルムを 20文字分の幅（width: 20em;）にしてみます。




　こちらがカスタマイズ後の表示効果になります。



　必要に応じてお試しいただければ幸いです。
　その他、コードが複雑なものに関しては、また改めてカスタマイズ方法をご紹介したいと思います。

---

おまけ：カスタマイズ時のセミコロン(;)について

　これまで、css のカスタマイズ時には、最後にセミコロンをつけ忘れないようにと説明してきましたが、列記されたコードの最終のセミコロンは省略してもかまいません。

　たとえば、このようになります。

　<h3 style="border-bottom:1px solid #426579;border-left:10px solid #426579;padding:7px;width: 700px">ここにテキストを入力します</h3>

　しかし、いったんはスタイルコードを書き終わっても、後でコード修正が必要になることもありますので、普段からセミコロンを打つクセをつけておくと記述ミスが少なくなるでしょう。


←こちらからこっそりコメントでけます