Sassメモ:if文で分岐 Sass記法内ではif文を使うことができます。 $value: false; .box { @if $value { margin: 0; } @else { margin: 10px; } } 上記の場合、CSSでは下… ゴトーハック2014.02.18 817
Sassメモ:ネストの中で親要素セレクタを含める .box { background-color:#ccc; .child { color:#09c; } .parent & { margin:10px 0; } } 上記の「.parent &」のように… ゴトーハック2014.02.17 1,657
Sassメモ:&でセレクタ連結 a { color:#09c; } a:hover { color:#069; } a:visited { color:#036; } a.btn { background:#09c; color:#fff; } こんな… ゴトーハック2014.02.14 777
Googleマップにアイコンを埋め込んで表示する http://aimluck.com/company/access.html弊社サイトでもやっている方法です。 まずHTML側はこちら。 <script src="map.js"><… ゴトーハック2014.02.13 1,429
CSS3:before、afterセレクタとcontent beforeとafterセレクタは、その名の通り設定した要素の前後にスタイルを定義するセレクタです。 表示サンプルはこちら。http://jsdo.it/goto_jp/iHdW サンプルのHTML <p clas… ゴトーハック2014.02.12 299
WordPressをコンソールで直接ダウンロードして展開 最近個人的にVPSを使ってると、zipをいちいちダウンロードして上げ直すという方法を取らなくなりました。TeraTermなどコンソールで繋げて下記のコマンドを打ちます。 cd /var/www/html wget htt… ゴトーハック2014.02.10 305
CSS3:CSSだけでアコーディオンメニュー 表示サンプルはこちら。http://jsdo.it/goto_jp/pdzy リストリンクをメニューにしてますが、開閉させるだけなら実はCSS3は必要ありません。 ポイントとしては下記のようにサブメニューの<li&… ゴトーハック2014.02.07 1,429
CSS3:フキダシを作る まず表示サンプルはこちら。http://jsdo.it/goto_jp/awLv HTMLは下記のようにごくシンプルに。 <div class="fukidashi">ふきだしです。<… ゴトーハック2014.02.06 248
CSS3:矢印をつくる まず表示サンプルはこちら。http://jsdo.it/goto_jp/d6t7 下記のただのdivがあるとします。 <div class="arrow"></div> 下記C… ゴトーハック2014.02.05 303