ニュースパス
ニュースパス
CSSは現代のWebページ制作になくてはならないものです。
Web制作に関わる人であれば、誰でもそのスキルを磨いていきたいと思っているのではないでしょうか。
ただ、、JavaScriptなどのフレームワークに関しての情報はエンジニアの交流会などで頻繁にシェアされるものの、CSSについては新しい技術が出てこない限りやりとりされることは少ないのが現状です。
CSSは、主にWebの見た目に関わる技術なので、レベルを上げることはWebデザインの表現力にそのまま直結します。
今回は、CSSの技をもう1レベル上げるための7つのポイントをご紹介します。
marginやpaddingなど、ブラウザ間の表示誤差を修正する方法の一つに、CSSリセットと呼ばれる設定を行う方法があります。
通常、CSSリセットはnormalize.cssなど用意されているリセットライブラリを外部ファイルで読み込む必要がありますが、それを行わなくとも表現できる簡単な方法が存在します。
以下のコードでは、全ての要素のmarginとpaddingを削除して、ボックス高さや幅の算出方法を、ボーダー幅を含める形にしています。
＊ {
box-sizing: border-box;
margin: 0;
padding: 0;
}
(「＊」は実際には半角です)
Webサイト表示の主な原因のひとつは、意図しない余白の発生やボーダー幅の算出方法の違いによるピクセル単位のレイアウトのズレです。
上記のようなたった数行のコードで、どのブラウザでもほぼ同じようにレイアウトを行うことが可能になります。
Webデザインを行ったことがある人なら誰しもうなずいてくれると思いますが、テーブルを挿入したときに、列のコンテンツ量によって幅が自動調整され、かえって見た目が残念になってしまうことがあります。
何列あったとしても、コンテンツ量に左右されずに、テーブル幅を均等にするためには、どうすればよいのでしょうか。
答えは、次のようなコードを1行挿入するだけです。
.price-table {
table-layout: fixed;
}
table-layoutプロパティに指定できる値は、「auto」か「fixed」のどちらかですが、初期値では「auto」に設定されています。
コンテンツ量によって幅が変わってしまうのは、このためです。
しかし、table-layoutに「fixed」を指定すると、必要に応じて各列の幅をしていしますが、幅が指定されていない列には残りの幅が均等に割り振られます。
最近では、国産・海外製問わずさまざまな大きさのデバイスが登場してきたので、デバイスごとに最適なフォントサイズの指定を行うのに一苦労している人もいるかもしれません。
ユーザーエージェントによるフォントサイズの切り替えは特に大変です。
しかし、ウィンドウの横幅によって自動的にフォントサイズが調整できれば、たった数行で最適なフォントサイズを算出することができます。
方法としては、:rootにcalc関数を使ってviewport上のサイズからルートのフォントサイズを指定しておき、各要素をremを使って相対的に決めていきます。
:root {
font-size: calc( 1vw + 1vh + .5vmin );
}
ルートが決まれば、各要素はremを使ってルートに対して相対的な文字の大きさを指定します。
body {
font: 1rem/1.4 sans-serif;
}
これだけで、デバイスの大きさを気にすることなく、バランスのよい方法で文字サイズを算出することができます。
ロボットふくろうセレクタとは、ある最初の要素の隣接要素すべてにあるプルパティを設定することができるパワフルなセレクタの総称です。
ロボットふくろう(Lobotomized Owl)とは、ユニバーサルセレクタ「＋」と兄弟セレクタ「＊」を使って「＊＋＊」というフクロウの顔のような形になることから、そう呼ばれているようです(実際は半角)。
a：ユニバーサルセレクタ1つの場合 b：ロボットふくろうセレクタの場合の処理 / 画像引用元：A List Apart
例えば、以下の例では、.wrap以下の要素の一番初め以外の要素に、margin-topを採用します。
＊ ＋ ＊{
margin-top: 1.5em;
}
(「＊」「＋」は実際には半角です)
たった数行でmarginを取ることができるので、かなり重宝するのではないでしょうか。
スマートフォンでは、viewportで拡大を許可していない場合に、ページの横幅がぴったりだったとしても、フォーム入力時にテキストエリアなどのインプット要素をタップすると意図しない拡大が発生してしまう場合があります。
しかし、Input要素などにfont-sizeを指定すれば、ブラウザが勝手に拡大表示されるのを防ぐことができます。
input, select, textarea {
font-size: 16px;
}
ここでは、selectタグのドロップダウンリストでも拡大されてしまう恐れがあるため、テキストエリア以外の要素も加えています。
ブログ記事のアイキャッチ画像や、画像にコピーライト表示をしたいときなどに便利なのが、Photoshopなどを使わずにCSS側で2枚の画像を合成するテクニックです。
-webkit-cross-fadeプロパティを使っていることからもわかるように、Webkit系のブラウザで作動します。
.mask-synth {
background: -webkit-cross-fade( url(pict1.png) ,url(pict2.png) , 50% );
background-size: cover;
}
100％に近づくにつれて、1枚目の画像の透過率が高くなります。
WordPressなどのCMSソフトウェアを使っていると、意図しないところでBRタグ(改行)が挟み込まれてしまうことがあります。
段落中に不用意に挿入されたBRタグを一発で消すには、以下のコードで解決します。
p br {
display: none;
}
言われてみれば簡単な方法かもしれませんが、「その手があったか！」と思いつくまでに時間がかかりますよね。
ぜひ便利なスニペットのストックに取り入れてみてください。
たった数行のシンプルなコードばかりですが、知っておくと非常に便利なコード*をご紹介しました。
実際のところ、CSSの実務レベルをあと少しだけ上げたいと思った時に、役に立つのは数行のコードというのはよくあることです。
ぜひこれらのTipsを活用して効率よくコーディングを行いましょう。
