理解しておきたい、CSSによるインラインレイアウトの仕組み（inline-block編）Inline Layout─Frontrend Conference 高津戸壮（株式会社ピクセルグリッド） この記事は、Frontrend Conferenceのセッション「Inline layout」でお話させていただいた内容を基に、連載記事（全4回）として書き起こしたものです。今回は第4回目、最終回です。 背景画像でリストのビュレットを配置した場合の問題 今回は、前回までの内容を踏まえ、主にインラインブロックについて見ていきます。まずは、以下のようなリストを「HTMLとCSSで作りたい」と思います。この時、リストのビュレットはオリジナルの画像にしたいです。 こんな時、背景画像を利用し、以下のような方法でこの見栄えを再現するという方は多いでしょう。筆者も昔からずっと、この方法で実装してきました。
何気にずっと頭を悩ませてた問題。display: inline; や display: inline-block; で要素をインライン化したときに、改行が半角スペースになり、隙間となる問題。あれがスッキリ解消できました。 HTMLでこんな感じ↓にしてる人は必見です。 <ul><li>list item</li><li>list item</li></ul> <ul><li> list item </li><li> list item </li></ul> <ul><!-- --><li>list item</li><!-- --><li>list item</li><!-- --></ul> 隙間を消す方法として、多く紹介されてきた方法が3つあります。 親要素に font-size: 0; を指定し、子要素のフォントサイズをpxなどの絶対単位で指定する（%やemなどの相対単位は不可） 親要
To earn via Google AdSense login on your website, you need to follow a few initial steps: Let’s Start: Google AdSense Login Guide In the fast-paced digital era, monetizing your website has become a top priority for content creators and website owners. Google AdSense offers a lucrative opportunity to generate revenue through advertisements displayed on … Read more
Get affordable and hassle-free WordPress hosting plans with Cloudways — start your free trial today. I’ve seen this come up a couple of times lately on Twitter and then an interesting Dabblet so I figured it would be an important thing to document. Here’s the deal: a series of inline-block elements formatted like you normally format HTML will have spaces in between them. In other words: <nav> <a h
週末に @nagomu さんと @terkel さんが YUI grids.css や stacklayout.css で指定している word-spacing と letter-spacing の値はなんでこの値なんだろうね、という話をされていて、おもしろそうだったので、数字の原因を探ったり、いろいろなブラウザーでチェックしてました。 いろいろなブラウザーでチェックをしている時に、以前書いた記事 display:inline-block; を使うで紹介していた CSS ではブラウザーごとに微妙な誤差があったので、修正版を書いてみました。 以前書いていたコード .parent { letter-spacing: -.40em; } .child { letter-spacing: normal; vertical-align: top; display: inline-block; /di
IEを含めた最近のブラウザでは珍しくなくなったinline-block。 このinline-blockを利用する場合に発生する「隙間」を改善する方法です。 原因は改行コード 下記のようなHTMLを用意しました。 リストタグを使ったインラインブロックを実現しようとしています。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>inline-block
CSSにおいてマージンの相殺される際の基本的な規則は下記の通り： 水平方向（左右）のマージンは相殺されない（マージンの相殺が行われるのは垂直方向のみ）。 パディング、ボーダーによって分離されず隣接するマージンにおいては、親ボックスとの間でも相殺が生じる。 floatされたボックスマージンは相殺されない。 overflow属性の値に"visible"以外が指定された要素は、その子要素とのあいだでマージンを相殺しない。 絶対配置（position:absolute;）されたボックスのマージンは相殺されない。 inline-block要素（display:inline-block;と指定されたボックス）のマージンは相殺されない。 クリアランスが与えられた要素の上のマージンは相殺されない。 ルート要素のマージンは相殺されない。 隣接するマージンがすべて正の値の場合は、もっとも大きいマージンの値が適
http://jsdo.it/kanonji/1Hm4 こんな感じで、縦横100pxの正方形を、縦横10px空けながらinline-blockで配置したい場合のcssです。ネガティブマージンを使うんですが、ちょっと注意点もあったので、やり方とその注意点をメモしておきます。 やり方 <h2>Target</h2> <div id="target"> <ul> <li></li ><li></li ><li></li ><li></li ><li></li ><li></li ><li></li ><li></li ><li></li> </ul> </div> htmlはこんな感じ。配置したいブロックをdiv要素で作って、そこに配置するul/li要素を入れます。inline-blockのマークアップは、改行やスペースを入れるとテキストノードが入る事で、cssでコントロールできない隙間が出来ち
リストを横並びにした時の空白 リストをdisplay:inline;などで横並びにすると、リストとリストの間に空白ができちゃうんですよね。これを知らないと、paddingを0にしたりとかmarginを0にしたりとか、そういうのでがんばろうとしてしまうんだけど、実はそうじゃなくてHTMLの書き方によって(改行)空白できちゃうんですよね。 これをdisplayプロパティで横に並べる時、どの方法なら隙間なく並べられるか！他の方法とかを含めて検証してみましょう。 いろいろ検証してみる ネタ元の方法が実際にどうなのか、そして、他の対処法も含めて検証してみます。 尚、今回の検証では、IE6、IE7、IE8、Firefox2、Firefox3.0、Opera9.6、Safari、Chromeで検証しました。 １、単純に改行した場合 ■HTML <ul> <li>サンプル</li> <li>サンプル</l
inline-blockとは、まさに、その名の通り、インライン要素とブロック要素の中間的なdisplayプロパティの値です。display:inline-blockが指定された要素は、文中にブロック要素をボコっと突っ込んだような形で描画されます。前後で改行されないブロック要素のような存在です。Firefox3で正式にサポートされたみたいです。使用に関して問題となるのは、これに対応していないIE7,IE6とFirefox2なのですが、どうにか頑張ると、ほぼ同様の効果を得ることができます。最近使う機会があったので、ソース解説と併せて紹介します。 まず、inline-blockは、以下のような点が便利です。 幅や高さを持てる インライン要素ではwidth,height,縦方向のmargin,paddingが無視されますが、inline-blockだとこれが可能になります。 連続するブロック要素を
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く