CSS

flex boxについて(その2)

CSS

目次 目次 はじめに 子要素に指定できるプロパティ order ・・・ 子要素の順番 flex-grow ・・・ 子要素の伸びる比率 flex-shrink ・・・ 子要素の縮む比率 flex-basis ・・・ 子要素のベースとなる横幅を指定 flex ・・・ flex-grow、flex-shrink、flex-bas…

flex boxについて

CSS

目次 目次 はじめに 基本的な書き方 親要素に指定できるプロパティ flex-direction ・・・ 子要素の並ぶ順番 flex-wrap ・・・ 子要素の折り返し flex-flow ・・・ flex-directionとflex-wrapをまとめて指定 justify-content ・・・ 水平方向の揃え位置 alig…

はてなブログのコードブロックをいい感じにした

はてなブログのデフォルトのコードブロックは字も大きいし、長い行は折り返されるし、なんだか見にくい。 素敵なテーマはたくさんあってもコードブロックのせいで台無しな気がしませんか?テーマによっては簡単に調整されているものも確かにありますが、あく…

fixedで要素を中央に配置する

CSS

ネガティブマージンを設定する。 width、heightに指定したサイズの1/2の数値をそれぞれmargin-left、margin-topに指定する。 なるほど。 See the Pen fixedで要素を中央に配置する by soto-ogre (@soto-ogre) on CodePen.

親要素の横幅を基準に正方形の要素を生成する

親要素の横幅を基準値にして子要素の縦幅を決めたい。 理由はわからないのですが、子要素に擬似要素でpadding-top;100%を指定するとできるようです。なぜ? 一応デモページへのリンクです。 デモページ See the Pen 親要素の横幅を基準に正方形の要素を生成…

[jQuery][CSS]ドロワーメニューを実装する

はじめに Drawer Menuを実装する JS(jQuery) HTML CSS おわりに はじめに 毎回検索かけて調べているので忘備録として残しておきます。 SCSS、jQueryです。 普段はnode-sassを使用してsassファイルをcssに自動コンパイルさせています。こちらも記事にまとめて…