タグ margin
人気順 5 users 10 users 50 users 500 users 1000 usersCSS 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は... 続きを読む
レスポンシブ用に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リセ... 続きを読む
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]要素を天地左右の中央に配置、最近主流になっている実装方法のまとめ | コリス
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でネガティブマージンを使わずに指定する巧い方法に、目からウロコです... 続きを読む
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... 続きを読む
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... 続きを読む
[CSS]パーセントで指定された正確なサイズが不明な要素を天地左右の中央に配置するスタイルシートのテクニック | コリス
2013/07/08
229 users
コリス
padding
CSS
パーセント
天地左右
天地左右の中央に配置したい要素のサイズが幅も高さもピクセルで指定されていれば、marginやpaddingで簡単に配置できますが、サイズ指定にパーセントを使用した要素だと表示サイズに依存されてサイズが分かりません。 そんなパーセントで指定されたピクセルでの正確なサイズが不明な要素を天地左右の中央に配置するスタイルシートのテクニックを紹介します。 Centering Percentage Width... 続きを読む
height:autoの特殊な仕様について | Webamb | ウェブアンブ
2013/07/05
591 users
Webamb
auto
height
padding
挙動
height:autoの特殊な仕様について 皆さんご存知のCSSプロパティ height は基本的にpaddingはmarginは含みません。 ただし、値がautoの時だけ挙動が違います。 今日はその辺りを書きたいと思います。 heightについて heightはコンテンツの高さを指定するプロパティです。 なのでpaddingなどを併記して指定する場合はpaddingの数値を引いて、heightを... 続きを読む
映画「マトリックス」の再現JavaScriptコードを読む - @togino77
2013/05/20
100 users
マトリックス
onload
映画
for
変換
1. はじめに 映画「マトリックス」で有名な，文字が落ちてくる映像を JavaScript で再現したコードがある．そのサイトはこちら． とてもコンパクトなコードなので，どういう処理をしているのか分かりにくい．そこで，少し読み解いてみた． 2. 読みやすいように変換 まず，もともとのコードを見てみると <body style=margin:0 onload="for(s=window.screen... 続きを読む
[CSS]読みやすさのポイントは縦のリズム、見出しのレベルがひと目で分かるようにスタイルするチュートリアル | コリス
2012/11/05
103 users
コリス
padding
ひと目
チュートリアル
CSS
読みやすいウェブページの大切なポイントの一つは、縦のリズムです。ウェブにおける縦のリズムはfont-size, line-height, margin(padding)の3つの要因からなっています。 この3つの要因とデザインを組み合わせ、見出しのレベルがひと目で分かるようにデザインされた見出しを実装するスタイルシートのチュートリアルを紹介します。 Heading Set Styling with ... 続きを読む
CSSのmarginが難しい : Web Design KOJIKA17
2012/08/27
1446 users
CSS
Web Design KOJIKA17
toggle()や変数、calc、:matchなど、今までにないCSSプロパティ、セレクタが提案・実装されて、CSS3, CSS4も楽しくなってきています。 border-radiusや、box-shadowなども、古いAndroidブラウザ以外なら、prefixなしで使える状況も増えてきました。 最新技術は、これから必要になってくるかもしれませんが、基本も大切です。 float や positi... 続きを読む
[CSS]セレクタの便利な使い方も学べる、一枚の画像で写真を重ねたように見せるスタイルシートのテクニック | コリス
2012/03/14
165 users
セレクタ
コリス
padding
stackone
CSS
Demo 1 まずは、HTMLから。 HTML img要素をdiv要素で内包したシンプルなHTMLです。 divにclassを付与するのがポイントです。 <div class='stackone'> <img src="image.jpg" /> </div> デモでは下記の画像を使用しました。 CSS CSSはステップごとに、説明します。 まずは、margin, paddingをリセットし、bo... 続きを読む
【CSS】実はこんなに便利！cssのセレクタ指定方法をちょっとだけ掘り起こしてみた | バシャログ。
2012/03/06
388 users
バシャログ
CSS
Zoff
hakoishi
マージン
モニターを見つめる目に優しいメガネがZoffからも出る！しかも度付きOK、フレームも選べる！気になってます。hakoishiです。 さて、今回は実は便利なcssのセレクタ指定方法をちょっとだけ掘り起こしてご紹介。 直下要素だけ、とかセレクタ名が部分一致したら、とか実はかなり便利です！ 特定の要素の直下の要素に一括でマージンを設定 #container>* { margin: 0 10px; } 親... 続きを読む
CSSをシンプルに書くことができるLESS使ってみた | webOpixel
2011/12/13
181 users
less
border
webOpixel
auto
階層
CSSはシンプルなのでとてもわかりやすい言語ではありますが、その分サイトが肥大化していくとメンテナンス性が悪くなりますね。 LESSを使えばプログラム的な書き方ができるので、ムダなくしやすくなるらいしいです。 ネスト（階層）化できる たとえばこんなCSSがあります。 css div.section { width: 500px; margin: 0 auto; border: solid 1px ... 続きを読む
[CSS]たった二行で、さまざまなカラムを設定するグリッドのフレームワーク | コリス
2010/11/14
271 users
コリス
Row
カラム
フレームワーク
グリッド
たった二行のシンプルなスタイルシートで、さまざまなサイズのカラムを設定するグリッドのフレームワークをを紹介します。 .row { display:table; width:960px; margin:0 auto } .cell { display:table-cell; vertical-align:top; padding-left:10px } HTMLもシンプルでdiv要素を使うだけです。... 続きを読む
少しのコードで実装可能な20のCSS小技集 | Webクリエイターボックス
2010/04/14
2024 users
実装
Webクリエイターボックス
CSS小技集
コード
少し
CSSハックに続き、このCSS小技集も私のブックマークにずらりと並んでいたので、整理も兼ねて記事にしてみました。CSSのお勉強を始めたばかりの頃にブックマークしておいたものも多数。。ということで初心者さんからベテランさんまで参考にしてみてください！ サンプル まずはCSS基礎編 1. divを中央揃えにする ほとんどのサイトが基準となるdivを画面の中央揃えに設定しています。左右のmarginをa... 続きを読む
1px欠けの角丸ボックスをCSSだけで作る方法｜web bibo
2009/12/21
442 users
CSS
outer
rounded
inner
div
スタイルシートだけで1px欠けの角丸を作る方法です。この角丸を使用することでシャープすぎるボックスを少し柔らかい印象にすることができます。 HTML 下記の通りHTMLを記述します。 <div class="outer"> <div class="inner">1px rounded corners</div> </div> ボックスにボーダーを付けない場合 .outer { margin: 0p... 続きを読む
[CSS]ネガティブマージンの理解を深め、活用するテクニック集 | コリス
2009/07/28
563 users
コリス
ネガティブマージン
CSS
テクニック集
テクニック
スタイルシートのmarginで使用する「ネガティブマージン（マイナスマージン）」について理解しておくべきこと、ネガティブマージンを使用したテクニックなどをSmashing Magazineから紹介します。 The Definitive Guide to Using Negative Margins 1. ネガティブマージンの理解 2. ネガティブマージンの使い方 3. ネガティブマージンのテクニッ... 続きを読む
一工夫でページのクオリティをアップするCSSとJavaScriptのソリューション集 | コリス
2009/07/07
346 users
コリス
CSS
クオリティ
ソリューション
一見
Silverback Giveaway 一見、背景画像をCSSかJavaScriptで配置したように見えますが、CSSで普通に配置されたソリューションです。 テキストやリストが画像に重ならないように、marginを設定します。 HTML Contest Details ...the introductory paragraph... ...various bullet points went he... 続きを読む
CSS - dtをfloatする場合の注意点 | Try | d-spica
2008/05/12
506 users
TRY
padding
Recent
border
CSS
dtをfloatし，margin, padding, borderなどをあてる場合の注意点です。 Tried at 2008-05-12 まず，マークアップは次の通り <dl class="recent"> <dt>2008-05-12</dt> <dd>ページ5を更新しました。テキストテキストテキスト。</dd> <dt>2008-05-10</dt> <dd>ページ4を更新しました。テキストテ... 続きを読む
[CSS]マージンとパディングの使い分けをおさらい | コリス
2008/03/18
269 users
パディング
padding
border
コリス
マージン
CSSnewbieのエントリーから、ボックスモデルのマージン(margin)とパディング(padding)の利用シーンにおける違いを紹介します。 When to Use Margins and Padding マージン(margin)を採用する場合 パディング(padding)を採用する場合 ブラウザによる問題 マージン(margin)を採用する場合 borderの外側にスペースが必要な場合。 ス... 続きを読む