あさくまろん

cssの基本事項をまとめてみた

f:id:asakumamasaru:20171127235739j:plain

ブログのデザインは、基本的にcssで調整されています。

  • 背景の指定
  • 背景の色
  • 文字の種類
  • 文字の大きさ
  • 文字の色
  • 行の高さの指定
ブログデザインのすべての項目は、cssで指定することで見栄え良く表示されます。

  • ブログのデザインをいじりたい
  • もっと読みやすいブログにしたい
  • 自分流に、ブログの雰囲気をカスタマイズしたい
ブログの見栄えを変えたいときは、cssを勉強してみましょう。

ということで、ざっくりまとめてみます。cssの基本的な使い方を。

cssとは何か

cssとは、カスケーディングスタイルシートの略称です。
htmlにもとづいて作成された文章に対して、デザインでの装飾を施すためのものです。

/*文字の大きさと行間*/
.entry-content {
    font-size:17px;
    line-height:2.1em;
}

/*文字の形*/
body {
font: 17px/1.8 "游ゴシック", "YuGothic", "Yu Gothic", 'ヒラギノ角ゴ ProN W3', "Hiragino Kaku Gothic ProN", "Meiryo", Helvetica, Arial, sans-serif;
}
h2.h3.h4.h5.entry-title a {
font: 19px/1.8 "游ゴシック", "YuGothic", "Yu Gothic", 'ヒラギノ角ゴ ProN W3', "Hiragino Kaku Gothic ProN", "Meiryo", Helvetica, Arial, sans-serif;
color: #00addd;
font-weight: bold;
}

文字の大きさ、行間、文字の形等を、css言語を使って細かく指定していきます。
cssを使わずして、視覚的に読みやすいブログの形成はできないといっても過言ではありません。

cssの基本3要素

cssを語る上で、絶対に外せない3つの要素があります。

  • セレクタとは、htmlタグに対して、見栄えのデザインを調整するためのもの。
  • プロパティとは、具体的にどんなデザインを施すかという内容部分。
  • 値とは、プロパティの実際の数字。
3つの要素は、cssの基本中の基本なので押さえておきましょう。

htmlについては、ボクが以前書いた記事が参考になると思います。

/*文字の大きさと行間*/
.entry-content {
    font-size:17px;
    line-height:2.1em;
}
/*.entry-contentが、セレクタ*/
/*font-sizeが、プロパティ*/
/*17pxが、値*/

セレクタに対する、プロパティを、値で具体的に示していきます。
初めての方は、なんのこっちゃよくわからんという感じになるでしょう。
実際に使いながら、少しずつ理解を深めていけば必ず使いこなせるようになりますよ。

プロパティーは複数指定できる

セレクタに対して、複数のプロパティを指定することができます。

/*文字の大きさと行間*/
.entry-content {
    font-size:18px;
    line-height:2.2em;
}
/*.entry-contentが、セレクタ*/
/*font-sizeが、プロパティ*/
/*17pxが、値*/

セレクタ(entry-content)に対して、文字のサイズ(font-size)と、行間(line-height)を指定しています。

プロパティは種類が豊富

プロパティは、セレクタの内容を指定するものです。

  • background:背景の指定をする
  • background-color:背景の色を指定する
  • color:文字色を指定する
  • font-family:フォントの種類を指定する
  • font-weight:フォントの太さを指定する
  • line-height:行の高さを指定する
  • text-align:行の揃え位置を指定する
  • width:幅を指定する
  • height:高さを指定する
  • margin:マージン(要素の外側)の指定をする
  • padding:パディング(要素の内側)の指定をする
  • border:ボーダーの色や太さを指定する
  • position:要素の配置方法を指定する
  • display:要素の表示形式を指定する
  • float:左か右に寄せて配置する
  • z-index:要素の重なりの順序を指定する
backgroundや、background-colorは、ブログのデザインをしたいなら、絶対に知っておくべき項目になります。
ボクも、試行錯誤を重ねて何度も変更してます。
細かい配置のデザインは、width・height・margin・paddingで調整することが多くなります。

デザインのディテールに拘りたいなら、基本的なプロパティーはすべて押さえておきましょう。

プロパティーの値をまとめて書く

プロパティーの値は、省略してまとめて書くことができます。
値をまとめ書きする方法を、ショートハンドと言います。

.dance{
    margin-top:10px;
    margin-bottom:15px;
    margin-left:20px;
    margin-right:20px;
}

マージンが4つ並んでいる状態のcssです。

.dance{
     margin:10px 20px 15px 20px;/*上、右、下、左*/
}

4つのマージンを、省略して一つにまとめることができます。
指定するときのイメージは、上から時計回り。上・右・下・左の順番で数字を指定していきます。

margin:10px;/*上下左右*/
margin:15px 20px;/*上下、左右*/
margin:10px 20px 15px;/*上、左右、下*/

上下左右を一括してもいいし、上下と左右を1つのかたまりとしてもいいし、左右を一括して上と下の値を別々に指定することもできます。

ショートハンドできるプロパティを、ざっとまとめておきます。

margin,
padding,
border,
background,
font

marginとpaddingは頻繁に使います。ショートハンドを使って、シンプルで美しいcss構文が書けるように心がけましょう。

参考になる記事。

セレクタを一括してまとめて書く

セレクタは、一括してまとめ書きすることができます。
セレクタを一括することで、見出しのパディング指定をまとめることができるので、css構文がきれいになります。パディングの値修正も、簡単にできるのでおすすめです。

h2{
    color:white;
    font-size:18px;
}
h3{
    color:white;
    font-size:16px;
}
h4{
    color:white;
    font-size:16px;
}

3つのセレクタに対して、それぞれ別々に値を指定しています。

,(コンマ)を使ってセレクタを区切ることができます。複数のセレクタに同じプロパティを指定してみます。

h2,h3,h4{
    color:white;
}
h2{
    font-size:18px;
}
h3{
    font-size:16px;
}
h4{
    font-size:16px;
}

colorプロパティーの記述量を減らすことができました。colorプロパティーの値の変更も一括してできるので、編集作業時間の短縮にもなります。

CSSにコメントを書く

CSSは、構文の中にコメントを書くことができます。
「/*」と「*/」で囲まれた部分を、コメントとしてみなします。コメントは、一行~複数行書くこともできます。

.entry-content {
    font-size:17px;/*文字の大きさ*/
    line-height:2.1em;/*行間*/
}

コメントは、cssに反映されません。自分で見て編集作業が捗るように、コメント機能を使ってみましょう。

参考になる記事。

宣言を複数指定する

プロパティと値を、宣言と言います。
宣言は、一括してまとめて指定することができます。

.entry-content {
    font-size:17px;/*文字の大きさ*/
   }
.entry-content {
    line-height:2.1em;/*行間*/
}

セレクタに対する宣言を一つずつ指定すると、css構文が長くなってしまいます。

.entry-content {
    font-size:17px;
    line-height:2.1em;
}

;(セミコロン)を使って、セレクタに対して複数の宣言を一括して指定してみました。
1つのセレクタに対して、2つ以上の宣言を指定する場合、プロパティを記述して、半角英数のコロン「:」と半角英数のセミコロン「;」の間に値を記述します。
複数の宣言の間を区切るときは、;(セミコロン)を使います。実践しながら覚えていきましょう。

規則集合と宣言ブロックと宣言

CSSのセレクタ・プロパティ・値をまとめて俯瞰したときの、用語を覚えていきましょう。

  • 規則集合とは、セレクタとプロパティーと値をすべてまとめた総称。
  • ブロック宣言とは、
    {(左中括弧)から
    }(右中括弧)までをまとめた総称。
  • 宣言とは、プロパティーと値の総称。

/*規則集合*/
.entry-content {
    font-size:17px;
    line-height:2.1em;
}
/*ブロック宣言*/
{   font-size:17px;
    line-height:2.1em;
}
/*ブロック*/
    font-size:17px;

規則集合とブロック宣言と宣言を、文字で見たときに意味が理解できるようにしておきましょう。

参考になる記事。

背景をグラデーションで指定する

グラデーションを使うと、ブログのデザインが洗練して見えるようになります。
グラデーションの指定は、backgroundプロパティーに、linear-gradientの値を使って色を指定します。

/* 記事タイトル */
.entry-title {
position: relative;
padding: 0.2em 0.5em;
background: -moz-linear-gradient(to top, #4facfe 0%, #00f2fe 100%);
background: -webkit-linear-gradient(to top, #4facfe 0%, #00f2fe 100%);
background: linear-gradient(to top, #4facfe 0%, #00f2fe 100%);
box-shadow: 0 0 4px rgba(0, 0, 0, 0.56);
font-weight: lighter;
}
mozやwebkitは、ベンダープレフィックスと言います。
ベンダープレフィックスとは、CSSで各社WEBブラウザが独自に実装した、標準化されていない拡張機能を記述するための識別子のことをさします。
CSSプロパティの接頭(プレフィックス)に、各社WEBブラウザを表す文字列を追記して記述します。

ブラウザごとにベンダープレフィックスは異なります。

  • InternetExplor:-ms-
  • Chrome iso:-webkit-
  • Mozilla:-moz-
  • Opera:-o-
グラデーションを設定するときは、各ブラウザに対応したベンダープレフィックスを記述することをおすすめします。

ベンダープレフィックスについて参考にした記事。

グラデーションについて、参考になるサイト。

widthで連続するリストを横並びに等分表示する

widthを使えば、連続するリストを横並びに等分表示させることができます。

<html>
<head>
<title>ダンスグッズ一覧リスト</title>
</head>
<body>
<h1>ダンスグッズ一覧リスト</h1>
<div id="dance-item-list">
<ul>
<li>商品01</li>
<li>商品02</li>
<li>商品03</li>
<li>商品04</li>
<li>商品05</li>
<li>商品06</li>
<li>商品07</li>
<li>商品08</li>
<li>商品09</li>
<li>商品10</li>
<li>商品11</li>
<li>商品12</li>
<li>商品13</li>
<li>商品14</li>
<li>商品15</li>
<li>商品16</li>
</ul>
</div>
</body>
</html>

商品をリストタグで箇条書きして、divタグで箇条書きのブロック要素を囲んでいます。

widthを使って、等分する割合を決めていきます。

リストを偶数で等分表示する

リストを偶数で等分表示するのは、簡単です。

#item-list ul li {
  width: 50%;/*値を50パーセントに指定することで、2等分になる*/
}
#item-list ul li {
  width: 25%;/*値を25パーセントに指定することで、4等分になる*/
}
#item-list ul li {
  width: 12.5%;/*値を12.5パーセントに指定することで、8等分になる*/
}

widthプロパティーに対して、均等な値を指定すれば、リストが等分に表示されるようになります。
奇数でも、5等分など均等に割り切れる場合は、widthプロパティーの指定だけで、リストを等分表示することができます。

均等に割り切れない割合で、リストを奇数で等分表示するためには、細かい計算が必要になってきます。
ですので、リストを奇数で等分表示する方法は、以下の記事を参考にしてみてください。

まとめ

  • cssとは何か
  • cssの基本3要素
  • プロパティーは複数指定できる
  • プロパティは種類が豊富
  • プロパティーの値をまとめて書く
  • セレクタを一括してまとめて書く
  • CSSにコメントを書く
  • 宣言を複数指定する
  • 規則集合と宣言ブロックと宣言
  • 背景をグラデーションで指定する
  • widthで連続するリストを横並びに等分表示する
  • リストを偶数で等分表示する

cssの基本事項をざっとまとめてみたけど、まずはプロパティーを頭に叩き込んでおきましょう。
必ず使いこなせるようになりますよ。使いながら学んでいけば。

自分で自由自在にデザインをいじれるようになれば、ブログ作成が楽しくなるに違いありません。

参考にした記事。