唐突にWEBプログラミング学習を開始し、htmlは順調に学習を進めることができました。
どうも！無趣味社会人ことたっつーです！！
htmlが終わったら次はcss！これをマスターすればWEBプログラミングの基礎は成立するはず…ということで、学んだことを備忘録的に残しておきたいと思います！
CSSの記述方法には３通りある
CSSですが、記述方法は以下の３通りあるとのこと。
①<h1>や<p>などのタグにつどつど属性として付け足す
例
<h1 style=”color:red; background-color:blue;>
②headタグ内に<style></style>タグを挿入してその中に記述する
例
<head>
<title>あいうえお</title>
<style>
body{color:red;}
</style>
</head>
③別のcss記述専用ファイルを作って、それを参照する
例
<head>
<title>あいうえお</title>
<link rel=”stylesheet” href=”CSSを記述したファイル名”>
</head>
<body>
<h1>かきくけこ</h1>
<p class=”a1″>さしすせそ</p>
</body>
クラスを使ったスタイルの指定
上記のようにいちいちスタイルを定義していくのは結構めんどうくさいので、あらかじめ汎用的なスタイルの型を作ってheadタグ内に記述しておき、それを参照することでスタイルの適用が可能とのこと。これを「クラス」と呼びます。
おぉ、これはwordpressで使ったことがあるぞ！ちょこっとカスタマイズしたいときなんかに、ググってみると「これをwordpressのこの部分にそのままコピペして使ってください」という優しいサイトがあったりして、特に意味も理解せずその通りやってたら自分の目的通りのカスタマイズができて感動していたけど、なるほどそういう理屈だったわけですね！
例
<head>
<title>あいうえお</title>
<style>
.b1{
color:blue;
background-color:skyblue;
}
.b2{
color:green;
background-color:yellowgreen;
}
</style>
</head>
<body>
<h1>かきくけこ</h1>
<p class=”b1″>ここは青になる</p>
<p class=”b2″>ここは緑になる</p>
</body>
そのほかのタグの知識
そのほかよく登場するタグは以下のような使い道なんだと。divに関しては記述した人のメモ的な意味もあるんでしょうかね。
・<div></div>タグでくくればまとめることができる
・段落中の一部分を装飾したい場合は<span></span>タグで挟む
頻出CSSの使い道
| スタイル | 装飾 |
|---|---|
| color | 文字色 |
| background-color | 背景色 |
| font-family: | 文字フォント |
| font-size: | 文字サイズ |
| font-weight: | 太字 |
| font-style | イタリック |
| margin | 要素と要素の間隔 |
| padding | 要素の周りの余白 |
| position:static | 要素の位置：固定 |
| position:absolute | 要素の位置：絶対位置 |
| position:relative | 要素の位置：相対位置 |
にほんブログ村
コメント