お問合せはこちら【最短1営業日以内返信】

ホームページ制作・WEBサイト制作・グラフィックデザイン

BLOGSTAFF BLOG

inline-blockについて考えてみた

inline-block こんにちは!おひさしぶりです(^◇^)
アプリコットデザインのあんざいです。

久々のブログはちゃんとwebの事について書こうと思います!
そしてタイトルにもあるように「inline-block」について考えてみました。

何かとよく使う「inline-block」。
高さがバラバラな要素を横並びにさせる時に、「float:left」だとカラム落ちしてしまうので、
よく「display:inline-block」で横並びにさせます。
ですが、謎の隙間ができてしますのですよね・・・・

こんな具合に
inline-block_02
◆html

  • 1
  • 2
  • 3

◆CSS
li{
    display: inline-block;
    width:100px;
    height:100px;
    line-height:100px;
    text-align:center;
    margin:0;
    border:#FFF 1px solid;
}

marginも指定していないのに・・・
何とかしてこの隙間を埋めることはできないのか!

対策1:ulにletter-spacingにマイナスの値を与える

liの親要素のulにletter-spacing: -0.4emを与えます。
li同士の隙間は無くなりますが、文字の感覚まで影響を受けてしまいますので、
liにletter-spacing: normalを指定して、
文字の間隔を戻してあげます。

◆CSS
ul{
   letter-spacing: -0.4em; /* 追加部分 */ 
}
li{
    display: inline-block;
    width:100px;
    height:100px;
    line-height:100px;
    text-align:center;
    margin:0;
    border:#FFF 1px solid;
    letter-spacing: normal; /* 追加 */
}

inline-block_03
こちらは問題なく使用できていますが、ブラウザによってはletter-spacingに違いがあり、
場合によってはブラウザ毎に変更してあげる必要もあるため、対策が必要です・・・


対策2:ulにfont-size: 0を与える

liの親要素のulにfont-size:0を指定し、
liにfont-size:〇〇pxを指定してあげます。

◆CSS
ul{
   font-size: 0; /* 追加部分 */ 
}
li{
    display: inline-block;
    width:100px;
    height:100px;
    line-height:100px;
    text-align:center;
    margin:0;
    border:#FFF 1px solid;
    font-size: 13px; /* 追加部分 */
}

こうすることで隙間が無くなります。

inline-block_03
また、上記以外にも、html上でliの行を改行しないで、一列で書くという方法もあるのですが、
こちらは要素内の文章が長くなったり、したら、ソースが見づらくなるのでオススメはできません。
◆html
  • 1
  • 2
  • 3

今回これを書くにあたって色々調べたりしてみて、改めてcssは奥深いなぁと思いました。
結構、色々な謎の隙間に悩んだりするのですが、ひとつひとつ要素の特性を知り、解決していきたいなと思いました(^◇^)

ではまた!



ホームページ制作・通販サイト制作 各種印刷物デザインならアプリコットデザイン

株式会社アプリコットデザイン

[長野オフィス]
〒381-2246 長野県長野市丹波島1-805
TEL.026-217-2184

[東京ブランチ]
〒107-0052 東京都港区赤坂8-4-14 8F
TEL.03-6670-5177

[松本ブランチ]
〒390-0851 長野県松本市大字島内4619-3 QuintetDoor 1階南室
TEL.0263-87-7486

SEARCH

  • デザインで全ての人を幸せに
  • ブランド戦略型WEBサイト
  • タブロイド紙作ります
  • 開業・企業パック
  • ブランディング
  • 信州ファーム
  • アプリコットマグ

AREA

対応エリア

長野市、松本市、上田市、岡谷市、飯田市、諏訪市、須坂市、小諸市、伊那市、駒ヶ根市、中野市、大町市、飯山市、茅野市、塩尻市、佐久市、千曲市、東御市、安曇野市、小海町、川上村、南牧村、南相木村、北相木村、佐久穂町、軽井沢町、御代田町、立科町、青木村、長和町、下諏訪町、富士見町、原村、辰野町、箕輪町、飯島町、南箕輪村、中川村、宮田村、松川町、高森町、阿南町、阿智村、平谷村、根羽村、下條村、売木村、天龍村、泰阜村、喬木村、豊丘村、大鹿村、上松町、南木曽町、木祖村、王滝村、大桑村、木曽町、麻績村、生坂村、山形村、朝日村、筑北村、池田町、松川村、白馬村、小谷村、坂城町、小布施町、高山村、山ノ内町、木島平村、木島平村、信濃町、小川村、飯綱町、栄村など長野県内全域

北海道、青森、岩手、宮城、秋田、山形、福島、東京、神奈川、埼玉、千葉、茨城、栃木、群馬、山梨、新潟、長野、富山、石川、福井、愛知、岐阜、静岡、三重、大阪、兵庫、京都、滋賀、奈良、和歌山、鳥取、島根、岡山、広島、山口、徳島、香川、愛媛、高知、福岡、佐賀、長崎、熊本、大分、宮崎、鹿児島、沖縄まで全国

TOPICSトピックス

2681 post

PICK UPピックアップ

  • デザインノートに掲載されました
  • デザインで人を幸せにする会社
  • ブランド戦略型ホームページ制作
  • 開業起業される方へ
  • アプリコットデザイン
  • コーポレートサイト
  • 信州ファームデザイン
  • 信州ファームマーケット
  • ポケット
  • アプリコットマグ
  • ブランシュール

CONTACTお問合せ

デザインで人々を幸せにしたい。
デザインにはその力があります。I want to make people happy by design.
Design has that power.

デザインが全てだとは決して思いません。
デザインの良し悪しだけで、ビジネスが左右されるとも思っていません。
だけど、デザインの力はとても大きいことも知っています。
私たちが考える良いデザインとは、お客様の伝えたい想いを
より的確に、効果的に表現する手段だと考えます。
伝えたい想いは、間違った伝え方をしてしまうと伝わりません。
また、人を惹きつけるデザインでないと見てもらうことすら困難です。
私たちは日々努力を重ね、今日もそれらデザインに磨きをかけています。
そして制作する過程において、デザインを作ることよりも、お客様の伝えたい想いを
汲み取る事の方が制作するよりも重要だと考えます。
それらの結果、見た目も効果も併せ持った、優れたデザインとなります。
優れたデザインはビジネスの成長を促し、収益をもたらします。
私たちは、デザインを通して、一人でも多くの人を幸せにしたいと考えます。
デザインには人を幸せにする力があると信じています。

アプリコットの想いアプリコットの想い