CSS -Cascading Style Sheets-
楽しみにしていたCSSが始まりました。
まず、CSSについてですが。
これまで勉強してきたのに「HTML(Hyper Text Markup Language)」と呼ばれる言葉があります。
これは、ウェブページの構造を定義するために使われる言葉です。
また、文書の中に画像や音声、動画、他の文書へのハイパーリンクなどを埋め込むこともできます。
ウェブページを作る一番基本となる記述言語と言うのでしょうか。
次にCSSについてですが、ウェブページのレイアウトやデザインを定義するのに用います。
CSSを使うと、フォントや文字の大きさ、文字飾り、行間などの見栄えに関する情報を文書本体(及び文書の論理構造を記述したHTML)から切り離すことができ、ユーザが複数のレイアウトから適当なものを選択することができるようになります。
HTMLでもレイアウトや文字の装飾などは出来ていたんですが、CSSを使うことによって、さらに広がりを持ったものが作れます。
HTMLで100通りのことが出来たとすれば、CSSによってさらに100通りが選択できて、100×100通りに世界が広がるようなものです。
ちなみに上のCSSのタイトルの囲いですが、これもCSSを使って作りました。
タグを見ると
<span style=”font-size:1.3em;font-weight:700;background-color:#f00;color:white;padding:3px 5px 3px 5px;”>CSS -Cascading Style Sheets-</span>
もしHTMLで同じものを作るとしたら、テーブルを一つ用意して作らないといけません。

CSS -Cascading Style Sheets-

タグを見ると
<table border=”0″ cellpadding=”3px” bgcolor=”#ff0000″><tr><td><font size=”+1″ color=”white”><b>CSS -Cascading Style Sheets-</b></font></td></tr></table>
となって、上のもの位ならHTMLでも出来ますが、いちいちテーブルを用意して非常に面倒な作業になります。
ましてや

こんなの

はHTMLでは作れません。
もし作るなら、画像で作らないといけません。
CSSのタグの記述にも3種類の書き方があります。
1つめは、HTMLのタグの内部にCSSを書き入れるタイプ
上で書いたCSSのタグがそうです。HTMLのタグである<span>にstyle=””を追記してCSSを書き入れていきます。
2つめは、HTMLのヘッダー内に定義するタイプ
これは、まずHTMLでのウェブページの作り方から説明しないといけなくなりますが。
ウェブページを作る時、一番初めに必要なタグは
<html>webページ全体はここから/htmlまでです
<head>/headまでにヘッダー部分としてページについての説明をします
</head>
<body>/bodyまでにページ内の内容を書き込みます
</body>
</html>
この<head>のなかにあらかじめCSSを用意しておいて、もし<span>というタグが出たらこのように表示してください。と書き入れます。
3つめは、別にCSS専用のファイルを用意して、そこから呼び出すタイプ
2つめにhead内に書いた記述をそのまま別ファイルとして移してそこから呼び出します。
メリットとしたら、ページ内のタグの記述が簡素化されてSEO対策が有利に働きます。
あと、id やclassと言った名前をつけるものをHTMLタグにつけてることで、その名前をつけたタグだけを特定して指定することもできます。
なんかCSSの説明だけでめっちゃ書いてしまったw
それだけややこしいというかとっつき難いというか。
ただ、習ってみるとHTMLの延長のようなもので、そこまで難しいと言うよりは
面白くて興奮しました。
なんでこんなに素晴らしいものを知らなかったんだ~!とも思いましたよ(;´Д`)
しかも。こんだけの内容をたった2日でやってしまうとは・・・。
かなりハイペースで進んで行って、復習のため、ろくにブログを書く暇もありませんでした。
お陰さまで色んなサイトのソースを見てもCSSはだいぶ理解出来るようになりました。
よっし、目標はこのブログのCSSを自分で作ろう!
ということで、少しずつテンプレートのCSSを自分でいじっていきたいと思います。


2 Thoughts on “職業訓練日記【八週目】その2

  1. SECRET: 0
    PASS: 74be16979710d4c4e7c6647856088456
     ふ、二日間でCSSを!?
    僕は二週間頑張りましたがわからずFLASHに逃げたのに、のずさんは面白くて興奮って!!(汗.笑)
     それにしても、わかりやすくて勉強になります。  

  2. SECRET: 0
    PASS: 74be16979710d4c4e7c6647856088456
    ほんとに二日間は、詰め込み教育でしたw
    そしてそのままJavascriptに入っていくのが恐ろしいですよw
    今までHTMLしかわからなかったんで、色んなサイト見てもどうやって作ってるのかさっぱりだったんですよ。それがCSSで分かったら脳汁全開でしたww

コメントを残す

メールアドレスが公開されることはありません。

Post Navigation