ウェブサイトをキレイにおしゃれに見せるために避けて通れないcss。
自分が他人にどう見られているか気になるように、自分が作ったウェブサイトも他人からどう見られているか気になるもの。
お粗末なサイトにならないようにプロパティを使いこなしてもらいたい。
cssの基本を知りたい人はこちらの記事を参考まで。
【超シンプル解説】CSSの基本
cssはウェブサイトを鮮やかにしてくれる言語。 htmlが大体できるようになったらセットでcssを覚える。 cssもhtmlと同じで全く難しくない。 htmlに対してcssを適用...
今回の内容
ボックスモデルのプロパティ
ボックスモデルとは？
cssのプロパティを学ぶ前にボックスモデルという概念を紹介する。
例えば、こんなhtmlがあったとする。
<p>プロパティを学ぶ！</p>すると、ボックスモデルというものが構成される。
「プロパティを学ぶ！」という文字のコンテンツ周りに色々とあるが、これ全体をボックスモデルと呼ぶ。
この概念により、文字の上下にスペースを開けたり、線で文字を囲ったり、下線だけ引いたりすることができる。
つまり、レイアウトを調整できるようになるのだ。
では、レイアウトを調整するプロパティを紹介していく。
margin
marginはボックスモデルの外側にスペースを作ることができる。
p {
margin: 30px;
}この場合は上下左右に30pxのスペースができる。
個別で指定したい場合の書き方。
p {
margin-top: 30px;
margin-right: 30px;
margin-bottom: 30px;
margin-left: 30px;
}先程と同じ結果になるが、個別で値を変えれば違う結果になる。
「4行も書くのが面倒」って人はこういう書き方でも構わない。
p {
margin: 30px 30px 30px 30px; /* 上・右・下・左で指定 */
}padding
paddingはmarginと同じでスペースを作るプロパティだが、大きな違いがある。
marginは外側にスペースを作るのに対し、paddingは内側にスペースを作る。
書き方はmarginと同じである。
border
borderはその名の通り、線を引くためのプロパティ。
p {
border: 1px solid black;
}左の値から、線の太さ・線のスタイル・線の色を指定できる。
solidは実線のこと。
他にdotted(点線)・double(二重線)・dashed(破線)などを指定できる。
ちなみに先程と結果は同じになるが、このようにも書ける。
p {
border-width: 1px;
border-style: solid;
border-color: black;
}先程のコードと比べればわかるが、結果は同じなのに3行も書かなければならない。
この場合、状況に応じて書き方を変える必要がある。
また、marginやpaddingと同じように上下左右を指定して書くこともできる。
p {
border-left: 1px solid black; /* 左側だけに線が引かれる */
}文字と線の間にスペースが欲しいなら、padding-leftを使ってスペースを開ける。
width、height
widthは横幅、heightは高さを指定するプロパティ。
p {
width: 900px;
height: 500px;
}この場合、横幅が900px、高さが500pxになる。
しかし、この書き方は横と高さが固定になるので注意が必要。
固定にしたくない場合は、最小値と最大値を指定することができる。
p {
min-width: 300px; /* 横幅の最小値 */
min-height: 300px; /* 高さの最小値 */
max-width: 1000px; /* 横幅の最大値 */
max-height: 1000px; /* 高さの最大値 */
}min-..というのが最小値のことでそれ以下にはならない。
逆にmax-..はそれ以上にならない。
今回だと、300pxより下にはならず、1000pxより上にはならない。
つまり、300px〜1000pxで指定していることになる。
overflow
このプロパティはボックス内に文字が収まらない時に使う。
p {
overflow: hidden; /* 隠す */
overflow: scroll; /* 隠すが、スクロールで見れる */
}このように好みの値を指定できる。
デフォルトでは値がvisibleで、全て表示されるようになっている。
cursor
ボックスの上にマウスをある時の形状を指定できる。
p {
cursor: pointer;
}上記の場合、ボックスの上にマウスがあると指の形状のカーソルに変わる。
クリックさせたいボックスがある時に使用することが多い。
他にも指定できるカーソルがあるが、基本的にpointerさえ覚えていれば問題ない。
border-radius
ボックスに角丸をつけることができる。
p {
border-radius: 10px;
}この場合、全ての角が10px分丸くなる。
また、marginやpaddingと同じように角ごとに指定できる。
p {
border-radius: 10px 10px 10px 10px; /* 左上・右上・右下・左下で指定 */
}よく使われるプロパティ
ウェブサイトを作成する上で欠かせないプロパティを紹介していく。
font-size
文字の大きさを指定するプロパティ。
色々な指定の単位
- px
- em → 親要素のフォントサイズを1とした倍率を指定
- rem → ルート要素のフォントサイズを1とした倍率を指定
- vw → ビューポートの幅に対する割合を指定
- vh → ビューポートの高さに対する割合を指定
font-family
フォントを指定するプロパティ。
p {
font-family: 'Arial','メイリオ', Meiryo,'ヒラギノ角ゴシック','Hiragino Sans',sans-serif;
}先に書いたフォントほど優先順位が高くなる。
ウェブフォントを使いたい場合はGoogleFontsがオススメ。
font-weight
フォントの太さを指定するプロパティ。
p {
font-weight: bold; /* 太字 */
font-weight: 100; /* 数値でも可 100~900 */
}text-align
コンテンツの位置を揃えるプロパティ。
p {
text-align: left; /* 左揃え */
text-align: center; /* 中央揃え */
text-align: right; /* 右揃え */
text-align: justify; /* 両端揃え */
}line-height
行の高さを指定できるプロパティ。
行の高さが足りず、窮屈に見える時に使う。
p {
font-size: 15px;
line-height: 2;
}上記の場合、font-sizeが15pxに対し、line-heightが2を指定することにより、行の高さが30pxになる。
行の高さ30pxから文字の大きさ15pxを引いた残りの15pxが上下のスペース分となるので、上下に7.5px分のスペースが入るからだ。
color
文字色を指定できるプロパティ。
p {
color: red;
color: #FF0000;
}上記の場合、色は同じ赤になる。
3行目の指定方法はRGBという書き方で、赤・緑・青3つの原色を混ぜて多彩な色を表現できる。
background
色々なプロパティを指定できる。
p {
background-color: #FF0000; /* 色 */
background-image: url(color.jpg); /* 画像 */
background-position: 50% 50%; /* 位置 */
background-size: cover; /* サイズ */
}プロパティを覚えるには
色々なプロパティを紹介してきたが、初心者の人は使いこなすまで少し時間がかかる。
最初のうちは書いて確認、また書いて確認を繰り返すことになる。
うまく表現できないこともあったり、心が折れそうになる時もあると思うが、諦めずにやれば使いこなすことができる。
楽しんでcssを書いてほしい。
何事も楽しむのが一番。
