タグ「マージン」 - はてブログ

タグマージン

新着順人気順 5 users 10 users 50 users 100 users 500 users 1000 users

(1 - 25 / 78件)

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

2024/11/21 184 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 ... 続きを読む

レスポンシブ対応にメディアクエリなしで、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要素ひとつだけで実装するテキスト付きの区切り線まずは、最終のデモを... 続きを読む

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

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. パット見、いい感じのボタンです。しかし、このボタンには一点重大な欠点があります。それは、このボタンは必ず... 続きを読む

(1 - 25 / 78件)

次の25件 »