CSS続き   











CSS続き:背景・フォント

 

プロパティ・値

HTMLでも使用しています。たとえば色の指定。

<font color="#0000ff">「文字」の「色」は「青」</font>

タグ名(font:文字) プロパティ(color:色) 値(#0000ff:青)



CSSでもプロパティ・値を指定して、背景やフォントやボックスの指定をしていきます。



背景

背景色 background-color

CSSファイル
body{ background:000000;

}
タグ名(body)プロパティ(background 背景色) 値(000000 黒)


*注意

プロパティと値の間は「:」。終わりに「;」をつけてください。
プロパティ

背景画像 background-color

CSSファイル
body{
background-image: url(mai.jpg);

}
タグ名(body)プロパティ(background-image 背景画像) 値( url(mei.jpg)  カッコ内のURLのファイルを表示)

背景画像の繰り返し background-repeat

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ファイルを参照してください。

最後に

ここで、紹介したことは、すべて一度は使用してみてください。一度、使っておけば、必要になったときは、そのページのソースとCSSファイルを見ることでタグやプロパティや値を忘れてしまっても使用することができます。html・cssに慣れることで、他の人が作成したページを見て、参考にすることができるようになります

 CSSを使用すると、HTMLが大変シンプルになり、未来の自分が、見やすくなります。htmlにおいて表示形式のタグがなくなり、見出し・段落等の文章の構造がわかりやすくなります。製作者が文章の構造を意識することで、閲覧者に文章の構造が伝わりやすくなります。構造化された文章はたいへん読みやすいです。これは日ごろのレポートや論文においてもたいへん重要なことです。構造を意識して書くようにしましょう(これはワード編でお話した論文の書き方と共通していますね)。

またHTML自体がリンクを張ることによって、構造化した文章を作るのに適しています。そして構造化した文章をHTMLのリンクを利用して作成しようとすると、複数のページを作成することとなります。そして複数のページの書式を指定できるCSSが大変、力を発揮します。

文章が構造化され、相手が読みやすくなることで、お互いに「他人の頭」を借りやすくなります。 製作者の意図を理解してもらえれば、閲覧者からコメントをもらいやすくなりますし、閲覧者も製作者の考えを 参考にできます。

情報の消費者から生産者に移行するための第一関門が、構造化です。しっかり身につけてください。

html・css課題1:ロシア映画紹介ページの作成(締め切り10月26日)

 池田嘉郎先生からご依頼のあった本学の図書館にある、ロシア語のDVDを紹介するページを作ろう!

  1. 池田先生からのご依頼

このページや、htmlの説明のページ、そしてhtmlの説明のページにリンクされている皆さんのページを紹介するペー 池田先生の求めるページを作って見よう。

映画の紹介のところは、池田先生があとで執筆します。


html・css課題2:この演習のホームページを作ろう(締め切り10月26日)

自分の情報処理演習2のページを作ろう。ファイル名は 自分の学籍番号.html 例 1100600X.html

HTML編・EXCEL編・Word編・PowerPoint編のページをそれぞれ作り、これからここで行った課題が見れるようにしよう。私はそれを見て、採点します。また3年生・4年生になったとき、また就職したとき、自分がそのページをみて卒論や仕事ができるようにしておいてください。

これから始まるEXCEL編・PowerPoint編はとりあえずページだけ作っておいて、あとでコンテンツをリンクできるようにしておいてください。。