タグ マージン
人気順 5 users 10 users 50 users 500 users 1000 usersCSSのwidth: 100%;のより良い代替手段として、stretchキーワードが実はかなり便利です
2024/11/21
249 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の単位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年度の労働者派遣法の施行により、派遣会社はマージン率公開を義務付けられました。 これは私たちが派遣会社に登録する際の判断材料にもなります。 続きを読む
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]マージンとパディングの使い分け方 -コンテナとコンテンツ間、コンテンツ内の要素間 | コリス
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... 続きを読む
スタイルシートの検証に便利！ページで使用しているプロパティがどのように使われているかが分かるChromeの機能拡張 -CSS Dig | コリス
2014/11/18
167 users
コリス
プロパティ
Chrome
ブロックごと
期待通り
表示しているWebページのスタイルシートとスタイルをブロックごとに解析し、ページで使用されているプロパティの一覧とそれぞれがどのようにどこに使われているかが分かるChromeの機能拡張を紹介します。 マージンが期待通りに...記事の続きを読む 続きを読む
[JS]ヘッダをスクロールしても上部に固定表示するだけでなく、途中で変更もできるスクリプト -Clingify | コリス
2013/07/22
153 users
jQuery
Clingify
コリス
ヘッダ
ヘタ
ヘッダをスクロールしても上部にぺたっと貼りつくように表示し、ブレイクポイントを設定するとその地点で貼りつける要素を変更するjQueryのプラグインを紹介します。 Clingify Clingify -GitHub Clingifyのデモ Clingifyの使い方 Clingifyのデモ スクリプトのページ自体がデモページになっています。 デモページ スクロール無しの状態では、ヘッダは上にマージンを... 続きを読む
統計屋はどこまで給料をもらうべきか - 統計学＋ε: 米国留学・研究生活
2013/06/30
134 users
給料
統計学
統計屋
米国留学・研究生活
対価
アカデミアでもビジネスでも統計解析のニーズは高くて、 データを分析して欲しいというような依頼は結構くる。 しかし、分析の対価としてどこまで給料をもらうべきなのか、 というのはなかなか難しい問題だ。 完全にビジネスとして外注して、博士レベルの統計屋に 分析をさせると、単価は１時間で１００ドル前後のようだ。 以前に、コンサルティング会社が時給７５ドルでそういった求人を 出していたから、マージンなどを考... 続きを読む
レスポンシブWebデザイン対応のCSSをカラム数やマージンを指定してダウンロードできる・34Grid - かちびと.net
2012/11/03
113 users
CSS
グリッドレイアウト
カラム数
スパマー
net
昨日に続き今日も似たような内容 ですが。グリッドレイアウトの レスポンシブWebデザイン対応の CSSフレームワークですが、こちら はグリッドのカラム数やマージン を指定できます。 どんどん便利になりますね。最近同じ内容の記事ばかり書いてて自分がスパマーみたいな気分になってきましたが気にしないようにします。 34Grid グリッドレイアウト x レスポンシブなフレームワーク。DL前にカラム数などを... 続きを読む
[JS]パネルをグリッドに沿ってドラッグ&ドロップで移動し、レイアウトを自由に構築できるスクリプト -Gridster | コリス
2012/08/01
108 users
jQuery
コリス
カラム
グリッド
Firefox
CSS3アニメーションのかっこいいエフェクトを伴って、パネルをグリッドに沿ってドラッグ&ドロップで移動し、レイアウトを自由に構築できるjQueryのプラグインを紹介します。 パネルはグリッドに沿って、カラムをまたいでも移動できます。移動した際に他のパネルは指定した縦列・横列数とマージンを維持します。 他のパネルも移動可能です。 対応ブラウザ Internet Explorer 9+ Firefox... 続きを読む
【CSS】実はこんなに便利！cssのセレクタ指定方法をちょっとだけ掘り起こしてみた | バシャログ。
2012/03/06
388 users
バシャログ
CSS
margin
Zoff
hakoishi
モニターを見つめる目に優しいメガネがZoffからも出る！しかも度付きOK、フレームも選べる！気になってます。hakoishiです。 さて、今回は実は便利なcssのセレクタ指定方法をちょっとだけ掘り起こしてご紹介。 直下要素だけ、とかセレクタ名が部分一致したら、とか実はかなり便利です！ 特定の要素の直下の要素に一括でマージンを設定 #container>* { margin: 0 10px; } 親... 続きを読む
asahi.com（朝日新聞社）：近距離きっぷもお得 駅前に自販機続々 大阪−神戸間 - 社会
2011/01/08
118 users
近距離
自販機
asahi.com
きっぷ
昼間特割きっぷ
ＪＲ立花駅前に設けられているきっぷの自販機＝兵庫県尼崎市、五十嵐写す 阪神間のＪＲの駅前に、近距離のきっぷを割安で買える自動販売機が続々と登場している。１２枚で１組の「昼間特割きっぷ」に目を付けたチケット業者がマージンをとってバラ売りするようになった。中には、わずか４台で年間約２億円を売り上げる業者も。「できれば正規料金で……」とこぼすＪＲ西日本だが、法的な問題はなく、駅前の「商売繁盛」になすす... 続きを読む
小2の息子がバカすぎるwwww - まめ速
2010/11/15
347 users
まめ速
wwww
息子
小２
VIP
1：以下、名無しにかわりましてVIPがお送りします：2010/11/14(日) 20:11:03.55ID:iTyf1ZjX0 息子「パパ、サンタさんに手紙書いたから出しといてくれ！」 俺「おう！(さて、なんて書いてあるかな…w)」 サンタさんへ クスリマスのプレゼントはウメボシトタククシつくるマーシンがほしいです おねがいします 息子…orz 2：以下、名無しにかわりましてVIPがお送りします：... 続きを読む
覚えて良かったCSSテクニック « zaru blog
2010/04/22
1447 users
CSSテクニック
ダミー
ダミーテキスト
時代
ここら
ここ最近、覚えてよかったなーと思ったCSSテクニックをまとめてみる CSSテクニックは時代とともに変わっていくけれど、ここ1年ほどスタメンレベルで使うCSSテクニックが絞られてきたので、ここらでちょっと個人的にもまとめておこうかと。 liボックス 幅：190px マージン：15px liボックス ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。 liボックス ダミー... 続きを読む
高級ワインの製造原価は実はたったの15ドル - My Life in MIT Sloan
2009/11/29
278 users
製造原価
高級ワイン
15ドル
ソファー
数字
ソファーに寝っころがりながら、今週号のWine Spectatorを読んでいて目が飛び出る。 "Why Luxury Wines Are Here to Stay"−何故高級ワインがまだあるのか−という記事で、 「高級ワインを皆がいつまでも扱うのは、安いワインよりずっとマージンが良いから」ということが書いてあるものだが、驚いたのは数字。 You might think that very expe... 続きを読む
「頭金」「契約金」と称する上乗せ代金をソフトバンクショップなどに取られてしまった場合、どうすればいいのか？ - GIGAZINE
2009/06/19
631 users
GIGAZINE
iPhon
頭金
タレコミ
カタログ
先日、このようなタレコミが届きました。 直営店やオンラインショップを除いたソフトバンクショップでは、「頭金」と称して、割賦料金と別に3000～7000円程度上乗せして請求することが多いです。その頭金はWホワイトなどのオプションをつけることで無料になったり、割引されます。 ところが、このような頭金はカタログなどには記載されておらず、ショップのマージンとして勝手に請求しているものです。 私はiPhon... 続きを読む
[CSS]全幅960+10pxをベースに汎用的に展開するグリッドシステム | コリス
2009/02/19
235 users
グリッドシステム
コリス
グリッド
CSS
10px
全幅970px（960+10px）の6カラムと12カラムのグリッドをベースにし、汎用的に展開できるように設計されたグリッドシステム「The Golden Grid」を紹介します。 The Golden Grid ベースとなる6カラムと12カラムのグリッドは、下記のようになっています。 6カラムの構成 1カラム：150px、マージン：10px 150*6+10*7=970px 12カラムの構成 1カ... 続きを読む
[CSS]IE6でよく遭遇する6つのバグとその解決方法 | コリス
2008/04/25
677 users
コリス
min-width
透過PNG
CSS
パク
CSS Trickのエントリーから、IE6でよく遭遇する6つのバグとその解決方法の紹介です。 IE CSS Bugs That’ll Get You Every Time ボックスモデルのバグ マージンが二倍になってしまうバグ min-width, min-heihgtと同等の指定 Stepdownバグ hover擬似クラスをa要素以外にも対応 透過PNGを透過表示に対応 ボックスモデルのバグ d... 続きを読む