CSSメモ

HTMLについて ページ22

##

この辞典は、CSSについて色々語っていく予定なので、HTMLの詳しいことはあまり説明しません。
ですが、いわゆる「機能」をつける時に知っておくといいので少し説明しますね。

わかるに越したことはありませんが、わからなくても大丈夫です。
わかっていたら少し凝ったことが出来るかもしれませんね。

HTMLって？
ホームページに使うプログラム言語です。
HTMLが設計図、それをCSSでデザインしていき、動作部分はJSで実装。
それがホームページの基本構造です。

簡単に言うと、塗り絵の線がHTML、それを色鉛筆で塗っていくのがCSSという感じ。

HTMLとCSSのつながり
CSSには、”セレクタ“という、どこをデザインするか決める部分があります。
CSSのセレクタは、HTMLでタグ、というのを使って決めていきます。
ここから難しくなっていくので、気になった方はぜひググって見てください。

ここで、作品タイトルの設定を例にみていきます。
作品タイトルのセレクタは、
「h1 .utitle a」
です。
これは、
h1というタグに、”utitle”という名前が付いていて、そしてaというタグも付いている状態です。
h1タグは、題名などに使うタグで、aというタグは、リンクに使うタグです。
題名はクリックすると作品のトップに飛びますが、それはリンクも一緒になっているからです。

h1.utitle aと書かなくても、.utitle aでも大丈夫なのは、
h1と書かなくても、「utitle」という独自のお名前が付いているから、というわけです。

初心者さんが見てもなんだこれ状態ですが、こんな感じになっています。

＜h1 class="utitle" style="font-family:Meiryo,MS UI Gothic,sans-serif;"＞
　＜a href="/u.php/novel/csssukinadake/"＞
　 好きなものを好きなだけ。【CSS配布】
　＜/a＞
＜/h1＞

em7のCSS配布の作品のものです。
これを見ると、ちゃんとh1タグとaタグで囲まれています。

ごく簡単にまとめると、HTMLで使ったタグが、CSSでセレクタになるよ、という話。

##

機能の仕組み/セレクタの書き方→←ラジオボタンとチェックボックス

→ 目次へ｜作品を作る｜感想を書く
他の作品を探す