カテゴリー

キーワード

 
> CSSに関する記事のまとめ 基...

CSSに関する記事のまとめ 基礎から応用、CSS3まで


2016 年 8 月 31 日 投稿    view: 1367
タグ:
このエントリーをはてなブックマークに追加

CSS総まとめ

こんにちは、WEBマーケティング部の杉尾です。

この記事では、弊社のCSSに関する過去記事をまとめています。

用途に合わせて各記事をご覧いただきやすくしていますので、是非参考にしてください。

 

CSSの基礎

まずは、こちらでCSSを使うにあたっての基礎を押さえましょう。

 

【CSS】CSSとは? カスケーディング・スタイル・シートって? CSSの基礎知識を紹介します

 

【CSS】CSSの書き方と外部スタイルシート設定方法を紹介します

 

【CSS3】 ベンダープレフィックスとは? (プロパティによっては不要)

 

【CSS3】2015年4月3日現在 よく使うCSS3プロパティのブラウザ対応状況と書き方

 

【CSS】margin paddingの違いと使い方を紹介
 

 

CSSのセレクタについて

CSSを使うに当たって、必ず習得しないといけないのが、セレクタです。

スタイル(装飾)を適用する対象を指定します。

 

【CSS】CSSのセレクタとは? 覚えておきたいセレクタ21選

 

【CSS】セレクタによるスタイルの優先順位
 

 

【CSS】CSS3で追加されたセレクタ 19選!!

 

【CSS】CSS3のセレクタとプロパティをIE8に対応させる方法

 

 

CSSの疑似クラス、疑似要素について

CSSを使うに当たって、知っておくと便利なのが、疑似クラスと疑似要素です。

 

どちらも知っておくと表現の幅が広がりますので、是非ご覧ください。

 

【CSS】CSSの擬似クラス(~CSS2.1)を紹介します
 

 

【CSS】CSSの擬似要素を紹介します

 

要素を横並びにしたいとき

ウェブサイトを作っていると必ず行き当たるのが、この問題です。

 

HTMLは基本的に上から順番に要素を書いていきますので、それがそのままウェブ上に反映されます。

その要素群を横に並べる必要があるときに、使える書き方です。

 

 

【CSS】CSSで要素を横並びにする4つの方法の概要を説明

 

【CSS】display:inline-block;で要素を横並びにする方法(前半はHTML5におけるボックスの話)

 

【CSS】display:table-cell;で要素を横並びにする方法

 

【CSS】floatとclearfixで要素を横並びにする方法を紹介します(前半はfloatの説明)

 

 

Flexbox関連

CSS3で登場したFlexboxは2016年8月現在、CSS3はCR(勧告候補)です。

この後、PR(勧告案)を経て、ようやく、REC(勧告)となります。(

 

CSS3

 

これを見ると、IE11は完全にサポートしているわけではありません。

下で紹介しているIE10に対応させる方法をご覧になりながら仕上がりをお確かめください。

 

WD「草案」⇒ LC「最終草案」⇒ CR「勧告候補」⇒ PR「勧告案」⇒ REC「勧告」の順番です。

 

【CSS】Flexbox(フレキシブルボックスレイアウト)で要素を横並びにする方法

 

【CSS】Flexboxのプロパティ(flex-direction、flex-wrap、flex-flow、order)を紹介します

 

【CSS】Flexboxのプロパティ(flex-grow、flex-shrink、flex-basis、flex)を紹介します

 

【CSS】Flexboxのプロパティ(justify-content、align-items、align-self、align-content)を紹介します

 

FlexboxのIE10、Safari、iOS Safariへの対応【総論】

 

Flexboxの書き方 IE10、Safari、iOS Safari、Androidブラウザへの対応【実践編1】を紹介します【2015年4月現在】

 

Flexboxの書き方 IE10、Safari、iOS Safari、Androidブラウザへの対応【実践編2】を紹介します【2015年4月現在】

 

 

 

PC、タブレット、スマホでそれぞれの見た目を変えたいとき(レスポンシブデザイン)

CSS3のメディアクエリを使ったレスポンシブデザインは、Googleも推奨しています。

 

CSS3 メディアクエリ

 

既に、REC(勧告)されていて、各主要ブラウザもサポートしていますから、これからはどんどん使えますね。

IE11では入れ子構造のメディアクエリが使えませんが、普通に書けば問題ないようです。

是非、下記を参考にしてください。

 

メディアクエリ

 

【CSS】CSS3 のメディアクエリをざっと紹介します IE8の対応法もアリ

 

ブレイクポイント

 

【CSS】適切なブレイクポイントを考えてみる(レスポンシブデザイン用)

 

 

端末の横幅について

 

【CSS】スマホ、タブレットの横幅(端末解像度と実質解像度)

 

 

知っておくと便利なCSSの書き方

 

background-sizeプロパティは、CSS3からのものですが、IE11にも対応しています。

 

CSS background-size 利用可能状況

 

IE8の日本国内シェアは、2016年5~7月期で0.73%ですので、もはや気にしなくてよいと思います。

 

statcounter 2016年5~7月期 日本国内ブラウザシェア

 

【CSS3】background-sizeプロパティを紹介します

 

【CSS3】background-size:cover;で背景全面を画像にする方法(IE8対応)

 

また、word-breakプロパティに関しても、まだWD(草案)の段階ですが、Opera Miniさえ気にしなければ使えるようになっています。

 

 

CSS3 word-breakプロパティ ブラウザサポート状況

 

【CSS3】word-wrap:break-wordとword-break:break-allの違いを説明します

 

【css3】cssのbox-sizingプロパティ、box-sizing:border-box;を紹介します

 

CSS3でアニメーションを動かしたい

 

CSS3で見た目上、最も大きく変わったと言えるのが、このアニメーションが導入されたことです。

 

それまではJaveScriptに頼るしかなかった箇所も、アニメーションを使うことで複雑なスクリプトを組まなくても動きが出せるようになりました。

 

滑らかに変化させる(要素に簡単な動きをさせる)

transitionはまだWD(草稿)の段階ですが、ほとんどの主要ブラウザがサポートしています。

 

CSS3 transitionプロパティ ブラウザサポート状況

 

【CSS3】CSSで動きが出せるtransitionプロパティの概要を紹介します

 

【CSS3】CSSで動きが出せるtransitionプロパティの解説、実践編

 

ページ表示後に即可動

 

animationもほとんどの主要ブラウザがサポートしていますので、使いやすくなっています。

 

CSS animation ブラウザサポート状況

 

【CSS3】CSSのanimationで画面に動きを出そう①【概要説明】

 

【CSS3】CSSのanimationで画面に動きを出そう②【概要説明】

 

要素を変形(移動・拡大・回転・傾斜・遠近)させたい

 

下の画像はTransformsの3Dについてですが、Safariにおいて、backface-visibilityプロパティに関連する場合のみベンダープレフィックスが必要なようです。

2Dに関しては、Opera Mini以外は主要ブラウザで使えるようになっています。(IE8は不可)

 

CSS3 transform ブラウザサポート状況

 

【CSS3】CSSのtransformの値を4つ紹介【scale、translate、rotate、skew】

 

【CSS3】transformプロパティの値、matrix()とmatrix3d()を紹介します

 

【CSS3】perspectiveプロパティ、transform:perspective()を紹介します

 

 


追加記事がありましたら、また紹介します。

 

杉尾成行 顔写真

この記事を書いた人

杉尾成行

株式会社SceneLive Webマーケティング部長

ウェブマーケティングコンサルタントとして、クライアントのウェブ集客をサポートしている。
また、ウェブ制作、システム制作にも携わり、数々のサイトを手掛けている。
当ホームページ、ブログシステムも制作。

前職:ライター、小説家

ウェブマーケティングコンサルタントとしてのブログ
ウェブ参謀

個人ブログ(オリジナル小説他) ⇒ 35deFA

 


カテゴリー

タグ
この記事が気に入りましたら、是非、他の方にもシェアしてください。
このエントリーをはてなブックマークに追加
関連記事