CSSをＨＴＭＬに直接書いてみる 推奨されるやりかたは

ブログをやりながら覚えなければならないのがいっぱいあるのは
当初から覚悟はしていたのですが、予想以上に勉強しなければい
けないことが山ほどあることに気づき今更ながら驚いています。

当方の地味なホームページから他のウェブサイトを眺めてつくづ
く思うのは、

「なんて素晴らしいレイアウトなんだろう」

文字の装飾はもちろん、枠1つとっても、吹き出しや、上や下に
アクセント的に色がついていたりと、たくさんの表現法をうらや
ましく思っていました。

その表現（スタイル）を作り出しているが、CSSという言語だと
いうことを知り、ほんの真似事だけでもいいからやってみたいと
いう衝動に駆られここしばらく、CSS入門的なサイトを訪れコピ
ペですぐ使えるもので体験してみました。

ところが、

CSSの定義を読んでみて「えっ！」となってしまった。

ウェブページを作るときに、HTMLは文書構造のみを定義して
スタイルの定義には、CSSという言語を使うことが推奨されている。

ということは私が、今日予定してた下の

HTMLに直接CSSを書いてみる

文字通り、直接CSSを直接書き込んでます。

初の出番は最初で最後になるのかな？ちなみにこういうふうに
書いてます。

<span style=”position: relative; padding: .5em .75em; background-color: #f0f0f0; border-radius: 6px; box-shadow: 2px 2px 4px rgba(0, 0, 0, .1) inset;”>HTMLに直接CSSを書いてみる</span>

黄色の部分を表示するのにこれだけ使いました。

調子こいて、バンバン作ってみようと思ってたので、
予定が狂いましたが、仕方ありません。

HTML（情報構造を定義する言語）に本来の役目とは違う（スタイル
を定義する）使い方をすると、情報構造がでたらめになり検索エンジ
ンにも理解されないというのが、ぐさっときました。

CSSを使う上で、一番スマートな方法はやはり、明確な分担

1）HTMLで情報構造を定義

2）CSSでスタイルを定義

ということになりそうです。

推奨される方法に沿うやり方は

HTMLとは別に、「スタイルシートファイル」というのを作成し

ウェブページが開かれてHTMLが読み込まれたときに、そのス

タイルシートファイルを「読み込んでスタイルを定義」する

というものです。

「ふう、一から出直しです」