[Bootstrap 4] navbar の一部 nav-item を右寄せに配置するサンプルコード

Bootstrap 4 で navbar の nav-item を左右に寄せる mr-auto のサンプルコードを紹介します。

[Bootstrap 4] navbar を固定ヘッダーに設定する方法

Bootstrap 4 で navbar を固定ヘッダーにする sticky-top のサンプルコードを紹介します。

[CSS] floatを解除する「clearfix」

float を解除する「clearfix」の CSS サンプルコードをメモします。

CSS だけで1行の均等割付、両端揃え

Flexbox の justify-content: space-between で 1 行の均等割付・両端揃えを実現するサンプルです。

フロントエンド得意じゃないエンジニアはどの CSS フレームワークを採用すべきか？ → やっぱり Bootstrap がオススメ

Bootstrap、Semantic UI、Foundation、Materialize を比較し、Bootstrap をオススメする社内ヒアリング結果です。

[CSS] 画像置換は text-indent: 100%; white-space: nowrap; overflow: hidden; でテキストを隠す

text-indent: 100% を使った、より新しい画像置換用の hide-text テクニックを紹介します。

Q)「CSS プリプロセッサを導入するなら？」A)「PostCSS かな」 ~ PostCSS, Stylus, Sass, Less ザックリ比較した話

PostCSS、Stylus、Sass、Less を比較し、スキルに応じた CSS プリプロセッサ選定方針をまとめます。

[CSS] Chrome や Safari で背景色（background-color）や背景画像（background-image）も印刷する方法

-webkit-print-color-adjust: exact で Chrome や Safari でも背景色や背景画像を印刷させる方法です。

[CSS] Internet Explorer (IE)で a img リンク画像の枠線を消す方法

IE でリンク画像に付く枠線を border-style: none で消す 2 パターンのメモです。

[CSS] Desktop, Mobile で違う画像に切り替えるサンプルコード

メディアクエリと .pc / .sp クラスで Desktop と Mobile 用画像を切り替えるサンプルです。

TwitterやFacebookなどのソーシャルボタンを横や縦に並べて設置する方法

ul/li で並べたソーシャルボタンを横並び・縦並びに整列させる CSS スニペットです。

CSS を Sass/Scss に変換してくれるサービス css2sass が超便利

CSS を Sass / SCSS へ手軽に変換できる Web サービス css2sass の使い方を紹介します。

CSSフレームワークの比較一覧サイト

usabli.ca が公開している CSS フレームワーク比較サイトへのリンクメモです。

Google Fonts が読み込めない、反映されない問題の解決方法

Google Fonts が読み込めない、反映されない原因と解決方法をご紹介します。

Google Web Fonts を使う方法

Google Web Fonts を CSS3 で使う方法の公式・参考リンクをまとめたメモです。

[HTML] table タグで枠線を非表示にするには style="border:none;" を指定する

table・tbody・tr・td それぞれに border:none を指定して枠線を消すサンプルコードです。

[JavaScript] CSS background-image から URL だけ取得する方法

background-image プロパティの値から URL だけを抜き出す正規表現の基本編と応用編サンプルです。

jQuery textillate.js で CSS3 テキストアニメーション

jQuery textillate.js で CSS3 テキストアニメーションを動かしたサンプルコード紹介です。

jQuery textillate.js でテキストの折り返しサンプルコード

jQuery textillate.js でテキストの折り返しあり/なしを動作確認したサンプルコードです。

[HTML/CSS] ウェブページ上でサイズ(px)を測るツール「MeasureIt!」 [Chrome][Firefox]

ウェブページ上のサイズを px 単位で測れる Chrome / Firefox 拡張機能 MeasureIt! の紹介です。

[Rails] scaffold.css を編集して table を見やすくする

Rails 3.1 の scaffold の table を、scaffold.css に罫線用クラスを追加して見やすくする手順です。

reset.css と normalize.css を比較して normalize.css を推すことにした

reset.css と normalize.css を比較し、思想の面から normalize.css を選ぶことにした理由をまとめます。

[Stylus] Lost img selector in nested selectors

Stylus 0.40.3 でネストしたセレクタ内の img が欠落するバグを再現する書き方と回避策の記録です。

CSS3のグラデーション生成サイト「Ultimate CSS Gradient Generator」

CSS3 のグラデーションを GUI で生成できる Ultimate CSS Gradient Generator を紹介します。