【jQuery + CSS】レスポンシブでヌルヌル動く［Expanding Column Layout］を使ってみました。
先日CODEPENで「何か使えるテクニックはないかな〜」とネットサーフィンしながらイロイロと物色していたところ、「Expanding Column Layout」というスタイルシートのテクニックを見つけました。 以前、本ブログで「CSS3 Flexbox Accordion」を紹介しましたが、その進化版といった感じです。 使いづらい部分や小さなエラーがあったので、その辺りを改良して下記URLにサンプルを作りました。 SAMPLE : https://on-ze.com/demo/jquery-expanding-column-layout/ 各メニューをクリックするとコンテンツが浮かび上がる仕組みですが、さすがにCSSのみでの実装は不可能で、動作の部分はjQueryに頼っています。 元ネタはコチラ→https://codepen.io/ettrics/pen/ZYqKGb ウェブデザインの
[CSS]最近のレスポンシブ対応サイトで使われているレイアウトのアイデア・実装方法のまとめ
レスポンシブ対応のレイアウトはどのように拡大・縮小させるのか、また縦・横に積み重ねるのかに大別されます。 ブラウザいっぱいに表示する1カラム、サイドバーを備えた2カラム、2カラムを均等に分割したスプリットスクリーン、カードやパネルを使ったレイアウトなど、最近のレスポンシブ対応サイトで使われているレイアウトのアイデアと実装方法を紹介します。 ひと昔前まではJavaScriptを使用しないと実装できなかったレイアウトも、flexboxなどを使うことでスタイルシートのみで実装できるようになりました。 Split Screen Split Screenは、デスクトップでは左右に分割されたレイアウト、スマホでは上下に積み重なったレイアウトです。去年くらいから国内でもこのレイアウトは増えてきました。 Pure CSS Masonry Layout Masonryは、カードやパネルをレンガ状に敷き詰めて
![[CSS]最近のレスポンシブ対応サイトで使われているレイアウトのアイデア・実装方法のまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/34869b288b480daff8b08b01332b82fbf33502fc/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201703%2F2017070301.png)
CSS Grid Layoutってどうよ？：聖杯レイアウトを試してみた ｜ Tips Note by TAM
2016年の春辺りから、「そろそろ『CSS Grid Layout』が来るらしい」という話をよく聞くようになりましたが、最近になって、「いよいよ来るか!?」というニュアンスに変わってきたように思います。 CSS Grid Layoutと言われても、「なんか便利ですごいらしい」という、ぼんやりとした印象しかなかったので、調べつつ、ちょっと触ってみました。 そもそもCSS Grid Layoutって何よ？ 2017年5月現在、W3Cで仕様策定中の、新しいレイアウトモジュールです。 グリッドレイアウトを実装する際に便利なプロパティが揃っています。 仕様の策定は2011年頃から行われていて、2017年2月に「CSS Grid Layout Module Level 1」として勧告候補となっています。 各ブラウザの実装はなかなか進んでいませんでしたが、Chromeが2017年3月にリリースされたバー
Masonry
What is Masonry? Masonry is a JavaScript grid layout library. It works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall. You’ve probably seen it in use all over the Internet. Install Download CDN Package managers Getting started HTML CSS Initialize with jQuery Initialize with Vanilla JavaScript Initialize in HTML Next MIT Lice
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
