on:2016年11月2日sponsorsWebデザイナーはデザインの知識やテクニックだけでなく、どのような実装テクニックがあり、何が実現可能なのか知っておくことで、さらに素晴らしいデザインを作りだすのに役立たせることができます。Webデザイナーにとって、CSSは難しく感じるかもしれません。全部を覚える必要はありません。デザインに関わるいくつかの有用なCSSのテクニックを紹介します。Materials下記は各ポイントを意訳したものです。※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。要素をページ上の特定の位置でコントロールさせたい場合は、まずは絶対位置に配置することを検討します。絶対位置で配置をおこなうと、その要素を正確に配置することが可能です。要素をどこに配置するかは、上・右・下・左をピクセル値で指定します。right:20px;123position:absolute;top:20px;right:20px;このスタイルシートでは、ブラウザの上端から20px、右端から20pxの位置に要素を配置します。親要素にstatic以外の値を指定している場合は、親要素が基準になり、例えばdiv要素の内側に絶対位置で配置することもできます。全称セレクタ(*)全称セレクタは特定のセレクタのすべての要素を選択することができます。p」と指定すると、p要素すべてを選択できます。p」のように目標を定めることも可能です。すべてのスタイルを上書きこれは慎重に使用してください。スタイルのすべてを上書きするからです。しても特定の要素に優先的にスタイルを与えたい場合のみ「!important」を使用します。特定のセクションのh2要素が通常はブルーで、その代わりにレッドにするというように限られた要素に適用するようにしましょう。左右の中央に配置センタリングのテクニックは、何を配置するかによってスタイルシートは異なります。テキストテキストの場合は「text-align:center;」を使い、左右の中央に配置できます。auto;」を使うことで、左右の中央に配置できます。100%未満の値;}幅を「100%未満の値」にしたのは、その要素が100%の幅なら中央に配置する必要がないためです。60%や550pxのように幅を指定してください。天地の中央に配置(テキストのナビに)これはテキストのナビゲーションでよく使うテクニックです。ポイントは、メニューの高さと同じ値を行の高さに指定することです。ホバーエフェクトホバーエフェクトはテキストリンクをはじめ、ボタン、アイコン、ブロック要素など、サイト内で多く利用されます。要素をホバーした際に、カラーを変化させるのは非常に簡単です。h2:hover{color:#f00;}このスタイルシートで、h2要素の見出しのテキストのカラーが、ブラックからレッドに変化します。サイズやウェイトを変化させる必要がない場合は、ホバー時のスタイルに指定しなくて大丈夫です。変化させるスタイルだけを指定します。アニメーションを加えるホバーした際に、急激にカラーを変更するのではなく、アニメーションで少しずつ変化させることもできます。ease;}これは0.3秒を使ってカラーをレッドに変化させます。カラーは少しずつ変化させた方が目に楽しいです。リンクのステータスこれらのスタイルは多くのデザイナーが見落としがちで、ビジターにユーザビリティの面で問題を起こします。:link疑似クラスはまだクリックされていないリンクで、:visited疑似クラスはすでにクリックされたリンクのコントロールです。これらのスタイルを定義することで、ビジターはサイト内のどこが未訪問で、どこが訪問済みか理解できます。あらゆるサイズの画像をフィットさせるある幅にあうように画像の大きさを調整することがあります。その時、個別にサイズを指定するのではなく、簡単な指定方法で画像を最適なサイズで配置することができます。{max-width:100%;height:auto;}このスタイルは画像の最大幅に基づいて100%で表示され、高さは自動的に計算されることを意味します。通常、上記のように画像を指定する時はセレクタを組み合わせます。img」のように指定します。ヘッダ内のロゴ、サイドバー内のアイコンなど、セレクタを組み合わせることでその要素を的確に指定できます。私が最初にCSSを使い始めたとき、これを知っていればよかったのにと思います。これは多くの時間を節約します。子要素を選択するために「>」を使用します。aこれは「#footer」の子要素にあるすべてのa要素を選択でき、スタイルできます。フッタに配置されている普通のテキストなど、他の要素は選択しません。テキストベースのナビゲーションにもよく使うテクニックです。子要素を特定して指定これはリストのスタイルで、間違いなく有用です。リストの特定のアイテムを指定して、スタイルを適用できます。blue;text-style:underline;}このスタイルは、リストで2番目のアイテムをターゲットにし、テキストのスタイルを指定しています。数式を利用することもでき、「2」を「2n」にすることですべての2番目、つまり偶数番目をターゲットにすることもできます。テーブルのセルをシマシマのカラーにする時に、よく使うテクニックです。複数のclass、セレクタをスタイル例えば、すべての画像とコンテンツとサイドバーに同じボーダーを適用したいとします。これは3回、同じCSSを書く必要はありません。各アイテムをコンマ「,」で区切って記述できます。box-sizing:border-box;これは多くのWebデザイナーの間でお気に入りです。パディングやレイアウトの問題を解決するからです。基本的に、ボックスに特定のサイズを指定して、パディングを加えると、そのパディングはボックスのサイズをその分増やします。「box-sizing:border-box;」を使用すると、それがなくなり、パディングを加えてもボックスのサイズは指定した値を保ちます。:before疑似要素このCSSは、特定の要素の前に内容を追加できるセレクタです。h2要素の前に特定のテキスト(Read:)を追加したい時には、下記のように記述します。#F00;}このテクニックは、アイコンフォントにも極めて有用です。特定の要素の前にアイコンを表示させることができます。:after疑似要素:before疑似要素のように、特定の要素の後に内容を追加することができるセレクタです。more」によく使われています。contentプロパティcontentプロパティは、コントロールできるようにしたい要素を挿入する必要がある場合に便利なCSSプロパティです。使用されるのは、特定の場所にアイコンフォントからアイコンを配置することです。上記のように、テキストを配置することもできます。Firefoxなど、異なるブラウザごとにデフォルトのCSSを持っており、それらをリセットするために不可欠なのがCSSリセットです。CSSリセットはCSSの出発点で、それらの異なるスタイルに一貫性を与え、実装のベースになる標準的なスタイルを定義します。ブラウザごとに異なるデフォルトのボーダー、マージン、パディング、行間などに一貫性を与えます。ドロップキャップドロップキャップは、英語圏のコンテンツを始める時の素晴らしい方法です。最初の文字を大きくすることで、ビジターの注意を得ます。CSSではこのドロップキャップを作る簡単な方法があり、:first-letter疑似要素を使用します。}1234567p:first-letter{display:block;float:left;margin:3px;color:#f00;font-size:300%;}「font-size:300%;」で文字の大きさを3倍にし、スペースを3px設け、カラーをレッドにしました。文字をすべて小文字、すべて大文字、最初だけ大文字に文字をすべて大文字で表示したい時に、すべての文字を大文字で入力するのはばかばかしいです。デザインが変わった時に、文字も入力し直す必要があるからです。すべて大文字に、すべて小文字に、最初だけ大文字にしたい時は、CSSでそのフォーマットを指定できます。ブラウザいっぱいにコンテンツを表示ブラウザいっぱいにコンテンツを表示したいことがあります。そんな時には単位に「vh」を使い、高さをコントロールすることができます。}今までは単位に「%」を使い、高さを「100%」と指定していたかもしれません。「%」で定義された要素のサイズは親要素に基づくため、親要素が高さに何らかの影響を受けている必要があります。これを実現するには、html要素を親要素として要素を配置するか、なんらかのハックをしなければできないでしょう。「vh」を使用すると簡単にできます。電話番号のリンクのスタイルビジターがスマホでリンクをタップしたときに、電話番号を呼び出すリンクがある場合は、よく使うリンクセレクタではスタイルできません。その代わりに下記のCSSを使用します。Posts関連記事が見つかりませんでした。