はじめに
cssとはCascading Style Sheets(カスケーディング・スタイル・シート)の略でHTMLで書いたものを色付けし見栄えを良くするもです。
HTMLとCSSを連携させましょう
HTMLにはheadタグ・bodyタグとあります。
headタグは設定画面で野球でいう監督やコーチのようなもので表に出ません。
bodyタグは画面上にでるもので野球でいうと選手のようなもの表に出てきます。
なのでbodyタグで書いたものを文字の色や大きさ、位置等を変えてくれとCSSに指示するにはまずheadタグにCSSの居場所を指定してあげる必要があります。
1.CSSのファイルを作って下さい。
vs codeの場合は画面左上のファイルのマークをクリックして○○○.cssと入力すれば選択しているフォルダにファイルが作れます。ファイルのマークがない時はカーソルを近づけましょう。
※vs code以外でのファイル作り方はこちらを参照してください
2.色付けしたいHTMLファイルにheadタグとbodyタグを作りましょう。
3.headタグにlinkタグを作りhref=””のダブルクォート内に作ったCSSファイル名を入れてください。
※ ”＝ダブルクォート
これでHTMLとCSSが連携することができます。
プロパティとは
CSSプロパティはHTMLの見た目を変更できるお化粧道具のようなものです。
例えば、文字の色を変えたい時は、colorという道具を使い色を変えることができます。
CSS内に書くときは上記のようにします。
色付けするHTML｛ プロパティ：変更する値；｝基本はこのような書き方となっていますので覚えておきましょう。
プロパティの種類（初級）
プロパティは約２５０種類あり全て覚えるのはHTML要素同様で難しいです。
なのでよく使う簡単なプロパティを紹介していこうと思います。
color（文字の色）
color(カラー）とは文字の色変更するものです。
HTMLコード
<h1>hello bollboy</h1>
CSSコード
h1{color: blue;}
カラーのコードは色々ありますのでこちらを参照してください。↓
font-size(文字の大きさ)
font-size(フォントサイズ)は文字の大きさを変えることができます。
ただし、値はpx(ピクセル)、em(エム)、rem(レム)、%(パーセント)がありどれを使用したらいいかわからなくなります。こちらを参照して意味を理解して使い分けれるようになりましょう。↓
CSS単位(px, em, rem, %, vh, vw…)を理解する
私の記事てまは基本pxを使用します。
HTMLコード
<p class=”font1″>font-size 15px</p>
<p class=”font2″>font-size 50px</p>
<p class=”font3″>font-size 100px</p>
CSSコード
.font1{font-size: 15px;}
.font2{font-size: 50px;}
.font3{font-size: 100px;}
HTMLコードで書かれていclass（クラス）という属性はタグ（要素）に名前を付けることによりpタグが被っても個別にCSSでの色付けを行うことができます。
backglound-color（背景の色）
backglound-color（バックグランドカラー）要素の背景色を変更するもの
HTMLコード
<h1>hello bollboy</h1>
CSSコード
h1{background-color: blue;}
text-align（文字の位置）
text-align(テキストアライン）文字の位置を変更するもの
HTMLコード
<h1>hello bollboy</h1>
CSSコード
h1{text-align: center;}
left=左寄せ center=中央寄せ right=右寄せ で配置を変更できます。
border（線を引く）
border（ボーダー）とは線を引くもの
HTMLコード
<h1>hello bollboy</h1>
CSSコード
h1{border: solid ;}
値にsolidと入ってますがこれは線の種類です。線の種類はこちら参照してください。↓
- solid=一本線
- dot ted= 点線
- dashed= 破線
- double=二重線
上記のように書いたものは四角線となっていますがアンダーラインや横線のみなどできます。まずはラインの位置名称を覚えましょう。
左＝left 右＝right 上＝top 下＝bottom
線の太さも値をpx.em.rem.%にすることで変更が可能です。
margin、padding(余白の調整)
margin(マージン)は要素外の余白、padding(パディング)は要素内の余白を調整するものです。
HTMLコード
<h1>タグ（要素）</h1>
CSSコード
body{
background-color: blue;
}
h1{
background-color: white;
}
CSSコード
body{
background-color: blue;
}
h1{
background-color: white;
padding: 50px;
}
CSSコード
body{
background-color: blue;
}
h1{
background-color: white;
margin: 50px;
}
※コードで色付けする要素とプロパティとで改行していますがこれは見やすくしているだけでカッコ内にプロパティ・値が収まっていれば問題なく処理されます。
display:frex;(横並びにする)
display(ディスプレイ)のプロパティはタグの表示形式を変更するものです。
値には主にblock(ブロック).inline(インライン).iniine-block(インラインブロック)を使用するのですが私も初めは理解に苦しんでいたのでまずは、flex(フレックス)の方が分かりやすいと思ったので紹介します。
flex(フレックス)とは単純に表示を縦並びから横並びにできることです。
HTMLコード
<section>
<p>タグ➀</p>
<p>タグ➁</p>
<p>タグ➂</p>
</section>
CSSコード
p{
width: 200px;
height: 200px;
background-color: aqua;
}
普通に書くと縦並びになりますがdisolay:flex;を入れることでこのようになります。
section{
display: flex;
}
p{
width: 200px;
height: 200px;
background-color: aqua;
margin: 15px;
}
横並びにしたらタグ同士がくっついたのでmargin:15px;を追加しています。
このように横並びにできましたが、タグを増やして横幅はみでるほどにいっぱいになるとこのように縮小して表示されます。
縮小せずに横幅いっぱいになったら行を変えて表示することもできます。flex-wrap（フレックスラップ）というプロパティを使いましょう。
section{
display: flex;
flex-wrap: wrap;
}
p{
width: 200px;
height: 200px;
background-color: aqua;
margin: 15px;
}
まだまだ序盤ですがCSS初級➀はこのへんにします。この記事とHTML初級➀をご覧になった方は
実践初級➀を行ってみてください。
これを行えば学んだことを理解できるかと思います。
コメント