HTML&CSS

SVGとは SVG(Scalable Vector Graphics)とはベクター形式で描画することができる画像形式です。一般的な画像はラスタ形式のもので拡大すると画像が劣化しますが、SVGはベクター形式ですから劣化しない特徴があります。...

2015年には主力ブラウザでは縦書きに対応してきています。縦書きの需要も高くなることが考えられます。まだまだ細かいところでは課題が多いですが、基本的な事はマスターしておきましょう。 横書きを縦書きに変更するCSS3プロパティ「writ...

2015年ではレスポンシブサイトに対応させるために無駄にサイズの大きい画像を用意していました。 それぞれのデバイスの画面幅サイズで画像を切り分けられると都合がよくなります。そのような要望に対応した画像表示の仕組みがレスポンシブイメージです...

Flexboxを使うとfloatでの面倒なレイアウト作成から解放されます。概ねのブラウザも対応していますし、問題のIE8以下のバージョンも急速にその終焉を迎えました。Flexboxレイアウトを積極的に採用する時が来たように思います。 Fl...

CSSを使ってカラムを作成する復習です。 自分なりにいろいろなカラムを作るパターンを作成しておくとよいです。 フロートを使った固定レイアウトのカラム 固定レイアウトのカラムはPC用のレイアウトでかつて多く使用されたパターンです。幅...

CompassはSassを利用したCSSフレームワークです。導入はちょっと面倒ですが、うまく導入できるとCSSがすごく楽に書けるようになります。 Compassでできることは、ベンダープレフィックスなどの複雑なCSSを簡単に記述できた...

Sassのミックスインは関数的な働きをするもので、引数で指定した値を利用しながらスタイルを柔軟に定義できます。 ミックスインは「@mixin」で定義をして、「@include」で呼び出しをします。 ミックスインの書き方 @mi...

演算 Sassでは四則演算を行うことができます。それぞれ次の記号を使います。 加算　+ 減算　- 乗算　* 除算　/ 除算だけは計算式を丸括弧（）で囲みます。fontプロパティで使用する記号がバッティングするための処置のようです...

SassではCSSと同様に複数のscssファイルを@importを使ってインポートすることができます。 更に便利な機能としてパーシャルという機能があります。これは複数のscssファイルをインポートして、余計なCSSを作成せずに、ひとつのC...

Sassでは変数を使用することができます。グローバル変数の仕様がSass v3.4から大きく変更されていますので注意してください。(この記事はSass 3.4.19で確認した内容です ) 変数の宣言は$の後に変数名を書き、コロン（：）の後...