CSSのmargin: auto;の仕組みをおさらい、最近の実装で使用される中央配置やナビゲーションのテクニック

2023/11/16 42 users auto CSS おさらい ナビゲーション 実装

margin: auto;は非常に便利なCSSで、使用することも多いと思います。 そのmargin: auto;の仕組みをおさらいし、最近の実装で使用される中央配置のテクニックを紹介します。また、ナビゲーションでタイトル以外のリンクを右寄せに配置させるなど、便利なテクニックが満載です。 All About 'margin: auto' in CSS: Centeri... 続きを読む

ネガティブマージンの使いどころ

2023/09/07 16 users ネガティブマージン CSS 川上 使い 大抵

はじめに こんにちわ、フロントエンジニアの川上です。今回は自分も初めて見た時に使い方に戸惑ったCSSのネガティブマージンについて記事を書かせていただきます。 ネガティブマージンとは、CSSのmarginにマイナス値を設定することを指します。大抵は正の数をしてしますが、負の数を設定するとどうなるのでしょうか。 特... 続きを読む

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

2020/05/14 25 users パディング padding margin-bottom 実装

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

CSS Flexboxでナビゲーションを実装する時に役立つ、オートマージン（margin: auto;）の便利な使い方 | コリス

2020/01/21 14 users Flexbox コリス auto オートマ 論理プロパティ

ナビゲーションを実装する時、アイテムを左端に詰めて配置したいけど、1つだけ右端に配置したい、そんな時はFlexboxでオートマージン（margin: auto;）を使用すると簡単です。また、論理プロパティの効果的な使い方にも触れられているので、勉強になります。 How Auto Margins Work in Flexbox Flexboxにおけるオートマ... 続きを読む

CSS Flexboxで配置する時に知っておくと便利！オートマージン（margin: auto;）の仕組みと効果的な使い方 | コリス

2019/12/23 178 users Flexbox コリス auto プロパティ CSS

Flexboxも、margin: auto;も、CSSでよく使うプロパティです。 このFlexboxとオートマージン（margin: auto;）を組み合わせると、さまざまなレイアウト・配置ができます。例えば、ナビゲーションのアイテムを配置する際に、ロゴだけ左端に、検索を右端に、といった配置もオートマージンが活躍します。 オートマージン（ma... 続きを読む

いよいよ？まだまだ？IE11のサポート終了までのカウントダウンが始まる | コリス

2019/10/21 105 users コリス padding supports 足かせ 変数

Web制作において悩みの種の一つが、IE11のサポートです。 main要素に垂直方向のmargin, paddingが効かない、CSS Grid、変数、@supportsなど、IE11が足かせになって使用に躊躇している人も少なくないと思います。 IE11のサポート終了までのカウントダウンが始まりました。 IE11のサポート終了までのカウントダウン IE11は... 続きを読む

hrの使いやすそうなスタイリングいろいろ | かちびと.net

2019/07/01 39 users ＨＲ relative result net border

Result いろいろなhrのスタイルです。以前書いたCSSで作るhrのスタイルいろいろを小奇麗にした的な感じになっています css .hr_b {/*シャドウ付き*/ height: 8px; border: 0; box-shadow: 0 8px 8px -8px #666 inset; } .hr_c {/*フルワイド*/ position: relative; width: 100vw; margin: 10px 0 10px -50vw; left: 50%;... 続きを読む

marginの相殺の理解を深めよう | Stocker.jp / diary

2019/06/12 77 users 相殺 Stocker.jp diary 理解

この記事について この記事は、スマートフォン時代のWebデザインスクール や スマートフォン時代のWebコーディングスクール 初回体験レッスンなどをお手伝いして頂いている「やのう まり絵」さんによる寄稿記事です。 フリーランスの「やのう まり絵（@maYrie86）」と申します。普段、Webサイト制作を行っておりWebデザ... 続きを読む

レスポンシブ用にfont-size, margin, paddingなど、プロパティの値を一元管理できるSassの超軽量ライブラリ -SSCSS | コリス

2019/03/10 218 users padding ブレークポイント Sass コリス 一元

デスクトップ・タブレット・スマホなどの異なるスクリーンサイズに応じて設定したブレークポイントをベースに、font-size, margin, padding, positionなど各プロパティの値を一元管理できるSass...記事の続きを読む 続きを読む

CSSリセットの2019年用私流カスタマイズ方法 | コリス

2019/01/11 220 users コリス padding CSSリセット Eric Meyer

Webサイトを制作する際、CSSリセットを使用されている人が多いと思います。Eric MeyerのCSS Resetをはじめ、Normalize.css、Sanitize.css、そして最近ではReboot.cssが登場しました。 Eric MeyerのCSS Resetをベースに、marginやpaddingなどのスペースを上か下かのどちらかに統一できるようにカスタマイズされたCSSリセ... 続きを読む

VSCode拡張のLaTeX Workshopにコントリビュートした話 - Qiita

2018/12/05 12 users Qiita VSCode拡張 hover Tex ref

これは「TeX ＆ LaTeX Advent Caleandar 2018」の5日目の記事です。 （4日目は golden_luckyさん、6日目は @uwabami さん です。） VSCode拡張のLaTeX Workshopにコントリビュートしました。 MathJax でレンダリングされた数式が hover に表示される機能。 PDFビューアで横の margin を消す trim mode。 \ref や \eqref ... 続きを読む

margin, paddingなど、レスポンシブに対応したスペースをCSSで効率的に定義する方法 | コリス

2018/11/27 234 users padding Calc rem コリス レスポンシブ

Webページやスマホアプリのレイアウトに使用する、margin, paddingなどのスペースをCSSで効率的に定義する方法を紹介します。 em, remの相対的な単位を使い、calc()を効果的に活用し、拡張性やメンテナンス性にも優れたデザインシステムを構築できます。 Create your design system, part 4: Spacing by CodyHouse 下記... 続きを読む

CSS Flexboxとmargin: auto;の自動マージンがどのように相互作用するか、両端揃え・右寄せの実装テクニック | コリス

2018/08/23 68 users コリス auto ヘッダ 両端 ナビゲーション

CSS Flexboxも、margin: auto;も、よく使用していると思います。 しかしよく使用し、なんとなく知っているけれど、本当は理解できていないことがあるかもしれません。 CSS Flexboxとmargin: auto;の自動マージンがどのように相互作用するかを紹介します。ヘッダやナビゲーションなど、微調整が必要なレイアウトに役立つ... 続きを読む

CSSスニペット：SVGで作る非長方形なヘッダ画像いろいろ | かちびと.net

2018/07/07 13 users SVG relative CSSスニペット DDD ヘッダ画像

Result インラインに書いたSVGを画像に重ねる 背景と色を合わせれば簡単にユニークな形状のヘッダ画像を実装できる css .card { width: 32%; max-width: 100%; margin: 0 0 4rem; background-color: #ddd; } .card .wrap-image { position: relative; } .card .wrap-image img { width: 100%; height: auto; } .card .wr... 続きを読む

[CSS]要素を天地左右の中央に配置、最近主流になっている実装方法のまとめ | コリス

2018/03/02 301 users コリス CSS center text-align auto

子要素を親要素の左右中央に配置するのは、簡単です。 インライン要素は「text-align: center;」で、ブロック要素であれば「margin: 0 auto;」で中央に配置できます。 難しいのは上下、天地の中央です。 CSS Hackは使用せず、要素を天地左右の中央に配置する実装方法を紹介します。 Absolute Centering with CSS 下記は各ポイントを意訳したものです。... 続きを読む

デザイナーの考える「余白」とは何か書き下してみる - Qiita

2018/01/06 135 users Qiita 余白 主語 CSS デザイナー

この記事は... 「CSSで「余白」を制してデザイナーに好かれよう」 というとても素晴らしい，本当に有難い記事が上がっていたのを見て，じゃあデザイナー( 主語がでかい )は余白をどう考えているのかを，CSSを書いている一デザイナーの身から書き下してみよう、というものです． 「余白」の意味の書き下しと『 marginは下ではなく「上」で取る！ 』ことが多い理由の分析 「余白」において重要なのは以下の... 続きを読む

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

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

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

スタートアップのお金と指標入門講座：まとめ — Medium

2016/01/16 39 users medium MRR Revenue Profit 収益

スタートアップのお金と指標入門講座：まとめ この講座では Point Nine Capital が提供する SaaS KPI Dashboard のテンプレート を埋められるようになるための各種指標の解説を行っています。 以下の記事で詳しい解説をしています。 バーンレート 収益 (Revenue & MRR & SaaS Quick Ratio) 利益と利益率 (Profit & Margin) ... 続きを読む

スタートアップのお金と指標入門講座：利益と利益率 (Profit & Margin) — Medium

2016/01/11 80 users Revenue Profit バーンレート medium 収益

スタートアップのお金と指標入門講座：利益と利益率 (Profit & Margin) 今回は利益についてです。引き続き読者対象は Series A 以前の、CFO のいないスタートアップ を想定しています。その他に バーンレート (Burn Rate) 編 、 収益 (Revenue) 編 があります。 この連載は、 リンク先の管理表 を埋められるようになり、起業家と投資家がある程度同じ用語で話が... 続きを読む

CSSでblock要素を上下左右中央寄せにする、イマドキの方法。 | バシャログ。

2015/06/14 972 users バシャログ いまどき CSS block要素 上下左右中央

Backjoyを買ってみたらほんとに腰が楽なminamiです。 CSSで要素を上下中央寄せする方法は古くから色々と試されてきました。 今回は海外のサイトで知って目から鱗だった方法をご紹介します。 基本的な設定 上下左右中央寄せしたい要素に以下のCSSを設定します。 position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: a... 続きを読む

marginとline-heightによる"真の余白"について考える | SimpleIsm

2015/06/09 73 users コーダー line-height 余白 デザイナー ありがたい

まだまだWeb制作においては、デザイナーがデザインしたものをコーダーがコーディングする、というような流れが多いように思う。 デザイナーは1pxにもこだわる人たちなので、コーダーもそれに応えるように、きちんとデザイン通りに表現する。 余白の指示書などがあるとありがたい。例えば、「ここは20px、ここは40px、ここは60px」というような具合。デザイナーによっては、余白がそれぞれバラバラだったりして... 続きを読む

コピペでOK！WordPressのサイトマップを人気記事ランキングにする方法 - ゆめぴょんの知恵

2015/02/19 57 users ゆめぴょん コピペ WordPress 知恵 toc

WordPressの新テーマ・デザインに変更した時に、サイトマップについても人気記事順にしてみました。それに伴いずっと使ってたプラグインをまた1つ減らしました。そのカスタマイズ方法を紹介します。<style type="text/css"> .toc { margin: 18px 5px; background: #ffd; border: 1px solid #666; border-radiu... 続きを読む

CSSの簡略プロパティー - Weblog - Hail2u.net

2014/08/13 43 users Weblog hail2u.net ショートハンド CSS

CSSの標準仕様では一部のプロパティーに簡略(ショートハンド)プロパティーが用意されている。marginやbackground、fontプロパティーなどがそれ。うまく使うとCSSをかなり短くできるので、積極的に使いたいけど、なかなかの複雑さでそうもいかない。かといって機械的に処理するのも、CSSは人が簡単に書けることを想定して仕様が作られている節がある(根拠はない)のでまた難しい。 先日知ったCS... 続きを読む

CSSでblock要素を上下左右中央寄せにする、イマドキの方法。 | バシャログ。

2014/08/06 972 users バシャログ いまどき CSS block要素 上下左右中央

Backjoyを買ってみたらほんとに腰が楽なminamiです。 CSSで要素を上下中央寄せする方法は古くから色々と試されてきました。 今回は海外のサイトで知って目から鱗だった方法をご紹介します。 基本的な設定 上下左右中央寄せしたい要素に以下のCSSを設定します。 position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: a... 続きを読む

Java - 超簡単！xmlファイルの変更だけでできるAndroidのタブレット対応 - Qiita

2014/06/16 47 users Qiita Wantedly Java XML xmlファイル

はじめに 先日リリースした Wantedly のAndroidアプリでは、xml ファイルの変更のみでできる簡易なタブレット対応を行っています。その概要を紹介します。 タブレットでの画面レイアウトの問題点 スマートフォン向けに画面レイアウトの設計を行っていると、タブレットでアプリを起動したときに以下のような問題が出るケースがあります。 画像の縦横比率が崩れる 文字が小さい margin が小さい ... 続きを読む