navigation>年末年始休業につきまして【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。今回は、display:inline-blockを使って、要素を横並びにする方法をご紹介します。display:inline-blockとはCSSでdisplay:inline-blockを適用すると、要素がインライン要素のように横に並び、かつブロックレベル要素のように高さの指定等もできるようになります。インライン要素?ブロックレベル要素?な方は下記の記事も参考にしてみてください。っぱ!inline-blockはこんな時にぴったり1高さが違う要素を並べるとき例えば複数の商品を並べるときなどで、一部の商品だけテキストが改行されたりで高さが合わない...というような場合。CSSで高さが違う要素をfloatで並べると、レイアウトが崩れてしまいますが、inline-blockの場合は簡単に高さが揃ってくれます。幅の合計が100%を越えると改行されるので、幅を調整することで、横に並べる要素の数を調整できます。gray;margin:1%;}2並んでいる要素の高さを調整したいときまた、inline-blockに指定すると、floatと違って要素をvertical-alignプロパティを用いて調整することができます。>>補足vertical-alignプロパティとは行の中で使われるテキストや画像の縦方向の位置関係を指定する際に使うプロパティです。「行の中で行われる」という条件があるので、適応できるのはインライン要素とテーブルセルのみになります。そのような条件から、floatで調整した場合はvertical-alignプロパティを用いるということができません。>>top、middleだけでなく、%やpxを指定して細かい調整も可能です。画像とテキストを横に並べる際に便利です。このときmiddleや%、px等の基準となるのはベースラインで、これはテキストにしかありません。したがってテキストとテキストでないものを横に並べる際には、テキストでないもののほうにvertical-alignを適用します。half">画像に対してvertical-align:bottom;が適用されています。half">画像に対してvertical-align:50%;が適用されています。half">画像に対してvertical-align:-35px;が適用されています。solid;}3折り返したくないテキストがあるとき折り返したくないテキストがあるときに、inline-blockで改行位置を変えることができます。レスポンシブWebデザインのチェックボックスで、デバイス幅が変わっても、テキストの途中で改行されないようにすることができます。</label></div></html>label{display:inline-block;}/*以下はスタイルの調整*/input{font-size:20px;}なお、inline-blockを使うと意図しない隙間ができてしまうので注意が必要です。TECH終わりにいかがでしたでしょうか。このようにレイアウトを横に並べるレスポンシブWebデザインでコーディングをしているとよく高さが不揃いになり、見た目の違和感が出てくるケースはよくありますが、inline-blockで解決することは多いです。横に並べるプロパティで、table-cellの記事も併せてご覧ください。モバイルファースト・マーケティングラボ.”スマホで売れる”ためには必須の「レスポンシブECサイト」とは?2019年、ECサイトの利用者は今やスマ―トフォンからが7割を超え、市場のニーズは完全にPCからスマホに転換しました。検索エンジン大手のGoogleも「モバイルファーストインデックス」を打ち出し、スマホ対応の手段として正式に「レスポンシブWEBデザイン」を推奨しています。そのような背景から、昨今のEC市場ではスマートフォンへの適切な対応が急務となっており「レスポンシブECサイト」のニーズが非常に高まってきています。本パンフレットではECサイト運営を取り巻く環境の変化を、レスポンシブECサイト構築導入実績No.1のプラットフォームである「aishipR」の機能や実績を踏まえながらまとめました。・レスポンシブECサイトがなぜ今選ばれるのか・これまでのECサイトの課題とは何なのか・どのようにすれば解決できるのかといったノウハウから、プラットフォーム変更で得られる効果の実例まで網羅して解説しています。ECサイトの運営されておられる経営者様だけでなく、運営担当者様にも必ずお役に立つ内容となっておりますので、是非ご活用ください。無料パンフレットを請求するABOUTモバイルファーストマーケティングラボとは、スマートフォン/タブレット/PCに対応したレスポンシブECサイトの構築や成功事例の最新情報を発信するブログです。京都と琵琶湖の水上で送る。レスポンシブECサイト構築ASP「aishipR」の情報発信、導入前のご相談や使い方のご案内、大阪でのセミナー運営等を担当しています。EC事業者様にとって有益な情報を発信することを目指します。2013.08.26みなさんこんにちは、ロックウェーブの岡本です。今週月曜日も最新の市場動向や調査結果、キャリア各社の動きなどをご紹介いたします。2013.09.24みなさんこんにちは、ロックウェーブの岡本です。今週月曜日も最新の市場動向や調査結果、キャリア各社の動きなどをご紹介いたします。コメントをキャンセルメールアドレスが公開されることはありません。コメント名前メールアドレスサイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。自社ECサイト運営でASPをオススメする理由モバイルファーストラボ。