cssについて

css概要

css(cascading style sheet)は、HTMLのデザインをどうするのかを示すもので、 HTMLは文章の構造を示すタグとその文章の体裁を決めるcssと作成時に適切に用いることで、データとしての文章とデザインを分離させることができます。

ここでは、ごく基本的な部分を紹介しますが、ググれば多くの情報を入手することができます。キーワードは、「css」、「スタイルシート」などが良いでしょう。加えて、行いたい処理、例えば、「影をつける」、「写真に文字を重ねる」なども合わせて指定すれば、思い通りのデザインもできるようになってくるでしょう。

講座では、cssを拡張したscss (Sassy css)を利用しますが、cssとして記述しても問題ありませんので、まずは、cssの基本を見につけましょう。

基本的な書き方

HTMLファイルの<head></head>の間に<link rel="stylesheet" type="text/css" href="style.css">を追加し、新たにテキストエディタでstyle.cssを作成しましょう。そしてそのファイルにスタイルの指定をすることで、スタイルが適用されます。

例えば、body{ background: gray}記載すれば、灰色の背景となるでしょう。また、h1{ font-size 20px; color: red; }と記載すれば、タグh1の文字はフォントサイズ20ptで赤色の文字となるでしょう。

同じh1でも別のスタイルを適用したい場合もあると思います。そのような場合には、<h1 class="hoge">のようにタグにクラス名を指定し、style.cssにh1.hoge{スタイル}と指定してあげると、そのクラス名のみにスタイルが適用されます。

例

body{
    color: #002F4C;
    background: #EDEBE3;
}
.main{
    background: #FAFAFA;
    margin: 20px;
    padding: 10px;
    border: 1px dotted #002F4C;
}
.right{
    text-align: right;
}
h1.header-title{
    text-align: center;
    color: #002F4C;
    font-size: 40px;
}
.nav-ul{
    text-align: right;
	border-bottom:2px solid #000000;
}
li{
    display: inline-block;
}
h2{
    border-bottom: 4px double #A67A16;
}
.contents{
    margin:20px;
    margin-top:0px;
    padding-top:0px;
}