徐々に日本でもメジャーなデザインツールとなっている「Figma」。前回の記事『FigmaのSmart Animateを活用したプロトタイプ入門』では、簡単にアニメーションを実現できる「Smart Animate」機能を紹介しました。 本記事ではデザイン制作とその後のコーディング作業を強力にサポートしてくれる「Auto Layout」について詳しく紹介します。「Auto Layout」はデザインを効率よく進められるだけでなく、デザイン段階でHTML・CSSコーディングの参考になる情報を追加できます。 デザイン段階での使い方はもちろん、Figmaでデザインを受け取ったエンジニアがどう考えて実装していくべきかまで紹介します。デザイナーはもちろん、Figmaで作られたデザインファイルを受け取る可能性があるエンジニアの方も是非ご覧ください。 Auto Layoutとは 「Auto Layout」とは
現場で使えるFlexboxレイアウト12選Update2023.05.12Release2021.06.24Coding HatenaにシェアするTwitterにツイートするPocketにストックするFeedlyに登録する 現場で使えるFlexboxレイアウトを12パターン紹介します。flexboxを紹介する記事はたくさんありますが、知識のみで実例付きで紹介されているページはあまり見かけなかったので、本記事にて詳しく紹介していきます。 flexboxに慣れていない方だけではなくコードを短縮化させたい方も対象の内容となっております。ぜひご一読ください。 flexboxを使った横並び1行レイアウトflexboxを使った横並び1行レイアウトカードUIでよくある横並び1行レイアウトのFlexbox実装。同じ横幅のカードを等間隔で配置するもので、間の余白ももちろん等間隔。これを使う機会は多いので確実
CSSのgapプロパティーは余白を指定できる新しめの手法です。余白といえば、marginプロパティーやpaddingプロパティーを思い浮かべる方が多いと思いますが、CSS GridやFlexboxでgapプロパティーを使うと柔軟にレイアウトを組めます。もともとgapプロパティーはCSS Gridでのみ利用できていましたが、macOS Safari 14.1およびSafari on iOS 14.6からFlexboxでもgapプロパティーが使えるようになりました。 この記事ではFlexbox、CSS Gridで利用できるgapプロパティーを活用したレイアウト手法とそのメリットを紹介します。今までmarginプロパティーで要素間の余白を調整していたものもgapプロパティーで柔軟に対応できる場面もあります。なお、下記サンプルでmarginプロパティーは一切使っていません。 サンプルを別ウインドウ
背景と実施したこと TailwindCSSを使用してPCレイアウトのWebサイトのレスポンシブ対応を実装しました。 今回は静的コンテンツの配置を横並びから縦並びに変えるという内容のみ実施しています。 CSSは少し苦手意識があったのですが、TailwindCSSを使うとかなりローコストかつシンプルに記述できたので そのノウハウを主に初心者の方向けに記述していきたいと思います。 目次 概要 前提とやりたいことの整理 考え方の整理 実際のコード例 補足とまとめ 概要 TailwindCSSを使ったレスポンシブ対応の実際のコード例と考え方を初心者向けに記載するよ。 画面表示上、横並びだったものをスマホレイアウトにすると縦並びにする、という例で説明するよ。 メディアクエリの使い方とはもちろんだけど、HTMLタグの記載の順番を意識することがポイントだよ。 前提とやりたいことの整理 【前提】 + Tai
どうも！フジグチです！ 今回はCappuccinoのデモサイトに設置している、プロフィールカードのカスタマイズを公開いたします。 「近日中に公開する」とデモサイトに書いていたのですが、まさかのテーマ２作目の製作をするという想定外のことが起きて、自分でそう書いていたことも忘れていました。（小声） せっかく公開するのならと、色々なプロフィールカードのパターンを作ったので、お好きなデザインを選んで使ってください。 この記事のカスタマイズの特徴を以下に挙げます。 この記事の特徴 入力フォームでコードを作成できる その場でプレビュー デザインを１０種類から選べる その場でカラーの変更が出来る ワンクリックでデザインの切り替え ワンクリックでコードのコピー このカスタマイズは、はてなブログに関わらずHTMLを入れることが出来るブログサービス（WordPressとか）であれば、お使いいただくことが出来る
Flexboxを勉強し始めると、flexプロパティを使用して「flex: 1;」と書かれている物をよく見かけると思います。 CSS初心者のころは、良く分からずなんとなく使っている方も多いのではないでしょうか？ この記事では、何気なく書いてしまう「flex: 1;」について丁寧に解説していきます。 「flex: 1;」とは？ 結論から書くと、flexプロパティは、flex-grow、flex-shrink、flex-basisの3つのプロパティのショートハンド（省略形）です。 そのため、「flex: 1;」を理解するためには、まず上記3つのプロパティを理解する必要があります。 ここではさらっと流しますが、「flex: 1;」は、「flex-grow: 1;」、「flex-shrink: 1;」、「flex-basis: 0;」の3つ同時に指定したことと同じ意味になります。 ここからは、上記3
Wordpress等で記事の一覧をFlexboxで横並びにすることはよくあると思います。 デザインカンプなどでは「良い感じ」の文字量で作られていることが多いので気にならなくとも、実際に運用が始まった後に「記事毎にタイトルの長さが違っているので高さが揃わず気持ち悪い」ということはよくあると思います。 自分でも良く忘れるのでので、備忘録も兼ねて。 完成形まず、目指すべき完成形はこんな感じです。 分かりやすいようにタイトル部分に背景色を付けましたが、タイトル部分の高さが揃っているのでボタンの位置もそろっており、細かいことを言ってくるクライアントやディレクターも満足してくれるでしょう。 このタイトル部分の高さが記事によって異なることで良く陥りがちなレイアウト崩れがこちら。 タイトル行くらいであれば1行～2行で収まるのでそこまで気にならないかもしれませんが、例えば商品説明などが入る場合は参考画像の比
CSSの進化がすごい！モダンCSS8選
こんにちは！ 株式会社ココナラフロントエンド開発グループの雨嶋です。 最近の CSS の進化はすさまじいです。 今までは Javascript 数行で実装していた部分が CSS1 行で済んだりします。 ただ知ってないと使えないので、自分の勉強も兼ねて便利そうな CSS を 8 個選定しました。 大体モダンな CSS を選定したつもりですが、もうモダンではないものもあるかもしれません。 （いつからがモダンなのか、、） 本記事ではそれぞれ軽く説明するに留めますので、詳細については MDN Web Docs などで調べていただければと思います。 コンテナクエリ コンテナクエリは、要素のサイズに応じてスタイルを適用するための機能です。 メディアクエリのようにブラウザ画面の横幅などに応じてスタイルを適用するものではなく、要素自体のサイズに応じてスタイルを切り替えることができます。 コンテナクエリを使
近ごろの様子
2024年5月 自分の個人ウェブサイト内でのここの呼称を「かつてTwitterとして知られていたプラットフォーム」で統一したい (12時35分) Firefoxに昔からあったので、大して調べずにoverflow-inlineプロパティーを使い始めたら、全然実装されていなかった (7時2分) 東西線の工事の日を確認しているが、関係なかった (8時1分) 隠したテキストは検索できないことがあるので、ちゃんと表示するようにした(v9.30.5) (7時33分) ソフトミント色のAirPods Proとか出たら買っちゃいそう (18時52分) Kindleのマンガが1000冊を超えてしまい、1冊500円とすると50万円だなと思い、ブックオフで売りたい (18時52分) Firefoxのプライベート・ウィンドウのタブでは、ダークモード対応のfavicon.svgでダークモード側が選択されるという学び
[Angular8]サイトを簡単スタイリング！Angular Flex-Layoutの使い方をまとめてみた | DevelopersIO
どうも！大阪オフィスの西村祐二です。 フッター、ヘッターのレイアウトなど、画面のスタイリングをする際に、CSSのFlexboxなどで記載していく人は多いのではないでしょうか。 AngularではCSSのFlexboxをCSSファイルに書かず、HTMLタグ(ディレクティブ)を設定するだけで、簡単にFlexboxを設定できるライブラリAngular Flex-Layoutが公式から提供されています。 ex) <div fxLayout="row" fxLayoutAlign="space-between"> </div> 今回はそのAngular Flex-Layoutの使い方をまとめてみます。 目次 環境 試していく環境を準備 早速試していく！ fxLayout 子要素の並ぶ向き fxLayoutAlign 要素の整列順 fxLayoutGap 要素間のマージン設定 Grid Mode fx
![[Angular8]サイトを簡単スタイリング！Angular Flex-Layoutの使い方をまとめてみた | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/07aa11b12376196229f0af49b9b58f3d8d0f1b87/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2019%2F06%2FAngular8.png)
HTMLの3種類のdisplay要素について HTMLの表示形式は主に3つに分かれています。 block inline inline-block 主にこの3つに分かれていて、この3つの特性をよく理解していないと中央寄せにしたい場合などでどうしていいか分からず混乱してしまいます。初学者の段階でしっかりと理解を深めて行きましょう。 block ブロック要素の特徴は3つ 横幅の大きさは文字数で決まらず、端から端まで広がる 自由な高さと幅を指定できる 横並びには出来ない 主な要素としては以下です <h1>~<h6> <p> <ul> <div> <header>,<footer> <section> などなど、文書を覆う一つの塊として扱うという特徴があります。 See the Pen Untitled by 高龍 (@ykwxttph-the-encoder) on CodePen. このように画
flex-basisとwidthの違い なぜどうして？
Flexboxのflex-basisってwidthとの使い分け方、何の役に立つのかを実例を交えて解説します。 実はwidthとflex-basisは同じ 実はwidthとflex-basisというのは同じなんです。 というとびっくりすると思いますがこれはあくまでflex-directionがrow（横並び）の時の話です。 flex-directionがcolumn(縦並び)の時は今度はheightとflex-basisが同じになります。 そしてフレックスアイテムのwidthとheightはflex-basisで上書きされます。 flex-basisじゃなくてwidth/heightでいいのでは？ どうしてこうなってるのかと言いますと、Flexboxの世界では「縦も横もない」からなのです。そして唯一縦横を決めるのがflex-directionというわけです。 これがどういう時に役にたつか、わ
CSSで縦並びリストを折り返して複数列にする方法を解説
「CSSで縦並びリストを折り返す方法を知りたい」 「リストのアイテムが増減しても対応できるようにする方法はないの？」 こんな悩みにお答えします｡ CSSで縦並びリストを折り返すには「column-count」「display:flex;」を使う方法があります｡ CSSだけで増減に対応するのは難しく､JavaScript(jQuery)を使う必要があります｡ 私は､2015年からWeb制作の仕事をはじめて､170件ほどのWebサイトを制作してきました｡ その間､いろいろな失敗を繰り返し､クライアントからのフィードバックや本などで勉強することにより､多くのノウハウを得ることができました｡ この記事では以下のことがわかります｡
01CSS メディア特性 orientation メディアクエリのメディア特性に orientation というものがあることを知りませんでした（涙）。 これまでは javascript で if (window.innerHeight > window.innerWidth) { document.body.classList.remove('landscape'); document.body.classList.add('portrait'); } else { document.body.classList.remove('portrait'); document.body.classList.add('landscape'); } などと、body タグにクラスを付加して切り分けていましたが、この orientation を使えばメディアクエリで振り分けられます。 orienta
従来のmedia queryの問題点 CSSでWindow幅に応じて適応するスタイルを変えるためにmedia queryがある。スマートフォンやタブレットの普及によって、レスポンシブ対応が必須になった現代においてはmedia queryは必須の機能である。 ただ、この media query だけでは、限界がでてくる。それは使っているブラウザのwindow幅でしかCSSの切り替えができないということである。時にそれは実装者にとって非常に厄介な問題となりうる。 上の図のようなブログのレイアウトを考えてみよう。 window幅が960pxの時はメインカラムとサブカラムが横並びで表示されているとする。 959px幅の際にメインカラムの下にサブカラムが回りこむ。 window幅が960pxの際にはメインカラムとサブカラムが横並びでレイアウトされているので、メインカラムの幅はwindow幅が959p
スクロールすると、それぞれ色のついた見出し部分が順に固定されていきます。 列・行（横1列・縦1列）両方の固定化 このパターンでは縦をスクロールすると見出し列が固定され、横スクロールすると左の見出し行が固定されます。 わかりやすくするため、表示枠を固定（iframeで固定）し、縦横にスクロールバーを付けています。 htmlソース <table class="st-tbl1"> <thead> <tr> <th>見出し</th> <th>見出し</th> <th>見出し</th> <th>見出し</th> <th>見出し</th> <th>見出し</th> <th>見出し</th> <th>見出し</th> <th>見出し</th> <th>見出し</th> </tr> </thead> <tbody> <tr> <th>縦軸</th> <td>データ</td> <td>データ</td> <t
レイアウトにとても便利なFlexboxですが、必要なベンダープレフィックスがよくわからなかったり、都度都度記述するのが面倒だったりします。 IEのサポートが終了した2023年に必要なベンダープレフィックスを、ワンクリックでコピーできるようにまとめましたので、是非ご活用ください。 「Can I Use.」を基に、主要ブラウザの直近2バージョンに必要なベンダープレフィックスを記述しております。 簡易一覧表 各プロパティの一覧表です。 「コードをコピー」をクリックすると、ベンダープレフィックス付きのCSSがクリップボードにコピーされます。 Flex container プロパティ 備考 値 コード display アイテムを横並びにする設定 flex コードをコピーコピーしました flex-direction アイテムの並びを縦か横か配置方法の設定 row コードをコピーコピーしました row-
IE11のサポートが切れた今、そろそろgridレイアウトを積極的に導入でるようになりました。flexレイアウトからgridレイアウトへの移行をデザイナー観点で簡単に使うとこだけ解説します。 gridレイアウトの利点 gridだと列数だけでなく行数も指定しないといけないと思われがちですが、実際は列数の指定だけで行が増えても繰り返してくれます。 どっちが行だか列だかわからなくなったときはテキストを思い出してください。 テキストエディタで行番号をふれるのが行です。 gridのメリットは色々ありますが、flexboxレイアウトより優れている点は下記の三点です。 親要素で子要素のサイズを制御できる 子要素側でそれを上書きできる justify-content: space-between;の最終行の処理 親要素で子要素のサイズを制御 例えば 「大見出しと8文字分の小見出しと段落、隙間は1文字分」 と
この記事はNIJIBOX Advent Calendar 2021の掲載記事です。 この記事で話すこと CSSで文章の縦書きを表現した場合のChromeとSafariの表示の違いとその回避策 先日、初めてWebで文字の縦書きの実装が必要な案件に出会いました。 縦書き文章って紙媒体の小説や新聞では当たり前ですがWebではなかなか珍しいですよね。 と言っても文字を縦にするだけだしなんとかなるだろうと思っていたのですが、クロスブラウザチェック時に予期せぬ挙動を発見してしまい少し悩んだのでここに備忘録として書き残しておこうと思います。 ※PCのモダンブラウザ対応を想定しています。 ※2021/12/02時点での内容となります。 Google Chrome バージョン: 96.0.4664.55 Safari バージョン13.1.3 (15609.4.1) Webで縦書き、どうしよう？ さて、そもそ
WordPressのコアブロックのカスタマイズについて2021年のベスト・プラクティスを探ろう その1: ボタンブロック - Photosynthesic blog
こんにちは、みみです。 WordPressのデザインの話をそろそろガチでしたい WordPressのブロックエディタが実装されて早2年になります。カスタムブロックの作り方については良く話題になる気がしますが、ガラッと変わった設計に応じた新しいワークフローやデザイン手法などについてはそんなに話が上がらない気がします。 一通りのカスタムブロックプラグインが出揃った今だと尚更に、それよりもブロックエディタ時代のWordPressのデザイン手法についてみんな考えあぐねているのでは無いかと思うのです。 20日に出た5.8でのWordPressの進化を眺めていて、そろそろ誰かとそういう語りがしたくなってきたので、試しにひとつ書いてみようと思います。Webの4割を占めるWordPressのデザインの話、もっとあってもいいと思うんですよね。 ワークフローとしてウォーターフォール型では全く機能しなくなる、み
【flexbox】レスポンシブのサンプルデザイン
今回はflexboxを使用してレスポンシブのボックスデザインを作成してみました！ ウィンドウサイズに応じてflexboxのレイアウトが変わります。 flexboxレスポンシブのサンプルデザイン構成 今回はflexboxの親要素～孫要素・ひ孫要素まで配置しています。 孫要素等が混ざってくると、CSSだけで高さを揃えることが若干難しくなってきます。 後からの修正は面倒な場合があるので、先にレスポンシブに対応する際にどのようにflexboxを組むか考えて配置する方が良いかと思います。 先に完成系のHTMLとCSSを確認したいという方はこちらをご確認ください。 ウィンドウサイズが1280px以上の場合 flexbox横並び3列(3カラム) ウィンドウサイズが1280px以上の場合は 3カラムで子要素は横並び・孫要素以下は縦並びです。 タイトル部分は2行までが推奨です。 ウィンドウサイズが1280p
【css】段組みレイアウトは、flexbox、calc、nth-childでつくろう | 名古屋でホームページ制作、Web制作なら株式会社エッコ
制作の久保田です。 今回は、段組みレイアウトの書き方に関してご紹介します。 段組みレイアウトは、flexboxが使えるようになってすごく簡単になりました。 flexboxで段組みレイアウトと一言で言っても、書き方が幾通りもあるので、これがベストじゃない？って書き方をご紹介したいと思います。ポイントはcalcとnth-childを組み合わせて使うことです。 flexbox、calc、nth-childでつくる段組みレイアウト 上記のような、よくある3カラムレイアウトの場合を見ていきます。 コンテンツ幅は可変、各要素は幅に応じて伸縮するけど、要素間は30pxの余白をつけます。 短いので最初に全コード掲載します。 flexbox、calc、nth-child の基本的な使い方がわからないって場合は先に次章からご覧ください。 <!DOCTYPE html> <html> <head> <style
ECサイト運営会社でWEBエンジニア＆マーケター・WEBコーダーとして日々従事しており、会社ではWindows、お家ではMacの両刀遣い。iPad Proは毎日持ち歩いています。PCデスク周りを快適にすることやWEBデザインが好き。ガジェットやモノで生活に刺激を与えたいという想いで人におすすめしたいモノの紹介記事を軸にブログ運営をしているガジェットブロガーです。写真撮影が趣味になりました。
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
FigmaのAutoLayout入門 - エンジニアに伝わるデザインを作ろう - ICS MEDIA
現場で使えるFlexboxレイアウト12選 | BUILD Journal
gapの余白指定が便利！ gridとflexでできる新しいCSSレイアウト手法 - ICS MEDIA
TailwindCSSのレスポンシブデザイン - Qiita
はてなブログ-プロフィールをおしゃれにカスタマイズするデザイン１０選 - フジブロっ！
CSSでよく見かける【flex:1】を分かりやすく解説 | みやっちブログ
【Flexbox】孫要素まで高さを揃える方法と、うまく行かない時の対処法（追記あり）｜あたおか
HTML/CSS block,inline,inline-block とは？ - Qiita
CSSでデバイスの縦長横長を判別 @media(orientation)
Container Queriesという考え方の紹介と今から利用するには
テーブルtableタグのヘッダー行・列（thタグ）を固定する方法
【2023年最新】コピペで楽々！Flexboxのベンダープレフィックスまとめ
【css】Flexからgridレイアウトへ - らいちのヒミツ基地
Webで縦書きコンテンツ〜Safariには気を付けろ！〜 - Qiita
【コピペで簡単】CSSで端末によって横並びと縦並びを気持ちよく見えるようにする | ルイログ