やまだ系

コンピューターやWEB関連の情報収拾と整理、資格取得に関することを目的にしたブログ

h1のタグに対して設定

はてなを借りた理由はCSSについて、確認しようとおもったのがきっかけだったので、テストしていきます。
ちなみのこのプログは「はてな」の用意しているテーマを現在利用しつつの改造です。最終的には全部自分で設定していくつもり。ちゅーか、がんばれ自分!!

今日は見出しの部分H1のタグに対して背景に色を付けることと、文字色の設定、上下に点々の罫線を引く設定をしました。h1はhtmlだけでは大きな文字になってしまって扱いにくかった物ですが、CSSを利用することで文字の詳細設定が可能になりました。
h1は見出し1タグへの設定です。タグ名を直接指示ケースの利点は、そのままページ内にh1を指定すると、全てこの設定になること。部分的に設定したい場合はタグ名を直接指定せず、かわりにクラスというものを指定していきます。

ちなみに大きさ指定の「px」はピクセル指定で、%は見ている人の環境にあわせて何%表示とか、固定じゃなく相対的なサイズをあらわす場合に使用。指定内で書かれているものは英語の単語の意味が分かればなんとか理解できるかと思います。

h1 {
/*文字の背景色を緑系に*/
background-color: #80A288;
/*文字を周りをひとつの固まり扱いに*/
display: block;
/*文字背景の上下高さ50px*/
height: 50px;
/*文字背景の横幅をウィンドウの幅に合わせて100%の幅で表示させる*/
width: 100%;
/*文字の色*/
color: #FFFFFF;
/*上の罫線のスタイルを点々に*/
border-top-style: dotted;
/*下の罫線のスタイルを点々に*/
border-bottom-style: dotted;
/*上の罫線の色を白に*/
border-top-color: #FFFFFF;
/*下の罫線の色を白に*/
border-bottom-color: #FFFFFF;
}