CSS擬似要素 before, afterの解説

CSSの擬似要素である、beforeとafterについて解説します。 それぞれ指定した場所の前後に文字や画像を入れることができ、どちらも使い方は下記の通りです。
要素名:before {
  プロパティ: 値;
}

要素名:after {
  プロパティ: 値;
}
 

before

<p>例文</p>
p:before {
      content: "ここに文字をいれる" ;
}
 

after

<p>例文</p>
p:after {
      content: url("img/test.png");
}
これでp要素の前に文字を、後ろに画像をつけることができます。 contentプロパティは文字や画像、URLを指定することができますが、contentで指定したものは選択したりコピー&ペーストをすることはできません。 そのため、文章として扱う場合はHTML内に直接記述する必要があります。  

clearfixについて

clearfixとはclearプロパティを使わずにfloatを解除する手段です。 始めてclearfixが使われたのは2004年ですが、現在では当時に比べより簡潔な記述でclearfixを使うことができるようになっています。 HTMLにクラスclearfixを指定してafterを使うことによって全てのclearfixにまとめてfloatを解除させることができます。
.clearfix:after {
    content: "";
    clear: both;
    display: block;
}
さらに、afterを使いあらかじめfloatする要素の親要素になる要素に対してclearfixを設定しておくことができます。
div:after,
ul:after {
    content: "";
    display: block;
    clear: both;
}
例えばこのようにdivとulにあらかじめ設定しておくことで記述がスマートになる、clearfixの入れ忘れの防止などのメリットがあります。  

HTML5で登場した新要素の解説

メインコンテンツの要素

ページ内の主となるコンテンツを明確にできる要素として、main,article,sectionの3つの要素が追加されました。 main <main></main>はページ内で1度のみ使用できる要素で、ページの主要であることを明示するための要素です。 article <article></article>は、独立した一つのコンテンツを表すことができる要素です。 一覧など複数のコンテンツをまとめるためには使用できず、ニュースやブログの記事などに使用することが多いです。 section <section></section>は文章の構造を表すための最も基本となる要素です。 本来h1はページ内で1度しか使用することはできませんが、sectionは章や節を表すので中には必ず見出しの要素が必要になります。 articleと違い、複数のコンテンツをまとめるために使うことができます。  

サブコンテンツの要素

ページ内の主要ではないコンテンツを明確にできる要素として、header,footer.nav,asideの4つの要素が追加されました。 header <header></header>は、ページやセクションのヘッダーを表すことができる要素です。 サイトの内容によってはタイトルやサイトロゴ、記事の見出しなど同じページ内でも複数使用することができますが、header要素の中にさらにheaderやfooterを入れることはできません。 footer <footer></footer>は、ページやセクションのフッターを表すことができる要素です。 headerと同じく同一ページ内でも複数使用可能ですが、headerの中やfooterの中に更にfooterを入れることはできません。 nav <nav></nav>はサイト、ページ内の主要なナビゲーションに使用する要素です。 全てのリンクグループに使うのではなく、主要ではないナビゲーションに関しては他の要素で補います。 aside <aside></aside>はメインとなるコンテンツと関連性の薄いコンテンツを表すことができる要素です。 サイドバーや広告、補足記事などに使用する場合が多いようです。  

その他の要素

figure <figure></figure>は画像や図面などをマークアップするための要素です。 figure自体には意味はなく、必ず使用しなければいけないわけでもありません。 figcaption <figcaption></figcaption>はfigure要素の最初もしくは最後の子要素として使用でき、figure要素のキャプションを表すことができます。 mark <mark></mark>は文書内のテキストをハイライトして目立たせることができる要素です。 details, summary <summary></summary>は親要素となるdetailsの要素内容の要約・キャプション・説明を表すことができる要素です。 time <time></time>は日付や時刻を正確に示すことができる要素です。

flexboxの解説

flexboxは複雑なウェブページやウェブアプリを製作するにあたりとても便利なレイアウトモジュールです。 flexboxを使用するにはflexコンテナーが不可欠であり、CSSで[display:flex]と指定すれば要素をflexコンテナーとして扱うことができるようになります。 またflexコンテナーの子要素のことをflexアイテムと言いますが、flexコンテナーの子要素であれば自動的にflexアイテムとして扱われるので特別に指定する必要はありません。

flexboxのプロパティ

  display:flex; ⇒ ブロック要素のflexコンテナーを作成する。   display:inline-flex; ⇒ インライン要素のflexコンテナーを作成する。   flex-direction ⇒ flexアイテムがflexコンテナー内で『どの方向に向かって並ぶか』ということを指定します。 flex-direction:row; ⇒ 左から右 flex-direction:row-reverse; ⇒ 右から左 flex-direction:column; ⇒上から下 flex-direction:column-reverse; ⇒ 下から上


<div class="flexbox">


<div class="item">
        1
    </div>




<div class="item">
        2
    </div>




<div class="item">
        3
    </div>


</div>


.item { 
  flex-direction: row;
}
  flex-wrap ⇒ flexコンテナーに入りきらないflexアイテムを、『そのまま一行で表示するか、折り返して複数行にするか』を指定します。 flex-wrap:nowrap; ⇒ 改行なし flex-wrap:wrap; ⇒ flexコンテナーに入るよう改行して表示(上から下) flex-wrap:wrap-reverse; ⇒ flexコンテナーに入るよう改行して表示(下から上)


<div class="flexbox">


<div class="item">
        1
    </div>




<div class="item">
        2
    </div>




<div class="item">
        3
    </div>


</div>


.item {
  flex-wrap: nowrap;
}
  flex-flow ⇒ flex-direction、flex-wrapの値をまとめて指定することができます。 flex-flow:【flex-directionの値】【flex-wrapの値】;という形で指定します。


<div class="flexbox">


<div class="item">
        1
    </div>




<div class="item">
        2
    </div>




<div class="item">
        3
    </div>


</div>


.item { 
 flex-flow: column-reverse wrap;            
}
  flex-grow ⇒ 指定した要素の大きさの比率を伸長させることができます。 flex-grow:の形で数字を指定します。 以下の例の場合、指定した要素とその他の要素の大きさの割合は3:1:1となる。


<div class="flexbox">


<div class="item">
        1
    </div>




<div class="item">
        2
    </div>




<div class="item">
        3
    </div>


</div>


.item:first-child { 
  flex-grow: 3;
}
  flex-shrink ⇒ 指定した要素の大きさの比率を縮小させることができます。 flex-shrinkはflex-wrap:nowrapと同時に使用しないと効果がありません。 また、負の値は指定できません。 以下の例の場合、指定した要素とその他の要素の大きさの割合は1:3:3となる。


<div class="flexbox">


<div class="item">
        1
    </div>




<div class="item">
        2
    </div>




<div class="item">
        3
    </div>


</div>


.item:first-child  { 
  flex-shrink: 3;
}
  flex-basis ⇒ 横幅、縦幅の比率を固定できます。 flex-directionがrow、row-reverseのときは横幅を、column、column-reverseのときは縦幅を固定します。 値として指定できるのは数値もしくは初期値であるautoのみで、負の値は指定することができません。


<div class="flexbox">


<div class="item">
        1
    </div>




<div class="item">
        2
    </div>




<div class="item">
        3
    </div>


</div>


.item:first-child{ 
  flex-basis: 30px;
}
  flex ⇒ flex-grow、flex-shrink、flex-basisの値をまとめて指定することができます。 flex:【flex-growプロパティの値】【flex-shrinkプロパティの値】【flex-basisプロパティの値】;という形で指定します。


<div class="flexbox">


<div class="item">
        1
    </div>




<div class="item">
        2
    </div>




<div class="item">
        3
    </div>


</div>


.item { 
  flex: 1 1 30px;
}
   

flexboxの現在のサポート状況

現時点では、日本で最も使用率の高いIE11(約15%)に対応できていないため、日本人向けのサイトを作成するためにflexboxを使うのは非推奨です。 今後IEへの対応やその他の不都合も改善されていくと思われるので、もうしばらく様子を見るのが良いでしょう。    

CSS3 擬似クラスの解説

擬似クラスとは、特定の状態にある要素に対してスタイルを適用させるものです。 多くの種類がありますが、基本的な6つを紹介していきます。   :first-child 親要素の一番最初の直下の要素にのみにスタイルを適用させることができます。
p:first-child {
    background-color: red;
}

<div>

<p>この p 要素の背景色は赤色になります</p>

<p>この p 要素は対象となりません</p>

<p>この p 要素は対象となりません</p>

</div>

  :last-child 親要素の一番最後の直下の要素にのみにスタイルを適用させることができます。
p:last-child {
    background-color: red;
}

<div>

<h3>この h3 要素は対象となりません</h3>

<p>この p 要素は対象となりません</p>

<p>この p 要素は対象となりません</p>

<p>この p 要素の背景色は赤色になります</p>

</div>

  :first-of-type 親要素の一番最初の要素にのみにスタイルを適用させることができます。
p:first-of-type {
    background-color: red;
}

<div>

<h3>この h3 要素は対象となりません</h3>

<p>この p 要素の背景色は赤色になります</p>

<p>この p 要素は対象となりません</p>

<p>この p 要素は対象となりません</p>

</div>

親要素である <div> の直下に<h3>があるため:first-childでは</h3>要素にスタイルを適用させることができませんが、first-of-typeは親要素の中にある中で一番最初の要素が対象なのでこのような場合でも要素にスタイルを適用させることができます。   :last-of-type 親要素の一番最後の要素にのみにスタイルを適用させることができます。
p:last-of-type {
    background-color: red;
}

<div>

<h3>この h3 要素は対象となりません</h3>

<p>この p 要素は対象となりません</p>

<p>この p 要素は対象となりません</p>

<p>この p 要素の背景色は赤色になります</p>

</div>

  :nth-child() 子要素として先頭から()番目の要素のみにスタイルを適用させことができます。
p:nth-child(2) {
    background-color: red;
}

<div>

<p>この p 要素は対象となりません</p>

<p>この p 要素の背景色は赤色になります</p>

<p>この p 要素は対象となりません</p>

</div>

()の中身を2nにすれば2の倍数(偶数)の全ての要素にスタイルを適用させることもでき、同様に2n+1なら奇数の全ての要素にスタイルを適用させることができます。   :nth-of-type() 子要素として指定した要素の先頭から()番目の要素のみにスタイルを適用させることができます。
p:nth-child(2) {
    background-color: red;
}

<div>

<h3>この h3 要素はカウントの対象となりません</h3>

<p>この p 要素は対象となりません</p>

<p>この p 要素の背景色は赤色になります</p>

<p>この p 要素は対象となりません</p>

</div>

   

CSSセレクタの解説

セレクタとはスタイルを適用する対象を指定するための記号です。 たくさんの種類がありますが、基本的なものをいくつか解説していきます。   1.ユニバーサルセレクタ *を記述して全てのスタイルに適用するさせることができます。
*{color:red;}
  2.クラスセレクタ .を記述してクラス属性によって指定したクラスにのみスタイルを適用させることができます。
.box{color:red;}
  3.IDセレクタ #を記述してID属性によって指定したクラスのみスタイルを適用させることができます。
#box{color:red;}
  4.子孫セレクタ セレクタどうしを半角スペースで区切ることで要素の中の要素のみスタイルを適用させることができます。
.box .test{color:red;}
  5.子セレクタ セレクタどうしを>で区切ることで要素の直下にある要素のみスタイルを適用させることができます。
.box > .test{color:red;}
  6.隣接セレクタ セレクタどうしを+で区切ることで同じ階層にある要素どうしで、要素の直後に隣接している要素にスタイルを適用させることができます。
.box + .test{color:red;}
  7.関接セレクタ セレクタどうしを~で区切ることで要素の後ろにある要素にスタイルを適用させることができます。
.box ~ test{color:red;}
  8.属性セレクタ 要素名[属性名]の形にすることでその属性を持つ指定要素のみスタイルを適用させることができます。
.box[type"test"]{color:red;}
  9.型セレクタ 要素名のみでスタイルを適用させることができますが、同名の全ての要素にスタイルが適用してしまいます。
h1{color:red;}
   

SASS,LESS,PostCSSの違いと使い方

SASS,LESS,PostCSSの3つの言語それぞれのメリットデメリット、使い方をまとめます。

SASS

SASSは現在最も主流とされており、通常のCSSと比較すると、変数、算術演算、ネスト、ミックスイン、外部ファイルの読み込み、複数のCSS定義の結合などができる点が便利です。 SASS自体はCSSとは異なる文法・記法で定義されていたが、現在はCSSの文法に上記の機能を取り入れたSCSSという言語を利用できるようになったため、通常のCSSと同じ遜色のない上位互換として認識されている。 デメリットとしては、導入に少し手間がかかる程度で、始めにほんの少しの手間をかければその後の作業が楽になると考えれば些細なことではないでしょうか。

LESS

メリットはSASSとほとんど同じで、変数やネスト、算術演算が使えます。 SASSとの違いは、SASSがRubyをベースにしているのに対して、LESSはJavscriptをベースにしている点です。 そのため最初はSASSよりもLESSの方が主流でしたが、SCSSの登場で使いやすさに差はなくなり、より豊富な機能を持つSASSへと人気は移っていきました。 変数 Sass
 $red: #cc0432;
 .main{
      color: $red;
}
 .btn{
     background-color: $red;
}
Less
 @red: #cc0432
 .main{
      color: @red;
}
 .btn{
     background-color: $red;
}
変数とは何かを入れる箱のようなもので、CSSでは変数を作る、変数に入れる、変数を参照する、の3つを行うことができます。 上の例では、変数redを作り、その変数redに#cc0432を入れて、参照しています。 変数においてのSassとLessの違いは$と@の差だけです。 ネスト Sass,Less
 .main {
     width: 200px;
     padding: 10px;
 
     .btn {
          background-color: #000;
     }
}
ネストとは入れ子構造とも言われており、同じクラス名のついているものをまとめることができます。 ネストはSass、Less共に同じ書き方になっていて違いはありません。 CSSに変換後は以下のようになります。
 .main {
     width: 200px;
     padding: 10px;
}
 
 .main .btn {
          background-color: #000;
}

四則演算 Sass,Less

.test1 {
	width: 500px + 50;
}

.test2 {
	width: 500px - 50;
}

.test3 {
	width: 500px * 5;
}

.test4 {
	width: (500px / 5);
}

四則演算も同様にSassとLessでの違いはありません。 ミックスイン Sass
@mixin inline_block($value: 3px)  {  
    display: inline-block;  
    *display: inline;  
    border-radius: $value;
}  
   
.sampleBox {  
    @include inline_block(5px);  
    background: #eee;  
}  
css変換後
.sampleBox {  
    display: inline-block;  
    *display: inline;  
    border-radius: 5px;
    background: #eee;  
}  
Less
.inline_block($value: 3px) {  
    display: inline-block;  
    *display: inline;  
    border-radius: $value;
}  
   
.sampleBox {  
    .inline_block(5px);  
    background: #eee;  
}  
css変換後
.sampleBox {  
    display: inline-block;  
    *display: inline;  
    border-radius: 5px;
    background: #eee;  
}  
ミックスインは定義と読み込みの2つを行うことができ、一度定義したスタイルを同ファイル中に何度も読み込むことができます。 Sassの方では頭に@mixin をつける必要がありますがLessの方には必要ないという違いがあります。

PostCSS

PostCssは多数のプラグインをインストールすることでSassやLessと同じように使えます。 【postcss-import】 @importしたファイルを展開するプラグインです。 下記で紹介するプラグインでエラーを起こさないためにもあらかじめインストールしておく必要があります。 【postcss-simple-vars】 ScssやLessのように変数を使えるようになるプラグインで、文法もほとんど同じです。
$blue:   #056ef0;
$column: 200px;

.menu_link {
    background: $blue;
    width: $column;
}
変換後
.menu_link {
    background: #056ef0;
    width: 200px;
}

postcss-nested】 こちらもScssやLessと同じようにネストを使えるようになるプラグインです。
.title {
    width: 500px;
    
    body.is_dark{
    color: white;
  }
}
変換後
.title {
    width: 500px;
}
.title body.is_dark{
    color: white;
}
postcss-mixins】 同じくミックスインのプラグイン。
@define-mixin icon $value: 3px { 
    color: blue;
    font-size: $value;
}    

.icon{
    @mixin icon 5px;
}
変換後
.icon {
    color: blue;
    font-size:5px;
}
  PostCssは既存のツールと比べてパフォーマンスが非常にたかく、今後はSASSからPostCSSへと移っていく可能性が高いとみられているようです。 公式リンク Sass http://sass-lang.com/ Less http://lesscss.org/ PostCss https://github.com/postcss/postcss

ノンデザイナーズ・デザインブック[第4版]

ノンデザイナーズ・デザインブック[第4版]

Robin Williams 著 吉川典秀 訳 小原 司、米谷テツヤ [日本語版解説] 9  

書籍概要

デザインのプロではない人、本格的には学習する時間がない人のために書かれた本。 4つのデザインの原則とされた、近接、整列、反復、コントラストについて、パッケージ、パンフレット、広告、ウェブ等のデザインへの応用までカバーされている。

近接

関連する項目をまとめてグループ化する

整列

ページ上の全てのものを意識的に配置する

反復

デザイン上の何かの特徴を作品全体をとおして繰り返す

コントラスト

読者の目をページに引き付けるために様々な要素にコントラストをつける  

感想

悪い例と良い例を見比べて、なぜこちらの方が良いのかという解説の繰り返しなためとても分かりやすいが、中級者や、デザインの知識がすでにある人には解説がくどく感じた。 ただし、初心者向けの基本を学習するコンセプトと考えれば適切。 特におもしろいと感じた部分はデザインを学ぶことと人生を密接に関連付けていることで、知識を得るまでは気にも留めなかったようなことも、一度理解してしまえば意識してコントロールできるようになる、という言葉がとても印象的でした。 デザインは全ての要素において意識的でなければならないと書かれていましたが、なんとなく過ごしているだけではパッとしない日々の繰り返しだと考えれば、デザインと人生を同様に考えることも大袈裟ではないように感じます。