CSSをHTMLに直接書いてみる 推奨されるやりかたは

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

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

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

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

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

ところが、

CSSとは
HTML や XML の要素をどのように修飾(表示)するかを
指示する、W3Cによる仕様の一つ。文書の構造と体裁を分離させるという理念を実現する為
に提唱されたスタイルシートの、具体的な仕様の一つ。-引用-ウィキペディア

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が読み込まれたときに、そのス

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

というものです。

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

スポンサーリンク
336×280広告

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
336×280広告