 |
> スタイルシートを活用 |
| スタイルシートを活用 |
運営サイトのメンテナンス時間削減のためにもスタイルシートを活用しよう！
| 【スタイルシートを少しだけ学ぼう！】 「スタールシート」ってよく耳にしますよね。でも、難しそうだったり、面倒くさそうだったりで手を出し難いと思っていませんか？実は僕も最近までそう思ってました（笑）。 しかし、実は少し勉強するだけで結構使いこなせるようになります。当サイトで使用しているスタイルシートの内容なんて本当に簡単です。次に挙げるメリットを見ていただければ、「使用しても、しなくても変わらないよ」って考えがなくなると思うます。 ■メリット
では、スタイルシートとは何か。簡単に述べるならば、ＨＴＭＬで記載するタグの内容を部分的に切り出して別ファイルにしたものです。作成するにはホームページビルダーなどのソフトウェアで行えますが、テキストファイルの拡張子を「ＣＳＳ」に変更するだけでも作成できます。では、当サイトでは使用しているスタイルシートの内容（一部）をご紹介したいと思います。
『<STYLE>〜</STYLE>』の間に内容を記載することになります。サンプルでは「Ｐタグ」と「Ａタグ」の内容をスタイルシートに記載しています。 『p{}』で記載されている内容は、文字種類（FONT-FAMILY），文字のサイズ（FONT-SIZE），文字列の高さ（LINE-HEIGHT）が定義されています。 文字サイズについては「％」で指定していますが、これは相対指定という方法でブラウザで指定されている大きさ（ＩＥであれば、「最大」「大」「中」「小」「最小」から選択）に対して９３％で表示するよう定義しています。 文字列の高さについては、指定しないと行間がない状態で表示されることになります。これでは読み辛いこともあり、文字サイズに対して５０％の余白を行間とするよう定義しています。 『A:hover{}』で記載されている内容は、リンクが設定されている部分（『Ａタグ』で囲まれている文字列や画像）にカーソルが入ると右（LEFT）に１ピクセル，下（TOP）に１ピクセル移動するように定義しています。こうすることで、より目立たせることができますので「ページが遷移するんだな」と訪問者にアピールすることができます。 どうですか、そんなに難しくないですよね。スタイルシートに関して記載するとかなりのページ数になりますので、当サイトではコレ以上の記載は控えますが興味のある方には次のサイトをオススメします。 ◎スタイルシート例文辞典 サンプルがたくさん記載されていますので、そのまま使用することができます。当サイトにスタイルシートを適用する際、かなり参考にさせてもらったサイトです。 ◎スタイルシート簡単作成ツール なんと記載したい内容を画面上で指定するだけでスタイルシートを無料で作成してしてくれます。 |
前頁【これだけは覚えたいタグ】へ
【ページトップへ戻る】
- PR by CM-click -
まず始めに