grid-templateを使えばCSS Gridが簡単に扱える | Web Design Trends
CSS Gridの使い方はよく分からないけど、Flexboxの方が簡単そうだからFlexboxを使っているという方も多いのではないでしょうか。 確かに、CSS GridはFlexboxと比べると少し扱いづらく、最初に触れる時に抵抗を感じてしまう人もいるかもしれません。 そこで今回は、grid-templateプロパティを使用したCSS Gridの簡単な使い方をご紹介したいと思います。 一番分かりやすいCSS Grid Layoutの使い方ガイド CSS Grid Layoutは、CSSによるレイアウト手法の1つです。様々なレイアウトをこれ1つで実装することができます。 ただ、覚えなければならないことも多く、初心者の方にとっては少し難しく感じる... Web Design Trends CSS Gridとは CSS Gridとは、CSSによるレイアウト手法の1つで、CSS Flexboxと並
CSSのサブグリッド（subgrid）の基礎知識と使い方、たった一行のCSSで複数カードの水平グリッドを簡単に揃えられる！
CSSのサブグリッド（subgrid）がChrome 117でサポートされ、Safari, Firefoxではすでにサポートされていたので、これで主要ブラウザのすべてで利用できるようになりました。 先日の記事でもお伝えしたように、subgridを使用するとカード内の見出しやテキストの水平グリッドを簡単に揃えることができます CSSのサブグリッド（subgrid）の基礎知識と使い方、プログレッシブエンハンスメント、デベロッパーツールによるデバッグ方法などを紹介します。 CSS Subgrid by Adam Argyle 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに サブグリッド（subgrid）の基礎知識 ページレベルの「マクロ」グリッドを共有する サブグリッドのサポートをチェ
要素の横並び＋複数行ならflex-wrapが便利 - コンパイラかく語りき
CSSのflex-wrapを最近知ったのでメモ。 display: flex; で要素を横並びにしつつ、２行や３行にしたいときがあるじゃないですか。そんなときに便利です。 flex-wrap指定なし まず、flex-wrapの指定が無いバージョン。display: flex;のみ指定。flex-wrapの値はデフォルトのno-wrapになります。 gistabb6fdc10b786d856f22 すると、子要素（div.box）のwidth: 200px;が無視されます。画面に１行に収まるようにwidthが自動調整されるのです。 flex-wrap: wrap;措定 次に、flex-wrap: wrap;を指定します。 すると、子要素のwidthは200pxのままで横並びになります。改行が許容されるので、溢れでた子要素は次の行に落ちます。 良かったですね！もうfloatを使う必要はありませ
イメージギャラリー等で使うようなグリッドレイアウトでアイテムの数に関係なく幅を揃えてくれるスクリプト・「Layout Balancer」
Layout Balancerはイメージギャラリー等でよく使われているグリッドレイアウトで、アイテムの数に関係なく幅を揃えてくれるスクリプトです。jQueryに依存しています。語彙が乏しいのでうまく説明出来ないのでサンプルを上に用意しました。動的に数が変わるようなコンテンツでも空の部分が出ないようにしたい、という目的のようですね。コードもシンプルで良い感じです。 Layout Balancer
jQuery plugin: Easy List Splitter
jQuery plugin: Easy List Splitter - Version 1.0.2 Create multiple lists from a single list ordering the items vertically You can choose the number of lists you want to create. The plugin will order the list items vertically by default. In this first sample we've splitted our list into 3 lists: Lorem ipsum 1 Donec pede 2 Fringilla vel 3 Eget arcu 4 In enim 5 Lorem farem 6 Pede justo 7 Vel aliquet 8
複数の画像のレイアウトを自動化できるPhotoshopのエクステンション -Tych Panel
あらかじめ設定したサイズにフィットするように複数の画像を配置するPhotoshopのエクステンションを紹介します。 Tych Panel [ad#ad-2] Tych Panelとは Tych Panelのインストール Tych Panelとは Tych Panelは写真などの画像のレイアウトを自動化するPhotoshopのエクステンションで、レイアウトの設定は事実上無限です。 下記のようなレイアウトも1クリックで簡単にできます。 Tych Panel -ギャラリー 背景色や角丸にも対応。 [ad#ad-2] Tych Panelの主な特徴 横・縦に画像を配置 高さ・幅のリサイズが可 スマートオブジェクト・レイヤーマスク対応 Adobe Bridge対応 背景色、ボーダー、角丸の設定可 Tych Panelのインストール インストールはちょっと面倒かもしれません。 ダウンロードしたファイル
並べた画像を敷き詰めて超カッコよくするjQueryサンプル:phpspot開発日誌
Automatic Image Montage with jQuery | Codrops 並べた画像を敷き詰めて超カッコよくするjQueryサンプル。 <img>を単に並べるだけであとはブラウザの幅に応じて画像を次のように並び替えてくれちゃうデモとスクリプトのダウンロードが可能です。 画像間の調整や背景色の調整等が行えるようです。 デモページはこちら ブラウザサイズを変更しても画像を再計算して表示しなおしてくれます。 背景を黒にするとよりオシャレな感じです。 関連エントリ 異なる幅・高さの画像も超綺麗に整列させるjQueryプラグイン「Atteeeeention plugin」 ブロックサイズ内に画像を綺麗に収めるjQueryプラグイン「CJ Object Scaler」
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
This domain was registered by Youdot.io