【CSS】の書き方をまとめてみた 『レスポンシブ対応』※随時更新中

ホーム
フロントエンド
【CSS】の書き方をまとめてみた『レスポンシブ対応』※随時更新中

フロントエンド

2019.08.6

【CSS】の書き方をまとめてみた『レスポンシブ対応』※随時更新中

ホームページをつくるなら必須な『HTML』と『CSS』。

最近はスマホが増えたこともあり、

パソコンでもスマホでも見やすいようなレイアウトが重視されるようになってきました。

『CSS』の書き方も、

パソコン版だけでよかった2002年頃とは随分変わってきたなと思います。

そこで今回は、『CSS』でよく使う書き方をまるっとまとめてみました。

Sponsored link

CSSの書き方基本セレクタ

『CSS』は、『HTML』とセットで作成する必要があります。

『HTML』側でタグ、id、クラスなどを記述して、

『CSS』側でタグ、id、クラス毎にスタイルを作ることができます。

HTML側

タグ・・ p や div など
id ・・ id=”xxx” と書く・・同じidはページ内に1つだけ
クラス・・class=”xxx” と書く・・同じクラスはページ内に何回でも使える

CSS側

p{} ・・タグ名で指定
#idName{} ・・id名で指定・・頭に#をつける
.className{} ・・class名で指定・・頭に . をつける

『CSS』では、

セレクタ{プロパティ:値; } という書き方でスタイルを指定していきます。

書き方サンプル

p {color:blue; line-height:1.5;} 
/* p ・・ セレクタ
   color, line-height ・・プロパティ
   blue, 1.5 ・・値
*/

p {color:blue;  /* セミコロンで改行すると見やすい */
   line-height:1.5;
}

CSSの書き方具体例。

See the Pen
mouse-hover-sample by aoki_monpro (@suica)
on CodePen.

また、セレクタを複数指定することもできます。

p, div, .class ・・複数要素に指定コンマで区切り半角スペース空ける
div p ・・ div配下の子要素が対象(孫も対象)
div > p ・・div直下の子要素だけ対象

アオキ

他にも色々あるのでチートシートを参照ください。

CSSセレクタのチートシート

CSSの書き方知っておきたいリセットcss

『グーグルクロム』や『インターネットエクスプローラー』などのブラウザごとに、
少しずつスタイルが調整されているので、初期化する必要があります。

大きく分けて『reset.css』と『normalize.css』と存在するので、
事前に適用しておくとレイアウト調整がスムーズにできるようになるかなと思います。

2019年版！おすすめのリセットCSSまとめ

アオキ

個人的には『normalize.css』あてるようにしています。

CSSの書き方知っておきたいCSS設計 BEMなど

id名やクラス名というのは

名前の付け方に特に決まりがないので、

自由に作れる反面、

グチャグチャになりやすいという欠点を持っていたりします。

個人でつくる分にはどうとでも作っていいとは思いますが、

仕事だったり、複数人で作ったりする場合は、

後から見てもわかりやすい、メンテしやすいような名前をつけたりします。

『CSS設計』としていくつかの考え方があります。

OOCSS
BEM
SMACSS
FLOCSS
RSCSS

などなど。

わかりやすいのは『OOCSS』かなと思いつつ、
使いやすい方法を探してみたり、アレンジしてみるといいのかなと思います。

/* OOCSSのサンプル */

<!-- oocss.html -->
<h1>OOCSS(Object Oriented CSS)</h1>
<ul class="menu">
  <li class="item item-large">link</li>
  <li class="item item-active">active</li>
</ul>

/*oocss.css */
.menu {
  list-style-type: none;
}
.item {
  width: 80px;
  margin-bottom: 5px;
  color: #4486F7;
  border: 1px solid #4486F7;
  text-align: center;
}
.item-large {
  width: 100px;
}
.item-active {
  color: #fff;
  background-color: #4486F7;
}

OOCSS、BEM、SMACSS、FLOCSS、RSCSSを比較して自分にあった設計思想をみつける

[BEM設計]うわああってならないBEMの書き方をワイヤーフレーム使って整理するぞ（その1）

BEMをSassで快適に書く方法

アオキ

ここからようやく『CSS』のプロパティの話。

CSSの書き方フォントや幅の単位(絶対値と相対値)

文字サイズや要素の幅の単位には、

大きく分けて、絶対値(absolute)と相対値(relative)があります。

また、ブラウザのデフォルトサイズは下記になっています。

100% = 1em = 1rem = 16px = 12pt

フォントやサイズの種類は以下。

px ・・絶対値
% ・・親要素の％
em ・・%と同じ考え方 50%なら 0.5em
rem ・・ルート(html)に対する割合 0.5remなら8px
vw ・・ブラウザ横幅全体を100vw
vh ・・ブラウザ縦幅全体を100vh

パソコンでもスマホでも同じフォントサイズでよければ『px(ピクセル)』で。

大きさを変えたりする場合はそれぞれの比率で調整したりします。

See the Pen
font-size-test by aoki_monpro (@suica)
on CodePen.

アオキ

個人的には『rem』が使いやすいなと思ってます。

参考記事
CSSのfont-sizeが%とかemとかremとかvwで指定されてると、ビビっちゃう君と僕を救う2分

CSSの書き方幅と高さ

width ・・横幅
height ・・縦幅
max- ・・最大◯◯px まで
min- ・・最小◯◯px から

パソコンのディスプレイの横幅と、スマホの横幅は随分違うので、

横幅のサイズに合わせて表示を切り替えるという手法がとられます。

CSSの書き方レスポンシブ対応(メディアクエリ)

『レスポンシブサイト』をつくるなら一番人気と思われるCSSフレームワーク『Bootstrap4』では、

5つの画面サイズ(画面の横幅)に合わせて調整ができるようになっています。

Extra small ・・544px未満
Small ・・ 544px以上 768px未満
Medium ・・ 768px以上 992px未満
Large ・・ 992px以上 1200px未満
Extra Lage ・・1200px以上

『Bootstrap4』の中身はこうなっています。

// Extra small 小さめのスマホ
@media (max-width: 575.98px) { ... }

// Small 大きめのスマホ
@media (min-width: 576px) and (max-width: 767.98px) { ... }

// Medium タブレット
@media (min-width: 768px) and (max-width: 991.98px) { ... }

// Large デスクトップ
@media (min-width: 992px) and (max-width: 1199.98px) { ... }

// Extra large 大きめデスクトップ
@media (min-width: 1200px) { ... }

頭に『@media』とつけて、

最小いくつ、最大いくつというような形で設定します。

『メディアクエリ』と言ったりします。

Bootstrapのグリッドシステムの使い方を初心者に向けておさらいする

もんプロ～問題発見と解決のためのプログラミング〜

【レスポンシブサイト】のつくり方をめっちゃわかりやすく書いてみた【Bootstrap4...

https://coinbaby8.com/how-to-make-responsive-site.html

『レスポンシブサイト』の作り方を知りたいんだけど・・どれくらい難しいんだろう・・できたら簡単につくりたいんだけど・・こんなお悩みにお応えさせていただきます。そもそも『レスポンシブサイト』って何？『レスポンシブサイト』を一言で言えば、パソコンでもスマホでもいい感じに表示されるサイトと言っていいのかなと思います。2000年頃は、ホームページといえばパソコンの事だけ考えていればよかったんですが、2008年に『iPhone3G』が発売されて以来、スマホを持つ人が年々少しずつ増えていきました。『iPhone3G』の頃はまだ『...

Sponsored link

CSSの書き方 marginとpaddingの違い

margin ・・要素の外側の空白
padding ・・要素の内側の空白

それぞれ設定値を1つ～4つまでとれます。

margin: 1px ・・上下左右に適用
margin: 1px 2px ・・上下、左右の順に適用
margin: 1px 2px 0px・・上、左右、下の順に適用
margin: 1px 2px 3px 4px・・上、右、下、左の順に適用

margin: 0 auto; でセンタリングできます。

他に、margin-top, margin-left, margin-right, margin-bottom という書き方もできます。

See the Pen
css-margin-padding by aoki_monpro (@suica)
on CodePen.

また、CSSテクニックとして、

高さ方向にpaddingを%で指定すると、基準値をwidth(100%)から取得する

という性質があるので、

レスポンシブ対応しつつ、縦横比率を保持させる方法もあります。

【CSSテクニック】ブロック要素の比率を維持しながら可変させる方法

CSSの書き方レイアウト関連(要素の位置や奥行き)

要素の位置を変更・固定・重ねる position

2つの要素を重ねたり、固定させたりする時に使います。

position: relative ・・相対位置
position: absolute ・・絶対位置
position: fixed ・・固定(スクロールしても位置が変わらない
top: bottom: left: right: ・・上下左右からの値

2つの要素を重ねる時は、

親が『relative』
子が『absolute』

と覚えておくと楽です。

See the Pen
css-relative-absolute by aoki_monpro (@suica)
on CodePen.

CSSのpositionを総まとめ！absoluteやfixedの使い方は？

透明・レイヤー

執筆中

z-index
opacity

Sponsored link

CSSの書き方文字やboxの装飾

執筆中

文字

letter-spacing ・・文字と文字の間隔を指定
line-height ・・行の高さを指定
vertical-align ・・行やセルの縦方向の調整

ボックス

border-radius ・・ボックスの角を丸める

See the Pen
css-border-radius by aoki_monpro (@suica)
on CodePen.

CSSの書き方インラインとブロックについて display

『HTMLタグ』毎にdisplayプロパティが決まっています。

block・・p, div, ul, h1～h6
inline・・a, spna, omg

調整するには以下。

display:block ・・横幅いっぱい。縦に並ぶ
display:inline ・・横に並ぶ
display:inline-block ・・blockとinlineの中間
display:none ・・非表示

アオキ

スマホの幅なら非表示にしたい時などに、noneはよく使います。

【CSS】displayの使い方を総まとめ！inlineやblockの違いは？

CSSの書き方はみ出る時の対策

執筆中

overflow
text-overflow

CSSの書き方疑似関連

擬似クラス :linkや:hover

例えばボタンやリンクのテキストなど、

マウスを押したりクリックしたりした時のスタイルをつくれます。

:link ・・リンク(未訪問)
:visited ・・リンク(訪問済)
:hover ・・カーソルがあわさっている時
:active ・・クリック中のスタイル
:focus ・・フォーカスされた時(フォームなど)
:first-child ・・要素内の最初の子要素
:nth-child(n) ・・要素内のn番目の子要素のスタイル
:nth-of-type(x) ・・x番目の要素を指定

:hover のサンプル。

See the Pen
mouse-hover-sample by aoki_monpro (@suica)
on CodePen.

CSSにおける疑似クラスとは？

CSSで作る！押したくなるボタンデザイン100（Web用）

【保存版】CSSだけで作れるホバーアニメーションボタン総まとめ

Sponsored link

擬似要素 ::before や ::after

要素の前や、要素の後にくっつけるのが『擬似要素』になります。

::before
::after

記事の見出しで ::before はよく使われます。

See the Pen
::before test by aoki_monpro (@suica)
on CodePen.

CSSのコピペだけ！おしゃれな見出しのデザイン例まとめ68選

回り込み解除で ::after はよく使われます。

.clearfix::after{ /*回り込み解除用のクラス */
    content: '';
    display: block;
    clear: both;
}

CSSの疑似要素とは？beforeとafterの使い方まとめ

CSSの書き方レイアウト関連(縦や横に並べる)

『CSS』で横に並べる方法はいくつかあります。

float (フロート)
flexbox (フレックスボックス)
grid (グリッド)

最近は『float』はあまり使われず、『flexbox』か『grid』で調整されることが多いようです。

flexbox

横に並べる時にとっても便利な『FlexBox(フレックスボックス)』。

横に並べたい要素をflexでくくって、
その中でそれぞれの要素を調整することができます。

Flexコンテナ(親要素に設置)の種類

flex-flow ・・一括指定
justify-content ・・水平方向の配置
align-items ・・垂直方向の配置

Flexアイテム(子要素に設置)の種類

flex-grow ・・要素の伸張
flex-basis ・・要素の幅

『Flexbox』の練習サイトもありますのでぜひ。

FLEXBOX FROGGY(日本語版)

参考記事
【CSS】Flexboxの使い方を徹底解説！基本から実践まで(サンプルあり)

Sponsored link

Grid 上下左右に格子状に

上下左右に格子状にレイアウトをつくれる『Grid(グリッド)』。

Bootstrapのグリッドと名前が一緒ですが、こちらは縦横ともに比率調整できます。

Flexboxと同じように、
親要素がコンテナで、
子要素がアイテムとして扱います。

Grid コンテナ

grid-template-rows ・・高さ数の分だけ
grid-template-columns ・・横の並び数の分だけ

Grid アイテム

grid-row ・・行の方向
grid-column ・・列の方向

See the Pen
Basic CSS Grid Layout by aoki_monpro (@suica)
on CodePen.

参考サイト
CSSグリッドレイアウトでサイズが違う複数のボックスをタイル状に配置する

こちらも練習サイトあります。

GRID GARDEN(日本語版)

アオキ

『Flexbox』と『Grid』どちらを使うかというのは議論あるようです。(個人的にはGrid派)

これからのレイアウトはGrid Layoutで決まり？特徴で使い分けたいCSSレイアウト手法

CSSの書き方ベンダープレフィックス

インターネットエクスプローラーやグーグルクロムなどブラウザによって挙動が違う場合があるので、

識別子をつけてそれぞれの動きを指定することができます。

識別子

-ms- ・・ Internet Explorer
-webkit- ・・Google Chrome, Safari
-moz- ・・Firefox
-o- ・・ Opera

使用例

.sample{
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

ブラウザごとの対応状況がわかるサイトもあります。

Can I use