HTMLでも使用しています。たとえば色の指定。
<font color="#0000ff">「文字」の「色」は「青」</font>
タグ名(font:文字) プロパティ(color:色) 値(#0000ff:青)
CSSでもプロパティ・値を指定して、背景やフォントやボックスの指定をしていきます。
CSSファイル
body{
background:000000;
}
タグ名(body)プロパティ(background 背景色) 値(000000 黒)
*注意
プロパティと値は「:」終わりに「;」をつけてください。
プロパティ:値;
CSSファイル
body{
background-image: url(mai.jpg);
}
タグ名(body)プロパティ(background-image 背景画像) 値( url(mei.jpg) カッコ内のURLのファイルを表示)
CSSファイル
body{
background-repeat:no-repeat;
}
タグ名(body)プロパティ(background-repeat 繰り返し) 値( no-repeat 繰り返さない)
その他の値
repeat 繰り返し(デフォルト)
repeat-x 横方向のみ繰り返し
repeat-y 縦方向のみ繰り返し
例
body{
background:#000000;
background-image: url(mei.jpg);
background-repeat:no-repeat;
background-position: top right
}
背景画像をスクロール(いつもどおり)させるか
固定させる(面白い!)か、指定したり、位置を指定する
プロパティと値を記しておきます。
プロパティ:background-attachment
値:scroll スクロールする(デフォルト)
fixed 固定する
プロパティ:background-position
値:left 左
center 中央
right 右
top 上
center 真ん中
bottom 下
プロパティ:font-style
値: italic イタリック
oblique オブリック(ナナメ)
プロパティ:text-decoration
値: overline 上線
underline 下線
line-through 取り消し線
blink 点滅
例
h1{
font-style:italic;
text-align: center;
font-size:x-large;
color:#fa8072;
}
プロパティ:font-weight
値:light 細い
lighter ちょっと細い
bolder ちょっと太い
bold 太い
プロパティ:font-size
値: xx-small 非常に小さい
x-small 小さい
small ちょっと小さい
medium ふつう
large ちょっと大きい
x-large 大きい
xx-large 非常に大きい
プロパティ:font-family
値:serif 明朝体っぽい
sans-serif ゴシック体っぽい
cursive 草書っぽい
fantasy 装飾字体っぽい
monospace 等幅フォントっぽい
*フォントをMS明朝とか指定できますが、見る方が
そのフォントを持っていないと困りますので、なるべく
やめましょう。
プロパティ:text-align
値:center right left
プロパティ:color
値:#色
htmlでは、p(段落)やhn(h1~h7)、strong(強調)等を指定し、cssでその表示形式を 指定しましょう。このファイルのソースとcssファイルを参照してください。
9月29日・10月6日の2回のCSS編で紹介したことは、すべて一度は使用してみてください。 一度、使っておけば、必要になったときは、そのページのソースとCSSファイルを見ることでタグやプロパティや値を忘れてしまっても使用することができます。html・cssに慣れることで、他の人が作成したページを見て、参考にすることができるようになります。
CSSを使用すると、HTMLが大変シンプルになり、未来の自分が、見やすくなります。 htmlにおいて表示形式のタグがなくなり、見出し・段落等の文章の構造がわかりやすくなります。 製作者が文章の構造を意識することで、閲覧者に文章の構造が伝わりやすくなります。構造化された文章はたいへん 読みやすいです。これは日ごろのレポートや論文においてもたいへん重要なことです。構造を意識して書くように しましょう。ワード編でまたお話します。
またHTML自体がリンクを張ることによって、構造化した文章を作るのに適しています。そして 構造化した文章をHTMLのリンクを利用して作成しようとすると、複数のページを作成すること となります。そして複数のページの書式を指定できるCSSが大変、力を発揮します。
文章が構造化され、相手が読みやすくなることで、お互いに「他人の頭」を借りやすくなります。 製作者の意図を理解してもらえれば、閲覧者からコメントをもらいやすくなりますし、閲覧者も製作者の考えを 参考にできます。
情報の消費者から生産者に移行するための第一関門が、構造化です。しっかり身につけてください。
皆さんの情報処理演習2のページにCSSを利用してください。グループのメンバー一人ひとりが、グループのメンバー全員がCSS、そして構造化を理解することを目指してください。グループのメンバーの総合評価でメンバーの評価を決定します。ただ単に理解するだけではなく、お互いのオリジナリティの和集合を目指してください。