CSS Gridを使ったレスポンシブ対応の基本レイアウト
2022年4月27日 CSS 以前「CSSグリッドレイアウトで、サイズが違う複数のボックスをタイル状に配置する」という記事で紹介したCSSグリッドレイアウト。皆さん使っていますか？前回はちょっと複雑なレイアウトに挑戦しましたが、今回はCSSグリッドを使った基本的な2カラム・3カラム・カードスタイルのマルチカラムレイアウトの作り方を紹介します！ ↑私が10年以上利用している会計ソフト！ CSSグリッドの基本の書き方は動画で確認！ 基本的な記述方法は動画でも紹介しています。初めてCSSグリッドに挑戦するよという方はまずはこちらで基礎を覚えておきましょう！ 2カラム まずは基本の2カラム。CSSグリッドのいいところは、横並びの指定や各ブロックの幅、余白をひとつのセレクターに対して指定すればいいという点ですね。どのように記述していくか見てみましょう！ 可変幅 2カラム カラムを画面の幅に合わせて伸
[JS]Pinterestやウォールなどの最近よく見かけるカードを使ったレイアウトを作成するスクリプト -Freewall
Demo :Piterest Layout Pinterest風に高さの異なるカードをダイナミックにレイアウト。 Freewallの使い方 Step 1: 外部ファイル head内にjquery.jsと当スクリプトを外部ファイルとして記述します。 <head> ... <script type="text/javascript" src="jquery-1.7.min.js"></script> <script type="text/javascript" src="freewall.js"></script> </head> Step 2: HTML カードを包むラッパーを用意します。 <div id="freewall" class="free-wall"> </div> Step 3: JavaScript デモでは、各カードをスクリプトで生成してレイアウトを作成しています。 <sc
ダイナミックなタイル状レイアウトを実現できるjQueryプラグイン「Freewall」:phpspot開発日誌
Freewall - jQuery plugin for creating grid layouts. ダイナミックなタイル状レイアウトを実現できるjQueryプラグイン「Freewall」。 GridやPinterest風レイアウトの他、自由にブロックを組合せて隙間のないレイアウトが作れます。レスポンシブ対応。 １要素をクリックすると拡大するなど、ちょっと新しいレイアウトが実装できます。 ちょっと変わった感じのサイトを作るのに１ネタとしていいかもしれません。 関連エントリ CSSで設定ができるPinterest風レイアウト実装ライブラリ「Salvattore」 ドラッグ＆ドロップで再編成できるPinterest風レイアウト作成プラグイン「jQuery.Shapeshift」
画像のレイアウトに使えるjQueryプラグイン「jQuery Photoset Grid」:phpspot開発日誌
jQuery Photoset Grid - Style Hatch 画像のレイアウトに使えるjQueryプラグイン「jQuery Photoset Grid」 １つのdiv内に<img>で画像を並べるだけで写真をレイアウトしてくれるプラグインです。 コードは以下 次のようにレイアウトされます。 元の写真がいいというのはあるんでしょうけど、写真がよりオシャレに見えますね 関連エントリ テキストを新聞風のレイアウトにできるjQueryプラグイン「Columnizer」 CSSレイアウトをWEB上でサクッと作れる「PageBlox」 アイテムをドラッグ＆ドロップで画面レイアウト出来るjQueryプラグイン「gridster.js」 画像レイアウト関連で便利なjQueryプラグイン等まとめ これは新しい!パネルレイアウトが美しいスライドショー実装デモ コンテンツ幅に対してテキストを最大にして美し
[JS]ページのレイアウトに役立つjQueryのプラグインのまとめ
Pinterestのようにパネルを隙間なくレンガ状に配置したり、異なる高さのパネルを同じ高さにしたりなど、ページのレイアウトに役立つjQueryのプラグインを紹介します。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
