タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
margin: auto;は非常に便利なCSSで、使用することも多いと思います。 そのmargin: auto;の仕組みをおさらいし、最近の実装で使用される中央配置のテクニックを紹介します。また、ナビゲーションでタイトル以外のリンクを右寄せに配置させるなど、便利なテクニックが満載です。 All About 'margin: auto' in CSS: Centering and More by Ritika Agrawal 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 「auto」とはどういう意味ですか？ 「利用可能なスペースを占める」とはどういう意味ですか？ ブロックレベル要素でautoを使用する 絶対要素でautoを使用して中央配置 CSS GridとFlexboxでautoを使用して中央配置 Flexboxとa
CSSでマージンを与える際に、margin-left, margin-rightのように物理プロパティを使用している思います。もちろん問題はないですが、CSS GridやFlexboxで使われている論理プロパティを使用する機会も増えてくると思います。 CSSの論理プロパティの基礎知識、inlineとblockの仕様、論理として使用できるプロパティ、論理プロパティの実装例を紹介します。 Digging Into CSS Logical Properties by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに writing-modeによるinlineとblockの違い inlineとはどういう意味ですか？ startとendを正しく理解する 論理として使用できるプロパティは何ですか？ 論理プ
margin-inline:autoを使おう。margin-left:autoとmargin-right:autoを書くのが面倒なあなたへ
この記事は、Lancers（ランサーズ） Advent Calendar 2023 の9日目の記事です。 本記事では、マークアップで、CSSのmarginプロパティをあまり書かなくなった話を紹介します。 Webサービスのレイアウトについて 大きく以下が考えられます。 縦に並べる 横に並べる 絶対配置 さらに、それぞれに対して以下が考えられます。 不規則的な配置 規則的な配置 今回は、縦に並べることに着目して、マークアップを考えてみます。 不規則的な配置のパターン marginを利用する .mt-4 { margin-top: 4px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; } .mt-32 { margin-top: 32px; } <div class="box box1"></div> <div class=
この記事は、アソビュー！ Advent Calendar 2022 の 17日目（裏面）です。 みなさん、こんにちは。アソビュー！でフロントエンドエンジニアをしている白井です。 弊社ではバックエンドエンジニアの比率が多いこともあり、CSS 怖い！CSS わからない！という声をよく聞きます。 CSS と少しでも仲良くなるために、今回はレイアウトを作る際に基本となる幅（width）、高さ（height）、余白（margin）を指定する際に考えていることなどお話ししようと思います。 まずはじめに レイアウトを整える前に、不要な CSS プロパティは消しておく 普段作業していて CSS を書き換えていると不必要なスタイル定義は意外と残ってしまいがちです（よくやってしまいます…）。 色や形に関するプロパティは大体決まっているので重複したりすることは少ないですが、要素の位置は display、posi
この記事は、Money Forward Engineering 1 Advent Calendar 2023 19日目の投稿です。 前回はTaskさんの『小さいプルリクエストを作る技術』でした！ いやはや、CSSは難しいですよね... 複雑な入れ子構造になった要素にスタイルを当てるときのカスケードバトル どこから継承されたのか分からない謎のスタイル インラインスタイル、クラスベースのスタイル、CSS in JSが混在しカオスになった指定方法 僕自身、今までたくさんの辛みCSSに頭を悩ませてきました... 今日はそんな管理の難しいCSSを少しでも分かりやすくするための、レイアウト手法を紹介していこうと思います。 本記事はEvery Layout-モジュラーなレスポンシブデザインを実現するCSS設計論で紹介されているレイアウト手法Stack、Clusterの紹介になります。 レイアウトの基本的
マージン・コール / グウェン・カウェ Margin Call アーティスト:Gwen Cahue Label Quest Amazon ジャンゴ・ラインハルトに魅せられて研鑽を重ね、その系譜を今に受け継ぐマヌーシュ・スウィングの若き俊才グウェン・カウェ。 2019年リリースのデビューアルバム『Memories of Paris』に続くセカンドが、この『MARGIN CALL 』である。 リズム・ギター、コントラバスにヴァイオリンを加えたカルテット編成。 自作曲のほか、ピアソラやミンガスをカヴァーしているのはわかるにしても、レディオヘッドの“Exit Music (For A Film)”を採り上げているのは、ちょっとびっくり。 このあたりの感覚が新世代ならではなのだろう。 マヌーシュ・スウィングを基盤としたテクニックは確かで、軽やかなスイング感とオーガニックな弦の響きが大変心地よく、デジ
Spacer とはその名の通り幅を取るためだけの存在です。 昔は spacer.gif なるものが使われていたらしいです。(私は若者なので実際に目の当たりにしたことはありません) Figma でどんな時に Spacer が必要か昔は役立つ場面がもっといろいろあったと思いますが、Figma の Auto Layout が進化した今では Auto Layout 内で並列した複数の要素間で異なるマージンを設定したい場合 しかないと思います。要するにこういうレイアウトです。 もちろん Frame ネストしたりさせてもこういったレイアウトは実現できるのですが、それは正しい構造ではなくなってしまいます。 正しい構造でなくなることで致命的なデメリットがあるかと言われると微妙なのですが、実装者に正しいグルーピングが間違って伝わる可能性はありますし、デザイン自体のメンテナビリティも下がります(多分、ここはあ
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
The DeepSeek Narrative Takes the World by Storm DeepSeek took the world by storm. For the last week, DeepSeek has been the only topic that anyone in the world wants to talk about. As it currently stands, DeepSeek daily traffic is now much higher than Claude, Perplexity, and even Gemini. But to close watchers of the space, this is not exactly “new” news. We have been talking about DeepSeek for mont
ネットビジネスのマインドセット ネットビジネスを始める、成果を出す上での心得、つまり「ネットビジネス成功のためのマインドセット」をまとめています。 基本となる「初心者だから．．．」という考え方の「勘違い」から、「ネットビジネスに必要な才能」、「失敗する人が多い理由」などを解説します。 これをよく読むことで「自分でも成功できる」「才能は関係ない」と気がつくでしょう。 成功の一歩はまず考え方。 自分の…
「margin」と「padding」とは、Webページに余白を作るCSSのプロバティです。どちらのプロバティも余白を指定する要素をもっていますが、それぞれの役割が異なります。 「margin」と「padding」のプロバティの要素は4辺（上下左右）の間隔・領域を指定することができます。要素間の間隔やブロック要素の余白を作るために指定します。 CSSは「セレクタ」「プロパティ」「値」の3つで指定します。 CSSとは？CSSの役割と基本的な書き方 「margin」と「padding」の違いは、要素の外側の余白を指定するか要素の内側の余白を指定するかの違いです。コンテンツ要素に対して外側の余白を作るには「margin」を指定し、内側の余白を作るには「padding」を指定します。 【2つの違い】 ・margin（マージン）：要素の外側の余白を指定 ・padding（パディング）：要素の内側の余白
この記事では、マイナスのmargin（ネガティブmarginとも言うらしいです）を使って要素を重ねる方法を説明します。 要素と要素を重ねたい場合、普通に思いつくのはposition: relative;とposition: absolute;を使う方法です。 しかし、それ以外にも引き出しを持っておくに越したことはありません。 positionを使うよりマイナスmarginの方が便利なこともあるので、参考にしてください。
2 min readA use case for CSS overflow-clip-margin, nested border radii With a mega viral tweet on nesting border radii and Andy mentioning it as well, I felt I should blog about my thoughts real quick! Here's one of the things I learned after requesting CSS get a nice way to draw nested radii: .the-trick-tldr { overflow: clip; overflow-clip-margin: content-box; } If you're like me, you saw that an
ひとりCSS Advent Calendar 2022 13日目です。 scroll-marginとscroll-paddingを使ってみます。 どんなときに便利か たとえばページ上部にヘッダーを固定させて、ページ内スクロールを実装したとき margin padding だとスクロールさせたときにヘッダーとかぶる 頻繁に遭遇する（またか〜…みたいな。） 考慮するの結構面倒だった scroll-padding を使うとヘッダー分の高さを考慮できる scroll-margin より scroll-padding のほうが使うことが多そう 作ってみる <header> <nav> <a href="#1">section1</a> <a href="#2">section2</a> <a href="#3">section3</a> <a href="#4">section4</a> </nav
はじめに 2023年の6月22日に開催された「Sendai Frontend Meetup #9」で「marginを使わずにWebサイト構築してみた」という内容でLTをしました。 もはや2年近く前の登壇なんですが、記事にしようと思ったけどめんどくさくなって放置した書きかけの記事が残ってました。Cursor使って技術記事を書くのに慣れたくてちょうど良かったので供養します。 CSSでレイアウトを組むとき、display: grid や display: flex の gap プロパティで余白を調整することが多くなりました。 それで、ふと「paddingとgapがあればWebサイト組めるのでは？」と半分ネタと半分本気で考えたのでやってみることにしました。 当日のLTで使ったスライドはこちら。 ルールと素材 ルールは以下 ＿人人人人人人人人人人人＿ ＞ marginを使わない ＜ ￣Y^Y^Y^Y
🎉 追記: Safariでもscroll-margin-topをスクロール位置の調整に使えるようになった caniuse iOS Safari 14.7〜、また macOS Safari 14.1〜でscroll-margin-topによる位置調整が問題なく動くようになりました！ 手元のiOS端末で試してみた限り、scroll-padding-topでもイメージ通りに動くようです（2021/09/24時点ではcaniuseに反映されていませんが…）。 Webサイトにおいてヘッダーを上部に固定したいというケースはよくあると思います。その際に問題になるのがページ内リンクが固定ヘッダーで隠れてしまうというものです。 Zennでは記事の表示ページでヘッダーを固定しており、なおかつページ内リンクの集合である目次を使っているため、この問題に対処しなければなりません。 scroll-margin-to
社内勉強会用 コンポーネントにmarginを持たせて良いのか、Spacer/Stackコンポーネントは有用なのか、比較検討する
要素マージンを含めた width / height を取得するのがちょいと大変だったのでメモ。 html { font-size: 16px; } .div { margin: 0.3rem 0.2rem; // 4.8px 3.2px 相当 border: .3rem solid #000; // 4.8px 相当 width: 6.2rem; // 99.2px 相当 height: 6.2rem; // 99.2px 相当 } margin を含んだ値で取得できる API は無いっぽい clientWith / clientHeight … border, margin を含まない Int 値 offsetWidth / offsetHeight … border は含み margin は含まない Int 値 getBoundingClientRect … border は含み ma
Miriam All browsers add an 8px margin on the body element – it’s part of the w3c-recommended default stylesheet which browsers generally use as a starting point for their own ‘user agent’ styles. But why 8px? Where does that come from?
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く