icomoonからお好みのアイコンをCSSでwebフォント登録して気軽にデザインパーツとして利用できる。いままで、UI(ユーザーインターフェイス)で使用するデザインパーツをillustratorやphotoshopでイチイチ作成して た行程がだいぶ楽になる。 まずはicomoonから…

IEでCSS3の装飾を有効化に 古いバージョンのInternetExplore(Ver.6~9)だと通常ボックスシャドウや グラデーションなどの描写装飾が効かないがPIE.htc を導入することで、古いバージョンのInternetExploreでもCSS3の一部の描写が再現できる。アニメーションの…

CSSアニメーションに関するプロパティ、transitionとanimationで jQueryやFlashなどを用いずにアニメーション表現が可能。 transitionとanimationの違い transitionは元の状態(デフォルト)から指定の状態まで遷移し、指定の状態になる条件が解除されると逆再…

transitionでアニメーションを transitionはjQueryなどを使用せずCSS3のみで簡単なアニメーションを施す機能である。 transitionのプロパティ transitionのプロパティの記述方法は transition:transition-property␣transition-duration␣transition-timing-fu…

floatを使用せず,table,tdのように簡単に横並びできる display:table。 主な設定は親要素にdisplay:table。 子要素にdisplay:table-cellを付与する。 html <section id="first"> <h2>display:table <span>-floatを使わない横並び-</span></h2> <ul> <li>chapter01</li> <li>chapter02</li> <li>chapter03</li> </ul> <p>子要素の&lt;li&gt;にdis</p></section>…

vertical-alignプロパティは行の中のテキストや画像の位置を指定します。 webだけでなくDTPにおいても知って損のない、綺麗な文章を組むのに必要な知識なので覚書します。 値の主な位置 (1)行の高さはline-hight。 そこから,topとbottomが決められます。 (2)…

emは親要素のフォントサイズを参照する。 一方、remはroot(根っこ、最も祖先の親)要素を参照にしている。 html <section> <p id="em">16x1.5=24px</p> <section> <p id="em">14(直近の親要素サイズを参照)x1.5=21px</p> <p id="rem">16(root要素サイズを参照)x1.5=24px</p> </section> </p> </section> scss section{ font-size: 16px; p#em{font-size:…

visibility: hidden;...見た目は消えるが要素の描画領域は残る。空白スペースが残っているような物。 display: none;........見た目は消えるし、描画領域も無くなる。 html <ol> <li id="v-h">visibility: hidden</li> <li id="d-n">display: none;</li> <li>テスト</li> </ol> CSSなしの出力 visibility: hidden di…

Scssでは自分でどのプロパティを組み込むかを設定・定義しておかないと使い回しができません。 Compassでは最初から定義されたモジュールをインポートすることでお手軽にCSSを書き込むことが出来ます。 Compassの主なモジュール 大まかにわけてCompassには5…

Compassを使用するにあたり下準備を。 コマントプロントでインストール コマンドプロントを開いてcompassをインストール(環境はmacです) sudo install compass インストールが完成したかどうかをバージョン情報で確認。 compass -v アップデートをする場合も…

まずは即席のメニューバーを作成。 HTML <nav> <ul> <li><a href="#" class="Menu01"><span>Menu01</span></a></li> <li><a href="#" class="Menu02"><span>Menu02</span></a></li> <li><a href="#" class="Menu03"><span>Menu03</span></a></li> <li><a href="#" class="Menu04"><span>Menu04</span></a></li> <li></li></ul></nav>

リストなどのセレクタ名にli class="menu01" という風にナンバリングをつけてそこに配置する画像に../img/list_img01.jpgと同じナンバリング同士を設定するなど scss %markBase{ padding:0 15px; background-repeat: no-repeat; } @for $i from 1 through 3{…

ボックスサイズを指定するキープロパティは height(高さ) widht(横幅) padding(内部余白) margin(外部余白) ですが、ミックスインで複数の引数を指定すれば記述は楽になりますが、 この4つをその都度全て書き込んでしまうため、結果的にコードが重くなってし…

メニューバーのロールオーバー時のバーの画像変更はCSSスプライトか opacityで透過度に変化を付けているパターンがあります。 後者の場合はIE6~8がopacityに非対応なので代わりにflterプロパティを使用します。 ただし、この2つのプロパティはそれぞれ透過度…

例えば"border-radius: 10px;"などのペンダープレフィックスが必要なスタイルを書く際に emmetなどのコーディング補助機能などを使えば必要なペンダープレフィックスは自動的に書き足してくれます。 ただ一部のCSS3プロパティで例えば"display:box"などはemm…

過去に作成したcssファイルなどを改めてscssで書き直すのは面倒... でもcssからscssにコンパイルしてくれるネットサービスがあります。 css2Sass http://css2sass.heroku.com/ 上段テキストフォームにcssコードをコピペして covert 2 scssボタンをクリックす…

Sass自体はcssの管理と記述を効率よくできるものですが、簡単なデザインや よほど凝ったものでない限り通常のCSSで十分だと思います。 特に全体で5ページ程度のサイトぐらいでしたらSassを絶対に使わなければならない必要性は あまりないと思います。 情報量…

#{}(インターポレーション)とは変数が参照できない箇所に記述されても 使うことができる機能です。主に画像のイメージパスなどに使われます。 sass $img_path : '../img/bgimage'; section{ background: url(#{$img_path}.jpg); } css(コンパイル後) section…

前回のカラーコードの操作と比べるとエクセル関数と使い方が似ているのでこちらの方が とっつきやすいです。 abs() 数値の絶対値(0からどれくらい離れているか)を出力します。 sass $margin : -15px; section{ .main{ margin: $margin; } .sub{ margin: abs(…

Sassには6種類のデータタイプがある。 6種類の型 Number型(数値) 1,1.2,332,100px,3em,80rem,90%...など Color型(色) red,white,#FFF,#03A3G1,rgba(255,255,0,0.5)...など String型(文字列) 数値、色、true,false以外の文字と"(ダブルクォテーション)､’(シン…

rgba() RGBaプロパティはRGB各色に0~255の数値で指定して、最後に透明度を0~1で指定します。 このRGBの値は#FFFFFFのような16進数表記を使用するとエラーが起きます。 Sassではrgba()を使用することで 16進数表記を自動的にRGB各色に0~255の値を換算してくれ…

ここから先はJavaScriptやPHPなどある程度プログラムを習った人向きです。 Sassでプログラムを組んで何らかの条件一致があったときにそれにそったcssを書き込んだり、特定条件が適応してる間にスタイルシートの繰り返しを命令する制御構文です。 @ifを使って…

初期値から任意の値を直に入力するのではなく、変数$valueに複数の値を前もって入れておき それを可変長引数として受け取る。 sass @mixin box($width:100px,$height:100px){ width: $width; height: $height; } $value : 300px,200px; .mainContent{ @inclu…

@mixinの引数を使えば簡単にボックスサイズの変更が容易になりますが ”marginは初期値のままで、paddingは違う値を入れたい"などスタイルの一部のみ変えたい(第1引数は変えずに第2引数のみ数値を変えたい)という場合は注意が必要です。 まずはわかりやすく、…

Sassで一番使える機能として有名な@mixin(ミックスイン)。 スタイルの集まりを定義しており他の場所に呼び出して使うという点では @extendみたいですが、定義した@mixinのプロパティ値を変更して 使えるという意味では、@extendというよりもPHPなどのユーザ…

@extendでscssファイルをコンパイルすると 継承元のセレクタも自動的に記述されます。継承元のセレクタである#(シャープ)や.(ドット)の代わりに%(パーセント)を代わりに 入れるとコンパイル先のcssに継承元のセレクタが記述されませんので 用途によって変数…

同じルールセット内に複数の@extendを指定。 scss(継承元,_extend.scss) .first{ font-size: 36px; text-indent: 1em; span{ font-size: 80%; color: #666; } } .second{ font-size: 24px; text-indent: 0.7em; span{ font-size: 18px; color: #999; } } .ac…

@extendとは指定したセレクタのプロパティを継承できる機能です。 sass section.content{ width: 600px; height: 400px; padding: 20px 10px; border: 4px solid #472122; } section.side{ @extend .content; } cssコンパイル後 section.content, section.si…

Sassでもcssのように@importが使用できます。 cssのimportと違う点はSassにはパーシャルという機能があります。 Sassの@importルール 基本的にcssの@importと同じですが以下の場合はエラーが発生。 メディアタイプを指定。 screenやtvなどメディアタイプを指…

cssを書いているとwidthやheight、paddingにmarginなど寸法の計算が多々必要になります。 sassではプロパティに四則演算が書き込みができコンパイル後にその結果を出力できます。 sass //足し算 .addition{ width: 100px + 20; } //引き算 .subtraction{ hei…