staffCSSの擬似要素である、beforeとafterについて解説します。それぞれ指定した場所の前後に文字や画像を入れることができ、どちらも使い方は下記の通りです。url("img/test.png");}これでp要素の前に文字を、後ろに画像をつけることができます。contentプロパティは文字や画像、URLを指定することができますが、contentで指定したものは選択したりコピー&ペーストをすることはできません。そのため、文章として扱う場合はHTML内に直接記述する必要があります。clearfixについてclearfixとはclearプロパティを使わずにfloatを解除する手段です。始めてclearfixが使われたのは2004年ですが、現在では当時に比べより簡潔な記述でclearfixを使うことができるようになっています。HTMLにクラスclearfixを指定してafterを使うことによって全てのclearfixにまとめてfloatを解除させることができます。block;}さらに、afterを使いあらかじめfloatする要素の親要素になる要素に対してclearfixを設定しておくことができます。both;}例えばこのようにdivとulにあらかじめ設定しておくことで記述がスマートになる、clearfixの入れ忘れの防止などのメリットがあります。staffメインコンテンツの要素ページ内の主となるコンテンツを明確にできる要素として、main,article,sectionの3つの要素が追加されました。<main></main>はページ内で1度のみ使用できる要素で、ページの主要であることを明示するための要素です。<article></article>は、独立した一つのコンテンツを表すことができる要素です。一覧など複数のコンテンツをまとめるためには使用できず、ニュースやブログの記事などに使用することが多いです。<section></section>は文章の構造を表すための最も基本となる要素です。本来h1はページ内で1度しか使用することはできませんが、sectionは章や節を表すので中には必ず見出しの要素が必要になります。articleと違い、複数のコンテンツをまとめるために使うことができます。サブコンテンツの要素ページ内の主要ではないコンテンツを明確にできる要素として、header,footer.nav,asideの4つの要素が追加されました。<header></header>は、ページやセクションのヘッダーを表すことができる要素です。サイトの内容によってはタイトルやサイトロゴ、記事の見出しなど同じページ内でも複数使用することができますが、header要素の中にさらにheaderやfooterを入れることはできません。<footer></footer>は、ページやセクションのフッターを表すことができる要素です。headerと同じく同一ページ内でも複数使用可能ですが、headerの中やfooterの中に更にfooterを入れることはできません。<nav></nav>はサイト、ページ内の主要なナビゲーションに使用する要素です。全てのリンクグループに使うのではなく、主要ではないナビゲーションに関しては他の要素で補います。<aside></aside>はメインとなるコンテンツと関連性の薄いコンテンツを表すことができる要素です。サイドバーや広告、補足記事などに使用する場合が多いようです。<figure></figure>は画像や図面などをマークアップするための要素です。figure自体には意味はなく、必ず使用しなければいけないわけでもありません。<figcaption></figcaption>はfigure要素の最初もしくは最後の子要素として使用でき、figure要素のキャプションを表すことができます。<mark></mark>は文書内のテキストをハイライトして目立たせることができる要素です。<summary></summary>は親要素となるdetailsの要素内容の要約・キャプション・説明を表すことができる要素です。<time></time>は日付や時刻を正確に示すことができる要素です。staffflexboxは複雑なウェブページやウェブアプリを製作するにあたりとても便利なレイアウトモジュールです。flexboxを使用するにはflexコンテナーが不可欠であり、CSSで[display:flex]と指定すれば要素をflexコンテナーとして扱うことができるようになります。flexコンテナーの子要素のことをflexアイテムと言いますが、flexコンテナーの子要素であれば自動的にflexアイテムとして扱われるので特別に指定する必要はありません。ブロック要素のflexコンテナーを作成する。インライン要素のflexコンテナーを作成する。flexアイテムがflexコンテナー内で『どの方向に向かって並ぶか』ということを指定します。flexコンテナーに入りきらないflexアイテムを、『そのまま一行で表示するか、折り返して複数行にするか』を指定します。flex-direction、flex-wrapの値をまとめて指定することができます。flex-flow:【flex-directionの値】【flex-wrapの値】;という形で指定します。指定した要素の大きさの比率を伸長させることができます。flex-grow:の形で数字を指定します。以下の例の場合、指定した要素とその他の要素の大きさの割合は3:1:1となる。指定した要素の大きさの比率を縮小させることができます。flex-shrinkはflex-wrap:nowrapと同時に使用しないと効果がありません。負の値は指定できません。以下の例の場合、指定した要素とその他の要素の大きさの割合は1:3:3となる。横幅、縦幅の比率を固定できます。flex-directionがrow、row-reverseのときは横幅を、column、column-reverseのときは縦幅を固定します。値として指定できるのは数値もしくは初期値であるautoのみで、負の値は指定することができません。flex-grow、flex-shrink、flex-basisの値をまとめて指定することができます。flex:【flex-growプロパティの値】【flex-shrinkプロパティの値】【flex-basisプロパティの値】;という形で指定します。現時点では、日本で最も使用率の高いIE11(約15%)に対応できていないため、日本人向けのサイトを作成するためにflexboxを使うのは非推奨です。今後IEへの対応やその他の不都合も改善されていくと思われるので、もうしばらく様子を見るのが良いでしょう。staff擬似クラスとは、特定の状態にある要素に対してスタイルを適用させるものです。多くの種類がありますが、基本的な6つを紹介していきます。親要素の一番最初の直下の要素にのみにスタイルを適用させることができます。親要素の一番最後の直下の要素にのみにスタイルを適用させることができます。親要素の一番最初の要素にのみにスタイルを適用させることができます。直下に<h3>があるため:first-childでは</h3>要素にスタイルを適用させることができませんが、first-of-typeは親要素の中にある中で一番最初の要素が対象なのでこのような場合でも要素にスタイルを適用させることができます。親要素の一番最後の要素にのみにスタイルを適用させることができます。子要素として先頭から()番目の要素のみにスタイルを適用させことができます。要素は対象となりません</p></div>()の中身を2nにすれば2の倍数(偶数)の全ての要素にスタイルを適用させることもでき、同様に2n+1なら奇数の全ての要素にスタイルを適用させることができます。子要素として指定した要素の先頭から()番目の要素のみにスタイルを適用させることができます。staffセレクタとはスタイルを適用する対象を指定するための記号です。たくさんの種類がありますが、基本的なものをいくつか解説していきます。*を記述して全てのスタイルに適用するさせることができます。.を記述してクラス属性によって指定したクラスにのみスタイルを適用させることができます。#を記述してID属性によって指定したクラスのみスタイルを適用させることができます。セレクタどうしを半角スペースで区切ることで要素の中の要素のみスタイルを適用させることができます。セレクタどうしを>で区切ることで要素の直下にある要素のみスタイルを適用させることができます。セレクタどうしを+で区切ることで同じ階層にある要素どうしで、要素の直後に隣接している要素にスタイルを適用させることができます。セレクタどうしを~で区切ることで要素の後ろにある要素にスタイルを適用させることができます。要素名[属性名]の形にすることでその属性を持つ指定要素のみスタイルを適用させることができます。要素名のみでスタイルを適用させることができますが、同名の全ての要素にスタイルが適用してしまいます。staffSASS,LESS,PostCSSの3つの言語それぞれのメリットデメリット、使い方をまとめます。ネスト、ミックスイン、外部ファイルの読み込み、複数のCSS定義の結合などができる点が便利です。SASS自体はCSSとは異なる文法・記法で定義されていたが、現在はCSSの文法に上記の機能を取り入れたSCSSという言語を利用できるようになったため、通常のCSSと同じ遜色のない上位互換として認識されている。デメリットとしては、導入に少し手間がかかる程度で、始めにほんの少しの手間をかければその後の作業が楽になると考えれば些細なことではないでしょうか。LESSメリットはSASSとほとんど同じで、変数やネスト、算術演算が使えます。SASSとの違いは、SASSがRubyをベースにしているのに対して、LESSはJavscriptをベースにしている点です。そのため最初はSASSよりもLESSの方が主流でしたが、SCSSの登場で使いやすさに差はなくなり、より豊富な機能を持つSASSへと人気は移っていきました。$red;}変数とは何かを入れる箱のようなもので、CSSでは変数を作る、変数に入れる、変数を参照する、の3つを行うことができます。上の例では、変数redを作り、その変数redに#cc0432を入れて、参照しています。変数においてのSassとLessの違いは$と@の差だけです。}}ネストとは入れ子構造とも言われており、同じクラス名のついているものをまとめることができます。ネストはSass、Less共に同じ書き方になっていて違いはありません。CSSに変換後は以下のようになります。5);}四則演算も同様にSassとLessでの違いはありません。ミックスインは定義と読み込みの2つを行うことができ、一度定義したスタイルを同ファイル中に何度も読み込むことができます。つける必要がありますがLessの方には必要ないという違いがあります。PostCSSPostCssは多数のプラグインをインストールすることでSassやLessと同じように使えます。@importしたファイルを展開するプラグインです。下記で紹介するプラグインでエラーを起こさないためにもあらかじめインストールしておく必要があります。ScssやLessのように変数を使えるようになるプラグインで、文法もほとんど同じです。こちらもScssやLessと同じようにネストを使えるようになるプラグインです。ミックスインのプラグイン。font-size:5px;}PostCssは既存のツールと比べてパフォーマンスが非常にたかく、今後はSASSからPostCSSへと移っていく可能性が高いとみられているようです。[日本語版解説]書籍概要デザインのプロではない人、本格的には学習する時間がない人のために書かれた本。コントラストについて、パッケージ、パンフレット、広告、ウェブ等のデザインへの応用までカバーされている。悪い例と良い例を見比べて、なぜこちらの方が良いのかという解説の繰り返しなためとても分かりやすいが、中級者や、デザインの知識がすでにある人には解説がくどく感じた。初心者向けの基本を学習するコンセプトと考えれば適切。おもしろいと感じた部分はデザインを学ぶことと人生を密接に関連付けていることで、知識を得るまでは気にも留めなかったようなことも、一度理解してしまえば意識してコントロールできるようになる、という言葉がとても印象的でした。デザインは全ての要素において意識的でなければならないと書かれていましたが、なんとなく過ごしているだけではパッとしない日々の繰り返しだと考えれば、デザインと人生を同様に考えることも大袈裟ではないように感じます。