目指せ!万能クリエーター!!デザイン・コーディングプログラミングまで幅広く書いています。

準備中

スポンサーサイト

このエントリーをはてなブックマークに追加
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
  1. --/--/--(--) --:--:--|
  2. スポンサー広告

CSSのdisplayについて検証してみました

このエントリーをはてなブックマークに追加

レスポンシブとタイプしすると、レス本支部と変換されプッと笑ってしまった今日この頃。
こんにちはー!銀ねこです(≧∇≦)
最近、CSSのdisplayの使い所に感心する今日この頃です。
私がまだHTML5が出たばかりでWindows7が最新機種ですげー! な時代だったためかな?職業訓練校に行ってた時は使い所や説明があまりありませんでした。
テーブルレイアウトの時代だったせいかもしれません。 いまさらですがすごく便利なのでdisplayについてのメモです。

Displayとその値について

displayは要素の表示形式を指定するプロパティです。
displayにはタグごとに初期値があって、<image>や<span>などは文章の一部のように改行されずに表示されます。 displayの初期値がinline、文章の一部のようにみなされてしまうからです。
見出しやリストなど必ず前後に改行が入るつまり、displayがblockに設定されてます。
ちなみに、イメージの前後に必ず改行を入れてあげたい場合はdisplayをblockにセットすればその要素には必ず改行が入りますのでわざわざ改行タグを入れる必要がなくすっきり無駄がありません。

検証用にサンプルを作ってみました(≧∇≦)

検証用にJavascriptでdisplayをプルダウンで切り替えるソースを書いてみました。
Javascript久々で書き方忘れてて途方にくれましたが何とかできました。DreamWeaverの補完機能がデフォでVisualStudioなみに素晴らしかったら文句はありません。
※ソースがなかなかできなかったのはただの綴り間違いです。
それって、それ以前の問題じゃないって思う…。


サンプル

使いどころが似ているVisibilityと比較

MediaQueryで切り替える際、display要素はとっても便利です!
例えばdisplay:none;にするとタグすべてなかったことにできます。
似たようなCSSのプロパティにvisiblityがありますがVisible:hidden;で要素は見を見せなくできますが、領域は残ります。

サンプル

使いどころにもよりますが、レスポンシブを考えるとdisplayは使い勝手は良いですね。

まとめ

CSSも奥が深いし、最近はHTML5で作れるアプリも増えてるのでもうしばらくつつきまくってみます。

スポンサーサイト
  1. 2014/02/22(土) 21:54:02|
  2. レスポンシブデザイン
  3. | トラックバック:0
  4. | コメント:0
<<第一回Twilio勉強会広島に行ってきました | ホーム | ヒーロー島バレンタインスペシャル 2014 に参加してきました>>

コメント

コメントの投稿


管理者にだけ表示を許可する

トラックバック

トラックバック URL
http://gatoprateado.blog.fc2.com/tb.php/79-8a2986e9
この記事にトラックバックする(FC2ブログユーザー)
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。