[CSS]レスポンシブ対応のMasonryレイアウトをスクリプト無し、ピュアCSSで簡単に実装できる -driveway | コリス
去年くらいまでは、こういったレスポンシブ対応のMasonryレイアウトはJavaScriptで実装するのが主流でした。jQueryのプラグインも数多くリリースされています。 そんなレスポンシブ対応のMasonryレイアウトをスクリプト無し、CSSで簡単に実装できるdrivewayを紹介します。CSSアニメーションを使ったインタラクションにも注目です！ 実装が簡単 インタラクティブ レスポンシブ対応 カスタマイズが簡単 拡張性も豊か 実装にはFlexboxが使用されており、2016年1月12日にIEの古いバージョンのサポートが終了し、実質IE11+となった現在、多くのプロジェクトで利用できるでしょう。 ちなみに、2017年4月11日にVistaのサポートも終了します。 参考: Windows 製品のサポート ライフサイクル について drivewayのデモ デモではdrivewayで実装され
![[CSS]レスポンシブ対応のMasonryレイアウトをスクリプト無し、ピュアCSSで簡単に実装できる -driveway | コリス](https://cdn-ak-scissors.b.st-hatena.com/image/square/a99bb8a10dc67f32f5120a14ca9f4d9546de9b36/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201602%2F2016042601.png)
HTML の br タグを CSS だけで消す方法
HTML に br という要素がありますね。 4.6 Text-level semantics — HTML5 The br element represents a line break. ということで、改行を表すということになってます。 以前は <br /> が不要なら <br /> を入れなきゃいいじゃない というだけの話だったんだけど、 最近これを有効にしたり無効にしたりと切り替えたくなることがあります。 例えばいわゆるレスポンシブデザインでサイトを組むときに 大きな画面なら表示範囲にゆとりがあるから改行を入れて広く使ってもいいけど スマートフォンなどの画面でそれをやると一目に入る情報量が減っちゃうから そのときだけ br をなかったことにしたいという具合に。 考えたこともやったこともなかったんだけど、 これ実に簡単な話でした。 display: none; にする 要するに br
レスポンシブ・ウェブデザイン基礎
1. レスポンシブ ウェブデザイン基礎 Responsive Web Design Basic ・ レスポンシブ・ウ ブデザイ ェ ン基礎 Responsive Web Design Basic こもりまさあき 2012. 06. 11 at Yahoo! JAPAN | Komori, Masaaki 2. レスポンシブ ウェブデザイン基礎 Responsive Web Design Basic ・ 自己紹介 こもりまさあき http://blog.gaspanik.com http://protean.im 1990年代前半に都内のDTP系デザイン会社にてアルバイトをはじめる。大学卒業後 そのまま正社員となり、入出力業務、デザイン業務、ネットワーク関連業務に並行し て従事。2001年、会社を退職しそのままフリーランスの道へ。案件ごとに業務内容 や立ち位置が異なるため、職域的な肩書きは
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
