これまでのまとめと更なる表現力
Lesson4までで、文章の表現は大体できると思いますが、さらに表現力を増すためにいくつかの要素を
紹介しておきます。
ただし、ここまでの知識では文字の色、大きさ、背景色、などの
装飾的なものを表現することは出来ません。なぜ出来ないの？・・・
と思われるでしょうが、ＨＴＭＬで行うことは、ここまでです。
では、どのようにして、文字の色、大きさ、背景、などを指定するのでしょうか？・・・
文章のデザイン CSSについて
文章のデザインは、HTMLと同じテキストファイルで、CSSというものを使用します。
HTML4.01 では、文章構造とデザインの分離と言うことが謳われています。これを行うために必要なのがＣＳＳです。
デザイン部分はすべてこのCSSに任せてしまいます。
このCSSの書き方には、インラインＣＳＳ、外部ＣＳＳなどというように、同じＨＴＭＬ内に書くものと、
外部にxxx.cssというようなファイルを設け読み込む、外部CSSというものがあります。
このテキストは、すべてインラインCSSという方法をとっています。
ソースを見ていただけば解りますが、<head>〜<head>の間に
<style type="text/css">から始まって</style>で終わっている部分です。
<style type="text/css">
<!--
h1,h2{ background-color: #ffffee; text-align: center; border:solid; border-color: #cccccc; border-width: 1px; }
h3{ background-color: #ffffee; text-indent: 2em; border:solid; border-color: #cccccc; border-width: 0px 0px 1px 5px; }
h4,h5,h6{ font-size: 100%; background-color: #ffffee; text-indent: 2em; border:solid; border-color: #cccccc; border-width: 0px 0px 1px 0px; }
|
|
省略
|
|
.caption{ font-size:90%; color: #ff4500; border:dotted; border-color:#ff99ff; border-width: 0px 0px 1px 0px; }
.note{ color: #ff2200; font-size: 90%; font-weight: bold; }
-->
</style>
このCSSについては１週間で覚えるCSSの基礎で詳しく説明しますので、まづはHTMLの書き方を完璧にマスター してください。
表現を増すための要素
それでは、表現を増すための要素をいくつか紹介しておきます。少しづつ覚えて使いこなしましょう。
- <hr>要素
- 区切り線を引きます。
- <em>要素
- 強調をする場合に使用します。
- <strong>要素
- さらに強調をする場合に使用します。
- <q>要素
- 人の言葉などを引用する場合に使用します。
- <blockquote>要素
- まとまった文章などの引用に使用します。文字下げに使用するものではありません!。
- <del>要素
- 文章の間違いを削除する場合に使用します。
- <ins>要素
- 文章の追加をする場合に使用します。
このLessonで説明した以外の要素を使う場合、まずその使用方法が正しいかどうかを確認して
使用してください。
世に出回っているHTMLの本には、間違ったことを平気で解説しているものを多く見かけます。
迷った場合は、まづ仕様書で調べ確認する。
HTMLに関することは、この
Ｗ３Ｃ仕様書にすべて書かれています。最も信頼できる出版物であり、しかも無料です。先達に感謝
HTMLを正しく書けるかどうかは、練習しだいです。
正しい文章型宣言に基づいたページの作成は、ユーザビリティ、
アクセシビリティの面においても優れています。
では、どのようにして練習をすればいいのでしょうか？・・・
幸いにも、ＷＥＢ上には、正しい文法に基づいて書かれていない文章がいくらでもあります。
正しいかどうかを調べる方法は、有名なHtmllintを
使用すれば簡単にチェックできます。
それを、修正し正しく表示できるものにする練習をするのが、最も近道ではないでしょうか？・・・
また、Word、Excelで作られた文章を、ＨＴＭＬに書き直せば、ネットを通じ共有することも可能です。
しかも、Word、Excelなどのソフトを必要としないのです。
これが出来て初めてＩＴの活用と言えるのではないでしょうか？・・・