Githubでウェブページを公開する。 このたび習作的にごく簡単なCSSフレームワークを作ってGithub上で公開しました。これまでシコシコとアイコン単品を作ってたのは数をまとめて公開したいという狙いがありました。 LoadingIcon Githubでウェブ… ゴトーハック2014.04.03 295
Sassの@extendでclearfixを使いまわす CSSで多用される、レイヤー内でのfloat解除するためのclearfixですが、通常だと下記のようにレイヤーごとにclearfixクラスを付与させるケースが多いと思います。 <div class="bo… ゴトーハック2014.04.03 2,229
Sassを使ってCSSクラスをバージョン分けする HTMLには手を入れずCSSだけでデザイン変更を行う場合、対象のCSSクラスを編集することになりますが、Sassで記述することで作業効率が上がるのでその方法を紹介します。 たとえば既存のCSSを下記とします。 .navi… ゴトーハック2014.04.02 259
Compass(Sass)で特定種類の要素を一括スタイル指定する Compassの「elements-of-type」関数を利用することで、ブロック要素、インライン要素といった特定種類のHTMLタグを一括してスタイル指定することができます。 Sass記述 #{elements-of-t… ゴトーハック2014.04.02 644
Compass(Sass)で見出しタグを一括スタイル指定する Compassにはh1~h6の見出し用タグを一括して処理する関数があります。 Sass記述 #{headings()} { display: inline-block; } #{headings(4)} { //h1から… ゴトーハック2014.04.01 2,784
CSSとFontAwesomeだけでチェックボックス・ラジオボタンをデザインする 表示サンプルはこちらhttp://jsdo.it/goto_jp/o1XT OSやブラウザ、PC/スマホで何かと表示に差異があり扱いの面倒なチェックボックス・ラジオボタンをWebFontのメジャーどころ「FontAwes… ゴトーハック2014.04.01 2,544
Compass(sass)でリセットCSSを楽に書く ブラウザ標準のスタイルをリセットするためのCSSをCompassで一発で出力することができます。 Sass記述 1行書くだけです。 @include global-reset; 出力CSS 下記CSSがドバッと出力され一… ゴトーハック2014.03.31 2,853
CSS3の新プロパティ「columns」 名前の通りカラム分けを行ってくれるCSSプロパティです。ベンダープレフィックス付きで下記のように記述します。 .columnBox { -webkit-columns: 100px 3; -moz-columns: 10… ゴトーハック2014.03.31 366
Compass(sass)でCSSグラデーションを楽に書く CSS3のグラデーションはブラウザごとの表示仕様が異なり、ベンダープレフィックスの付与が結構面倒です。Compassで用意されている標準mixinを使うことで一括で出力できます。 Sassの記述は下記になります。 $re… ゴトーハック2014.03.28 735