かもメモ

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

CSS

IE11バグ display table, table-cell 内で max-width が効かない

IE11… またお前か! max-widthのバグが多いですねw display: table, display: table-cell の中にある img タグのmax-width: 100% が無視されて、要素からはみ出したりしてしまう問題。 <div class="table"> <div class="table-cell"> <img class="max-width-100per"> </div> </div> table-layout: fixed を使うと max-width が効く display: table …

IEバグ inline-block 内の要素に max-width が効かないにハマる

コーディングをしていて IE で崩れていると連絡を受けてしまいました。 IE11のサポートしてたのですが、まぁ流石にもうIEでも大丈夫だろうと思ってたら、まさかIE6時代のようにバグに遭遇してしまいました。 マイクロソフトを信じたのが間違いだった… 発生し…

CSSで三日月を描く

三日月は地球の影が月に重なってできています。なので、CSSで三日月を描くには同じように月になる円形の上に背景色と同じ円形をずらして重ねればOKなのですが、これでは背景がパターンだったりすると困ります。 月部分以外が透過になっている三日月をCSSで描…

CSSで文字にボーダー(縁取り)をつけたい。

Illustratorの線やPhothopのレイヤースタイルの境界線みたいに文字にボーダー(縁取り)をつける方法のメモ。 1. text-stroke を使う方法 text-stroke サポート状況 IE以外はそこそこサポートされてきてるっぽい。 プロパティには-webkit-のブレフィックスが現…

CSS 100%幅の子要素にネガティブマージンを使うと右側だけはみ出して横スクロールが表示されてしまう

所謂Bootstrapの.row・.col-で使われているような親要素が左右のネガティブマージンを持ち子要素がfloatを使ったカラムレイアウトを100%の画面に入れた時に右側だけが100%のブラウザサイズからはみ出して横スクロールが表示される現象に遭遇しました。 横ス…

CSS3 マークアップ別Flexboxで要素を左端・センター・右端揃えのレイアウトを作る

IE8以下のサポートも終わり自動アップデートになってきていますし、CSS3のFlexboxもそろそろ実制作で活用できる用になってきていると思っています。 flex サポート状況 なので、下記画像のようなWEBサイトのグローバルナビゲーションとかでよくある例えばロ…

Stylus Objectでらくちんカラー管理したい

StylusやSassなどでwebサイトのCSSを作成する時は、variableというようなファイルを作成して使用する色などを変数で書いておき適時使用しています。 しかし、色のバリエーションがある時に $primary = #158cba $primary-dark = #127ba3 $success = #28b62c $…

HTML・CSS レスポンシブな正方形を作って、その中央にコンテンツを表示させたい。

スマートフォン版のサイトなどを作る際に、例えば商品のサムネイル画像等をウィンドウ幅に合わせ、かつ中の画像を中央に表示させたいようなケースに結構遭遇します。 レスポンシブの正方形を作る vmin という単位を利用する方法 調べていると、widthとheight…

Stylus 変数の計算で不等号を変更するときのメモ。

CSSのプリプロセッサはSASSとLESSの2強の様ですが、ぼくは頑なにStylusを使っています。 Stylusで変数を使って値を計算させる時、マイナスの値にしたいとかで不等号を変更する時は注意が必要です。 NGな例 変数名のまま出力される $posX = 100 .myClass back…

CSS Animation アニメーション完了後にアニメーションの最後の状態のままで止めたい

CSS

CSS animation でアニメーション完了後にアニメーションの最後の状態で止まってほしい時のメモ animation-fill-mode プロパティを forwards にする。 .box { animation: my-anime 5s ease -webkit-animation-fill-mode: forwards; animation-fill-mode: forw…

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>…