2016年03月20日
このエントリーをはてなブックマークに追加
このブログのデザイン。結構気に入っています。
文字サイズやら細々としたところを修正しながら使っています。

最近になって、レスポンシブデザインというのがあるようです。タブレットとか、ブラウザでウインドウサイズを変更したときに、メニューなどの配置がかわるヤツですね。
僕自身が気になっていたのは、ウインドウサイズに応じて記事の幅を変更したかったのです。今まではそれらが固定的でした。

float という css を利用してコンテンツを配置したのですが、この方法ではいまいちうまくいきませんでした。
ウインドウサイズを大きくしたり小さくしたりすると、余白も同様に大きくなったり小さくなったり・・。width などの値をパーセントで指定しているのが悪いのだと思うのですが、色々試してもうまくいかなかったんです・・。

CSSを利用した段組の方法として、table というのがあるようです。昔は table タグでレイアウトしていましたが、CSSでも table とは!
とりあえず table と table-cell を利用したところ、意図通りにできました。
このブログを読んでいるブラウザのサイズを変更すると、記事の表示エリアも拡大縮小します。

そして・・・・・・・・・ウインドウが小さくなったときにはメニューを追いやったりしたいのですが、それはまだです。


stock_value at 18:11│Comments(0)TrackBack(0)技術:2016年 

トラックバックURL

この記事にコメントする

名前:
URL:
  情報を記憶: 評価: 顔