HTML&CSS

Sassの演算と関数 〜Sass(5)

演算 Sassでは四則演算を行うことができます。それぞれ次の記号を使います。 加算 + 減算 - 乗算 * 除算 / 除算だけは計算式を丸括弧()で囲みます。fontプロパティで使用する記号がバッティングするための処置のようです。 Sassのコード [sass] .section1{ width:3  >>続きを読む

Sassの@import 〜Sass(4)

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

Sassの変数 〜Sass(3)

Sassでは変数を使用することができます。グローバル変数の仕様がSass v3.4から大きく変更されていますので注意してください。(この記事はSass 3.4.19で確認した内容です ) 変数の宣言は$の後に変数名を書き、コロン(:)の後に値を指定します。イコール(=)は非推奨なので使わないようにし  >>続きを読む

Sassのネスト 〜Sass(2)

子孫セレクタをSassで書くにはネストで記述します。最近のCSSの書き方として、深い階層の子孫セレクターを使用した記述は敬遠される傾向にあります。そのためネストの恩恵は子孫セレクターよりも後述するメディアクエリなどの方が価値があるかもしれません。 Sassのファイルはscssの拡張子にしてKoala  >>続きを読む

Sassの導入 〜Sass(1)

Sass(Syntactically Awesome Stylesheets)はCSSを拡張したメタ言語です。 機能を拡張してより効率的にCSSを書けるようにするものです。 具体的には、変数や関数をはじめ、演算、条件分岐、ループなどスクリプト的な機能が加わります。また、インポートしたファイルをCSS  >>続きを読む

Sublime Text3にColorPickerの導入

しばらくatomを使っていたのですが、起動時間が遅いので再びSublime Textに戻ってきました。 Sublime Text3にColorPickerを導入したのでその方法です。 atomはColorPickerのプラグインを入れると右クリックで簡単に呼び出せていたのですが、Sublime Te  >>続きを読む

疑似要素で下線を引く

テキストに下線を引く方法としては「text-decoration: underline」を使用しますが、装飾的な下線としては使い勝手が悪いです。そのため「border-bottom」を使用したりします。けれども、これも決して使い勝手の良いものではありません。 今回は疑似要素を使用して下線を引く方法で  >>続きを読む

text-indentで文字を非表示にする

h1要素などの背景にcssで画像を指定してh1のテキストを隠すための手法としてtext-indentが使われます。 かつて多く取られた方法は−9999pxの位置まで飛ばす方法でしたが、パフォーマンスの問題やサーチエンジン対策としてダークな部分が残るなどの問題がありました。 text-indent:   >>続きを読む

font-sizeにvwを使用して文字を画面サイズに応じて拡大縮小

ビューポートに応じた割合を指定できる単位vwは以前紹介しましたが、今回はvwをフォントサイズに設定して画面のサイズに応じて文字を拡大縮小する方法を解説します。 この方法の一番のメリットはスマートフォンを縦向き(ポートレイト)にしても横向き(ランドスケープ)にしても1行あたりの文字数が変わらないことで  >>続きを読む

CSSで計算する〜calc()

CSSの値を計算することができるcalc()ファンクションの紹介です。IE8は当然ダメで、それ以外はOpera Miniと一部Androidを除くと使えます。 使用可能なブラウザはこちらです。 CSSの幅や高さの計算やフォントサイズの計算にも使えます。 使用方法 四則演算をすることができます。 実例  >>続きを読む