今日からは、用意してくださった教材「現場のプロから学ぶXHTML+CSS」という本を読み進めて行き、勉強していくことになりました。
まず、タイトルにある、「XHTML」も「CSS」もなんのことだかさっぱり・・・です。HTMLは昨日の勉強や、それ以前から多少の復習などなどから、なんとなくわかってきてはいたんですが。。
とりあえず、読んでみないことにはすすまないので、読み進めていくと色々なことがわかってきました。
まずは、XHTMLの「X」が「Extensible」＝広げることができる、拡張可能という意味だそうで、HTMLをさらに拡張したり、広げていけるものであるという事だと理解しました。CSSは、「Cascading Style sheets」の略で、スタイルシートという言葉からもわかる通り、XHTMLでつくったものをきれいに見やすくデザインするもののようです。
これでちょっとだけ疑問に思ってたことが解決しました。疑問に思っていたこととは、いままでは基本的にテキストエディタに色々な要素を入力していくことのみで、HPなんかを作っていっていると思っていたので、昨日勉強したような、<font size=～や <font color= 文字の間隔をあけたければ,<br>をいくつか並べたり、という事を駆使して、HP全体のデザインまでやっていると思っていたからです。
昨日まで勉強していた内容でも、HP上に文字列を色々と並べることはそれほど難しいと思わなかったんですが、実際のHPはそれだけでなく、デザイン的な要素が見る側にとっては重要なので、どうやってるんだろう・・・と疑問に思っていたところ、CSSがそういうデザイン部分を担当していることがわかりました。
CSSが「デザイン」担当がわかったことにより、XHTMLのほうは、「構造」を担当しているのだということも理解できました。つまりは、見栄えはCSSのほうで触れるから、XHTMLのほうは適当でいいってことではなく、構造がきちんと作られていないと、デザインもできないということのようです。
実は昨日勉強した内容で、ブログには書かなかった所があるんですが、それは、自サイト内の相対リンクの部分で、文書を「ツリー構造」としてとらえる所です。ブログに書かなかった理由に単純にツリー構造の図を書けなかったというのもあるんですが、それほど重要だと認識できなかったというほうが大きいです。
他に、書いてはいたもののあまり重要だと思ってなかったのは,<p>～</p>の段落ですね。これはエディタに入力して実際ブラウザで見ても何か具体的に見栄えが変わるものではないので、重要視せず、さらっと流していたんですが、ＣＳＳでデザインをやっていくときには、重要になってくるようです。
こうやってＸＨＴＭＬ（ＨＴＭＬ）の部分が「構造」部分を担当しているということがわかったことにより、実際に、ＨＰを作るときに載せたいことの見出しや段落などをしっかりと把握しておかなければならないこと、ＨＴＭＬのＭである「マークアップ」がそういう事なんだというのがわかりました。
今まで、少しずつＨＴＭＬのことなんかも勉強していたんですがその際に、エディタへの入力例のようなもので
<html>
<head>
<title>～</title>
</head>
<body>
<> </>
<> </>
</body>
</html>
な感じで、ずらして入力していくのも構造を把握しやすく、見やすくするためだったのかと思うとよくわかりました。
本日はここまで。
0 件のコメント:
コメントを投稿