かもメモ

自分の落ちた落とし穴に何度も落ちる人のメモ帳

CSS

Stylus ループ中に配列から値を取得する際に気をつけること

Stylusでループ中に配列から値をとってCSSを作ろうとした時にちょっとハマったのでメモ。 Stylusで配列から値をとって使う方法 // stylusの配列はの中にスペース区切りで書く colors = red blue yellow for i in (0..2) .font-color-{i} color: colors[i] 配…

Stylus プロパティの値に変数名を変数で指定したい。

タイトルからして超ニッチというか、意味がわからない感じですが、 例えばこんなHTMLがあったとします。 <ul class="myNav"> <li class="theme-1"><a class="btn">01</a></li> <li class="theme-2"><a class="btn">02</a></li> <li class="theme-3"><a class="btn">03</a></li> <li class="theme-4"><a class="btn">04</a></li> <li class="theme-5"><a class="btn">05</a>…</li></ul>

CSS内でPHPの変数を使いたい。

例えばWordPressのプラグインなんかを作っていて、CSSで変数を使いたいなんて時があります。 読み込みをPHPファイルにする。 まずはCSSファイルの拡張子を.phpにして、CSSを読み込ませていた部分をPHPのファイルに変更します。 HTMLならこんな感じ。 <link rel="stylesheet" type="text/css" href="sample.php" /> WordPr</link>…

Stylus 部分的にborder-radius(角丸)にする

前にSASS (Compass)での方法を書きました。 個人的にはStylusが好きなのでStylusで部分的に角丸にする方法。忘れるのでメモしておきます。 SASSで言う所のCompassでしょうか? Stylusではnibを使うと便利です。 nibをインストール nibがない場合はnpmでイン…

Responsive htmlタグにfont-sizeを指定しているとremで指定したブレイクポイントがブラウザによって違うっぽい!?

px指定の次はコレ!フォントサイズやブレイクポイントに「rem」を使ったレスポンシブ対応のフレームワーク -Schema UI Framework レスポンシブなwebサイトを作るとき最近の流行りはメディアクエリをrem指定だ!と言うことでrem指定にチャレンジしてみた所、…

SCSS アニメーションを簡単に実装するmixinとか

keyframes(CSS3)とSassでイケてるアニメーションをシンプルなコードで実装する方法 | 株式会社LIG Sassのmixinを利用して簡単に@keyframesとanimationをかける方法が載っていました! 1. @keyframesを生成する@mixin @mixin keyframes($animation-name) { …

CSS フォームとかで使えるステップバー作ってみた。

フォームのイマココ!とか表示できるシンプルなステップバーをCSSだけで作ってみた。 当然のようにIE8とかは無視してます。ご了承下さい。 SAMPLE See the Pen SIMPLE FORM STEP BAR by Chaika (@chaika-design) on CodePen. SIMPLE FORM STEP BAR HTML <ol class="stepBar step3"> <li class="step current">STE</li></ol>…

compass 部分的に角丸(border-radius)りたい。

compassで角丸(border-radius)にしたい時は @include border-radius(5px); みたいな感じでできますが、右上だけ角丸にしたいんじゃー!みたいな時の書き方をしょっちゅう忘れるのでメモ。 top・bottom / left・right で指定 @include border-corner-radius($…

Stylus インデントをミスすると危険があぶない!

Stylusのインデントをミスすると意図せずセレクタの親指定が吹っ飛んでしまう場合があるっぽい! p color: #444 #main .heading color: #0a9b94 p color: #f2a620 インデントはスペース2つで統一しているつもりが。 間違えて.headingのインデントがスペース4…

Stylus mixinの引数を値の文字列に入れたい

例えばCSSで指定してある画像を言語毎に切り替えたい。 言語のごとに各言語のprefixがついた画像にbackground-imageを変更したいようなケース。 .myLabel { background-image: url('/assets/images/label.png'); } .lang-ja { .myLabel { background-image: …

jQueryでimportantのcssを付けたい。

CSSの!importantは極力使いたくないのですが 使わざるを得ないケースが有ります。jQueryでimportant付きのcssを付けたい時 // javascript $('#hoge').css('width', '900px !important'); の様に記述してもスタイルそのものが付きませんでした。 どうやら // …

めも。CSS

TRYしたいCSS プロっぽくなった!こっそり使いたい「動きのある」CSSテクニック | コムテブログ [CSS]フラットなデザインに使いたい!タップ時の新しいエフェクト「波紋」のアニメーションを実装するテクニック | コリス メモ ウェブサイトで珍しい形を取り…

めも。CSSやデザイン関連。

CSS 頭のいい人のSASSテクニック集。 | SAITEI no CHINJUU!!!(最低の珍獣) SCSSに限らずstylsとか最初にテンプレートとして作っておいて、プロジェクトのたびに読み込ませるようにすると便利そう アイコンフォントからSVGへ!より手軽にベクター画像を表示…

CSS floatしてるコンテンツの幅が無くなる時は

CSS

久しぶりにCSSを書いていて色々と忘れてしまっていてfloatでハマることになるとは...bootstrapBootstrap などのフレームワークを使ってレイアウトを組む事も多いと思います。 例えば下の様なページ遷移するパーツをこんな感じでマークアップしたとします。 <div class="row"> <div class="span4"></div></div>…