CSSのwidth: 100%;のより良い代替手段として、stretchキーワードが実はかなり便利です

2024/11/21 206 users width CSS Calc かなり 左右

幅いっぱいの要素から左右のマージンを引きたいときに、こういうCSSを使用すると思います。width: calc(100% - 48px); 便利なCSSですが、マージンを計算する必要があり、デザインの変更があった際はCSSも変更する必要もあります。 そこでstretchキーワードを使用すると、便利です。要素はオーバーフローせずに使用可能な... 続きを読む

私がマージンをできるだけ使いたくない理由 - Qiita

2024/09/19 192 users Qiita margin CSS 理由 皆さん

はじめに 突然ですが、皆さんはCSSのmargin（マージン）をよく使いますか？ 私はマージンを多用しないように気をつけています。というより、あまりマージンと関わりたくないと思っています。今回の記事では、「どうして避けているのか」について自分なりの考えをまとめてみたいと思います。 あくまでも個人の意見なので... 続きを読む

iOSアプリに実装されたUI要素のフレームやマージンを手軽に確認できるツールを作る - クックパッド開発者ブログ

2023/09/14 10 users iOSアプリ UI要素 フレーム ツール

続きを読む

UIのフォントサイズ、マージン、コンポーネントで黄金比や白銀比によるバリエーションを簡単に作成できるツール -Proportio

2023/06/13 154 users フォントサイズ コンポーネント パディング 白銀比 黄金比

UIデザイン用にフォントやアイコンのサイズ、スペース、角丸、シャドウ、パディング、コンポーネントなどで比例スケールを使用したバリエーションを簡単に作成できるオンラインツール（ローカルも可）を紹介します。 たとえば、黄金比でフォントサイズを設計したり、白銀比でコンポーネントを設計したり、ということがで... 続きを読む

CSSの知っておくと便利なフクロウセレクタの使い方！ 要素を積み重ねる時のマージンにかなり便利です

2023/02/28 88 users CSS 要素 かなり 3行 使い方

兄弟要素を積み重ねる時、垂直マージンをどのように実装していますか？ 要素を積み重ねる時のマージンは、フクロウセレクタ（* + *）を使うと簡単です。さらに、>を追加することで、マージンが再帰的に与えられるのを防ぎます。たった3行のCSSで積み重ねる時のマージンを管理できる、フクロウセレクタの効果的な使い方を... 続きを読む

CSS Gridで実装すると簡単！ コンテンツは中央配置、最大幅・全幅・ちょい広めのレイアウトを実装できるテンプレート

2022/12/06 24 users 全幅 テンプレート CSS flexbox CSS Grid

レイアウトにCSS Flexboxは使用しているけど、CSS Gridはこれから。そんな人にお勧めのWebページでよく使用されるレイアウトを簡単に実装できるCSS Gridのテンプレートを紹介します。 レイアウトはコンテンツを中央寄せに配置し、左右のマージンを自由に設定できます。たとえば、テキストには最大幅、画像には全幅、目立... 続きを読む

CSSの単位px、em、remはどれをどこで使用するのがよいか、ピクセルとアクセシビリティにおける意外な真相

2022/06/07 387 users rem height font-size width ピクセル

CSSの単位px、em、remは、どれをどこで使用するのがよいか。 font-sizeの値にはどの単位を使用していますか？ ほかにもメディアクエリを定義する時、マージンを定義する時、widthやheightを定義する時、使用する単位はアクセシビリティに配慮する必要があります。 The Surprising Truth About Pixels and Accessibility ... 続きを読む

なぜ初心者は「UIコンポーネントにマージンをつけるのか」初心者が解説します

2021/12/01 7 users UIコンポーネント Twitter 言及 実装 初心者

Twitterなどで、よく「UIコンポーネントにマージンをつけるな」という言及をよく目にします。 以下の記事など、とても分かりやすく参考になるかと思います。 しかし、私はそれらの言及・記事などを見た上で(おそらく)UIコンポーネントにマージンを持たせる実装を行なってしまっていました。 熟練者から見ると、「UIコン... 続きを読む

レスポンシブ対応にメディアクエリなしで、CSSの関数で定義！border-radiusの値を変えるテクニック

2021/10/14 36 users border-radius ビューポート 矩形 CSS 関数

border-radiusの値をデスクトップとスマホで変える、例えばビューポートが大きくてマージンがある場合は8pxで角丸にし、ビューポートが小さくてマージンがない場合は0pxで矩形にする。 メディアクエリで簡単に実装できると思うかもしれません。しかし、ビューポートのサイズが小さく、マージンがある場合に8pxの角丸にな... 続きを読む

Tailwind CSSのカスタマイズ方法を解説、基本的な機能を維持しつつ、スタイルを変更・追加するテクニック | コリス

2021/05/19 11 users コリス パディング ユーティリティクラス フレームワーク 解説

Tailwind CSSはユーティリティクラスのフレームワークですが、すべてのスタイルは用意されていません。カラーを増やしたり、ブレイクポイントを増やしたり、マージンやパディングの値を増やしたり、カスタマイズ方法を紹介します。 また、Tailwind UIのUIコンポーネントをそのまま使用すると、似たデザインになってしま... 続きを読む

CSSのmargin-block-start, margin-inline-endなど、論理プロパティの使い方を徹底解説 | コリス

2021/03/25 31 users margin-left Flexbox コリス プロパティ

CSSでマージンを与える際に、margin-left, margin-rightのように物理プロパティを使用している思います。もちろん問題はないですが、CSS GridやFlexboxで使われている論理プロパティを使用する機会も増えてくると思います。 CSSの論理プロパティの基礎知識、inlineとblockの仕様、論理として使用できるプロパティ、論理... 続きを読む

Reactの 余白上手に スタイリング

2021/02/18 27 users React padding 余白 Flexbox stack

最近余白の実装について見直す機会があったので、考えをまとめてみました。 TL;DR Grid なら grid-gap flexbox なら flex-gap にしたい(が、safari が対応してないので記事執筆時点では使えない) 適切な padding を指定する 複数の同一のマージンには Stack、それ以外には Spacer コンポーネント 前提: 子コンポーネント... 続きを読む

垂直方向のマージンにはmargin-topを優先的に使う理由 - Yuhei Yasuda

2021/01/26 276 users margin-top margin-bottom 末尾 要素

margin-bottomではなくmargin-topを使う派である旨をツイートしたら理由を尋ねられたので、それに対する回答です。大きくは次の3つです。 末尾の要素の存在が任意である場合が多いため Stackレイアウトとの取り合わせやすさのため 隣接セレクターを使った場合分けができるようにするため CSS、基本コンポーネントの上に... 続きを読む

CSSにおけるマージンの相殺を徹底解説 | コリス

2021/01/21 28 users コリス パディング 相殺 CSS ボーダー

CSSにおけるマージンの相殺は何か、どういう条件で起こり、どのように相殺されるのか、また相殺を回避する方法などを紹介します。 下と上のマージンの相殺は単純ですが、マージン値が異なる場合、入れ子の場合、複数の場合、同方向の場合、負のマージンの場合、パディングやボーダーがある場合など、実装に伴うさまざま... 続きを読む

Ernest Croft on Twitter: "Apple税の30%が高いって言ってる人思ってる人、基本的にマージンがぜんぶ利益として懐に入るものだと思っている節があって、この週末それをデバンクする記事でも書こ

2020/08/31 231 users テキトー ツイット 利益 Apple税 時間

Apple税の30%が高いって言ってる人思ってる人、基本的にマージンがぜんぶ利益として懐に入るものだと思っている節があって、この週末それをデバンクする記事でも書こうかと思っていたんだけど、酒をかっくらって時間を不意にしてしまったので、テキトーにツイットに書き散らすことにする。 続きを読む

CSS 最近のWebページやアプリのレイアウトに適した、ラッパーの実装テクニックを徹底解説 | コリス

2020/07/09 37 users コリス パディング ラッパー CSS Flexbox

最近のWebページやアプリに適した、ラッパーの実装テクニックを紹介します。 ラッパーとはコンテンツを読みやすい幅に包むもので、CSSでのラッパーの実装、マージンやパディングの追加、中央揃え、ラッパーのバリエーション、FlexboxやCSS Gridとの組み合わせ方など、レイアウトの実装テクニックが満載です。 Styling La... 続きを読む

CSSにおけるスペースの与え方、paddingやmarginなどを使った実装テクニックを詳しく解説 | コリス

2020/05/14 25 users パディング padding margin コリス SPA

Webページやスマホアプリの実装で悩ましいのが、スペースの与え方です。マージンとパディングをどう使うか、margin-topとmargin-bottomのどちらにすべきか、グリッド間のスペース、表示デバイスによって異なるスペース、大規模プロジェクトにおけるスペースの管理方法など、CSSにおけるスペースについて解説します。 Spa... 続きを読む

CSSのプロパティ値「auto」を使ったテクニックのまとめ、マージンやサイズや配置やFlexboxなど | コリス

2020/04/14 22 users Flexbox コリス Grid auto height

CSSの「auto」は非常に便利な値で、マージンやサイズ（width, height）や配置などのプロパティに使用することができます。「auto」がどのように機能するのか、「auto」を活用したテクニックを紹介します。 自動マージン、autoを使った要素のサイズ指定、中央配置に使用するautoの仕組み、FlexboxやGridで知っておくと便... 続きを読む

CSSもこれで簡単に！テキストの左右に水平線を引くスタイルシートの新テクニック | コリス

2020/03/04 33 users div要素 コリス CSS flexbox デモ HTML

div要素はひとつだけ、CSS Flexboxを使用してテキストの左右に水平線を引くスタイルシートのテクニックを紹介します。 HTMLは非常にシンプルで、テキストと水平線はレスポンシブ対応で、カラーやサイズや左右のマージンも簡単に変更できます。 div要素ひとつだけで実装する テキスト付きの区切り線 まずは、最終のデモを... 続きを読む

ソフトバンクＧが5000億円借り入れへ、国内外16金融機関から - Bloomberg

2020/02/19 6 users Bloomberg 株主 形態 手法 ローン

今回の借り入れはマージン・ローンと呼ばれる手法で、ソフトバンクＧが保有するソフトバンク株31億8292万株のうち、９億5300万株を100％子会社の日の出１号に貸し出し、日の出１号が金融機関から借り入れる形態を取る。 ソフトバンクＧは、同社株を30億ドル（3300億円）近く取得した物言う株主の米エリオット・マネジメ... 続きを読む

派遣会社のマージン率（ピンハネ率）はどのくらい？大手を一覧で比較 | 派遣会社カタログ

2019/11/09 115 users マージン率 ピンハネ率 大手 比較 派遣会社

派遣会社もビジネスなので、利益を出すためにもこの「マージン」が大きく関係します。 また、平成24年度の労働者派遣法の施行により、派遣会社はマージン率公開を義務付けられました。 これは私たちが派遣会社に登録する際の判断材料にもなります。 続きを読む

デザインを何もしらないエンジニアがDailyCocoda！を3ヶ月かけて完走したので、1日目の自分にアドバイスする その１ 概要編 - Qiita

2019/10/30 90 users Qiita パディング エンジニア 概要編 デザイン

デザインを何もしらないエンジニアがDailyCocoda！を3ヶ月かけて完走したので、1日目の自分にアドバイスする その１ 概要編 ３ヶ月やるとどうなるか Daily Cocoda 1日目 初心者丸出しのデザインですね。丸アイコンの画像が大きすぎたり、ピンクの背景色と白の文字色があってなかったり､パディングとマージンがおかしかっ... 続きを読む

中国で「5次請け」の殺し屋が手抜きし事件発覚 報酬安く殺人でっち上げ - ライブドアニュース

2019/10/28 13 users 殺し屋 AFP 下請け 有罪判決 殺人

【AFP＝時事】中国で、次々と殺人の仕事を下請けに出して結局遂行しなかった「殺し屋」5人が、依頼者とともに有罪判決を言い渡され、収監された。 殺人を実行してくれることを期待して下請けに回された仕事は、そのたびにマージンを抜き取られ、別の殺し屋に次々と手渡されていった。 ところが、最後となる5次請けとなっ... 続きを読む

UIコンポーネントにはマージンをつけるな！絶対にだ！！ - Qiita

2019/09/03 131 users Qiita UIコンポーネント

.button { display: block; margin: 50px auto 0; padding: 8px 20px; border: solid 2px #ddd; border-radius: 10px; font-size: 16px; } See the Pen button_01 by Otsuka Yuhi (@boltkeep) on CodePen. パット見、いい感じのボタンです。 しかし、このボタンには一点重大な欠点があります。 それは、このボタンは必ず... 続きを読む

[CSS]見出し、本文、リストなど、文字周りをrem指定で簡単に設計できる便利なオンラインツール | コリス

2018/08/03 94 users コリス SCSS 小見出し 行間 CSS

Webデザインで使用する見出し、小見出し、本文、リストなどフォントの基本サイズ、行間、それぞれのマージンなど、文字周りのデザインを実際のブラウザで確認しながら設計できる便利なオンラインツールを紹介します。 ルート要素を最初に定義して、それを元に見出しや本文を設計するので、rem指定も可能。また、SCSSもサ... 続きを読む