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（マージン）をよく使いますか？ 私はマージンを多用しないように気をつけています。というより、あまりマージンと関わりたくないと思っています。今回の記事では、「どうして避けているのか」について自分なりの考えをまとめてみたいと思います。 あくまでも個人の意見なので... 続きを読む

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

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

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

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

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

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

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 ... 続きを読む

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

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

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

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

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

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

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

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

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

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

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

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

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もサ... 続きを読む

Webデザインで使う数値をすぐに算出！マージンやフォントサイズのバリエーションを導き出すオンラインツール | コリス

2017/09/15 87 users グリッド 見出し コリス レイアウト フォントサイズ

レイアウトのベースになるグリッドのサイズ、パネルやカードやボタンなどのサイズ、要素間に与えるスペースの段階ごとのサイズ、見出しや本文などテキストの階層ごとの文字サイズなど、Webデザインを設計する際に必要となる数値をサイ ...記事の続きを読む 続きを読む

[CSS]マージンの相殺を正しく理解しておこう！相殺はいつ起こるのか、相殺を回避するテクニック | コリス

2017/07/11 78 users コリス margin-bottom margin-top

まずは、クイズ。 Aのdiv要素には「margin-bottom: 10px;」を、Bのdiv要素には「margin-top: 30px;」を指定した場合、それらを垂直に配置するとマージンはいくつでしょうか？ What's the Deal with Collapsible Margins? これは「マージンの相殺（Collapsing Margins）」と呼ばれるものです。 このマージンの相殺と... 続きを読む

[CSS]ワンランク上に！Webページのレイアウトを美調整するスタイルがまとめられたスタイルシート -fractures | コリス

2017/07/10 94 users コリス パディング Grid Flexbox 矩形

float, flexbox, gridのレイアウトでよく使うスタイル、マージンやパディングを調整するスタイル、矩形・角丸・円形を実装するスタイル、幅や高さを調整するスタイル、要素を配置するdisplayやpositio ...記事の続きを読む 続きを読む

[CSS]レイアウトでテキストは幅一定で、画像だけ幅いっぱいに表示させるスタイルシートのテクニック | コリス

2017/05/17 91 users float コリス CSS レイアウト テクニック

テキストはスマホでは両横にマージンを保持しつつ幅いっぱいに、デスクトップでは指定した幅で表示し、常に画像だけ幅いっぱいに表示させるレイアウトを実装するスタイルシートのテクニックを紹介します。 floatやflexboxだ ...記事の続きを読む 続きを読む

[CSS]マージンとパディングの使い分け方 -コンテナとコンテンツ間、コンテンツ内の要素間 | コリス

2017/03/09 140 users パディング padding margin コリス ウロコ

CSSでスペースを与える時、マージン(margin)とパディング(padding)はどのように使い分けをしていますか？ Webサイトやスマホアプリで実際に使用されるUIコンポーネントを例に、マージンとパディングの使い分け方を紹介します。 下記のように3つの要素間にある2つのマージン指定も、first-childやlast-childでネガティブマージンを使わずに指定する巧い方法に、目からウロコです... 続きを読む

マージンやパディングでもう悩まない、モジュール式WebデザインにおけるHTMLとCSSの新しい実装方法 | コリス

2017/01/11 599 users パディング アトミック コリス ロジック CSS

Webページを制作にする時に、マージンやパディングをどのようにつけるか悩むことがあります。2カラムの隙間は、左パネルの右マージンorパディングなのか、右パネルの左マージンorパディングなのか。 Web制作の今までの考え方がきっと変わる、モジュール式のアトミック デザインにおけるHTMLとCSSの実装のロジックを紹介します。 Learning from Lego: A Step Forward in... 続きを読む

これで無料とはすごい！Mac, Win, Linux対応、デザインの指示書やスタイルガイドを簡単に作成・共有できる -Zeplin | コリス

2015/08/12 715 users Zeplin コリス フォント 要素 有料

デザインの指示書やスタイルガイドを作成するのは、なかなか時間がかかりますよね。 使用している要素のサイズやマージンやカラーやフォントなどの情報を自動で取得したり、コメントを添えたり、指示書やスタイルガイドをプロジェクトのメンバーと共有できる「Zeplin」を紹介します。 1プロジェクトまで完全無料、2つ以上から有料ですが、機能制限などは一切ありません。 Zeplin Zeplinの特徴 Sketc... 続きを読む

[CSS]フッタの表示をコンテンツ量が少ない時は最下部に固定、多い時は成り行きにするシンプルなテクニック | コリス

2015/05/11 131 users ブッダ footer コリス Body CSS

デモページ（コンテンツ量が多い時） 実装 HTML 最小限の構成はこんな感じです。 コンテンツはmain要素でなくても平気です。コンテンツとフッタだけあればOK。 <body> <main> メイン コンテンツ </main> <footer> フッタ </footer> </body> CSS デモではフッタの高さを5emに設定しており、それに合わせてbodyにマージンを設定します。 // ST... 続きを読む

CSS Transitionを使ったスムーズにスクロールしてトップに戻る機能 - Weblog - Hail2u.net

2015/05/10 74 users Weblog hail2u.net CSS body要素 ロゴ

前に作ったスクロールした時に位置固定のロゴをトップに戻る機能にすり替えるものを少し手直しして再導入した。今回はスムーズにスクロールさせようかと色々考えていたが、やはりJavaScriptでscrollTo()を制御するのはコストが高い。CSSならどうだと試行錯誤したところ、どうやらbody要素への負のマージンをCSS Transitionで滑らかに変化させれば良いようだ。 View Demo: S... 続きを読む

スタイルシートの検証に便利！ページで使用しているプロパティがどのように使われているかが分かるChromeの機能拡張 -CSS Dig | コリス

2014/11/18 167 users コリス プロパティ Chrome ブロックごと 期待通り

表示しているWebページのスタイルシートとスタイルをブロックごとに解析し、ページで使用されているプロパティの一覧とそれぞれがどのようにどこに使われているかが分かるChromeの機能拡張を紹介します。 マージンが期待通りに...記事の続きを読む 続きを読む

スタイルガイドや指示書に便利！エレメントやマージンのサイズを書き出してくれるPhotoshopのスクリプト -Size Marks | コリス

2014/10/30 80 users コリス ink エレメント Photoshop スクリプト

エレメントやマージンなど、指定した箇所のサイズを新規レイヤーに書き出すPhotoshopのスクリプトを紹介します。 個人でも商用でも無料で利用でき、ライセンスはMIT licenceです。 Size Marksを使ってるアニメーション（偶然両方とも173pxになってびっくり！） 以前紹介したInkも同様にサイズを書き出してくれますが、ベクターとテキストのデータのみです。エレメントがベクターならIn... 続きを読む

これ便利でいいね！WebページのUIエレメントのサイズやマージンが簡単に計れるChromeの機能拡張 -Dimensions | コリス

2014/09/16 74 users WIn Mac対応 コリス 画像 UIエレメント

Win/Mac対応、Chromeで表示したWebページのUIエレメントのサイズやマージンが簡単に計れてしまう無料の機能拡張を紹介します。 Webページだけでなく、画像をChromeで表示すれば画像も計ることができます。 ...記事の続きを読む 続きを読む

right: 100%か負のマージンか - Weblog - Hail2u.net

2013/12/12 80 users Weblog hail2u.net Right 拡充 CSS

これまでCSSにはレイアウト方法があまりなかった。これからはFlexible Box LayoutやMulti-column Layout、Grid Layoutを始め、positionプロパティーに使える値の拡充などもあり柔軟に行えるようになるだろうが、それはけっして既存のレイアウト方法が不必要になるということではない。選択肢が増えると受け止めるべきだ。例えばright: 100%や負のマージン... 続きを読む

[JS]ヘッダをスクロールしても上部に固定表示するだけでなく、途中で変更もできるスクリプト -Clingify | コリス

2013/07/22 153 users jQuery Clingify コリス ヘッダ ヘタ

ヘッダをスクロールしても上部にぺたっと貼りつくように表示し、ブレイクポイントを設定するとその地点で貼りつける要素を変更するjQueryのプラグインを紹介します。 Clingify Clingify -GitHub Clingifyのデモ Clingifyの使い方 Clingifyのデモ スクリプトのページ自体がデモページになっています。 デモページ スクロール無しの状態では、ヘッダは上にマージンを... 続きを読む