【CSS001】display

displayは例えば次の値をとり、ブロック要素、インライン要素を変換します。

・none

・inline

・block

これだけだと何に使うのかよくわかりませんよね？僕もずっと何に使うのかなーと思ってました。実は、例えば、サンプルのような例で使うのです。

 

【サンプル】

-----------------------------------------------------------------------------------------
<style>
label{
display:block;
float:left;
width:200px;
</style>
<form id="form">
    <ul>
        <li><label>名前</label><input type="text"></li>
        <li><label>住所</label><input type="text"></li>
        <li><label>メールアドレス</label><input type="text"></li>
        <li><label>お問い合せ内容</label><textarea></textarea></li>
        <li><input type="submit" id="button" value="送信"></li>
    </ul>
</form>

 

-----------------------------------------------------------------------------------------

 labelはインライン要素なのでwidthが使えません。ということは幅指定ができないということです。

すると、labelとフォーム要素がくっついてしまいます。

これを避けるためにテーブルレイアウトを組んだりしますが、ブロック要素に変換して、widthを指定すれば、きれいなレイアウトを組めるんです。

他にもJavascriptを使って、非表示の要素を表示したりするときも活躍します。

タグ：CSS DISPLAY

コメント 3

沒有醫生的處方
cialis name brand cheap http://cialisvipsale.com/ Cilas
by Interactions for cialis (2018-04-14 16:59) 

スーパーコピーブランド専門店
https://www.007kopi.com/product/3634.html

ルイヴィトン、シャネル、エルメス、ルチェ＆ガッバ―ナ、
バレンシアガ、ボッテガ ヴェネタ、ミュウミュウ、クリスチャンディオール
その他の偽物バッグコピー、偽物財布コピー、偽物時計コピー、偽物ベルトコピー、偽物指輪コピー、偽物キーケース、商品は全く写真の通りです。
高級腕時計（N級品），スーパーコピー時計（N級品），財布（N級品）バッグ（N級品），靴（N品），指輪（N級品），ベルト（N級品），マフラー （N級品）
人気の売れ筋商品を多数取り揃えております。
全て激安特価でご提供.お願いします.
★100%品質保証！満足保障！リピーター率100％!
★商品数も大幅に増え、品質も大自信です。
★スタイルが多い、品質がよい、価格が低い！
★顧客は至上 誠実 信用。
★歓迎光臨
★送料無料(日本全国)
ホームページ上でのご注文は24時間受け付けております
https://www.007kopi.com/product/6964.html

by ScottIsorb (2019-09-18 09:16) 

日本超人気のスーパーコピーブランド激安通販専門店

日本超人気スーパーコピーブランド時計激安通販専門店年最高品質時計コピー、国際ブランド腕時計コピー、業界唯一無二.世界一流の高品質ブランドコピー時計。
人気の売れ筋商品を多数取り揃えております。
全て激安特価でご提供.お願いします.
★100%品質保証！満足保障！リピーター率100％!
★商品数も大幅に増え、品質も大自信です。
★スタイルが多い、品質がよい、価格が低い！
★顧客は至上 誠実 信用。
★歓迎光臨
★送料無料(日本全国)
https://www.gmt78.com/product/detail/326.htm

by occumpino (2020-06-23 13:22)