Html研究
気に入った事はとことんやってしまいます。
ほどほどにしたいものデス。ヾ(´▽`*)ゝ
recent comment

最新の記事

月別アーカイブ

recent trackback

 Masonryを使用時「flexbox」で2カラムレイアウト更に幅狭ではプルダウンに変化させる


floatに代わってページをレイアウトするのに「flexbox」を使うととても短いコードでできると知りました。スタイルシートは
.container {
display: flex;
}
.left {
width: 300px;
}
.contents {
flex: 1;
}

だけだそうです。ほんとにびっくりです。詳しくは

floatより辛くない「flexbox」でざっくりレイアウト



高さの違うアイテムを隙間なく並べてくれる
jQuery プラグイン Masonry
を使用時、2カラムにするとMasonryの部分がcontainerの幅になって右側にはみ出してしまいます。
そこで「jQuery プラグイン Masonry のイニシャライズ(初期設定)」において
#containerを2カラムの右側のdivクラス名にしてisFitWidth: trueをisFitWidth:falseに変更すると右側の中に納まってくれました。


更にPC表示サイズ960pxが切れるときブルタウンメニューに設定しました。
cssにおいて960px以下ではleftを display: none; としてブルタウンメニューのオープンボタンを出しました。
パソコンのかたはウインドウサイズを狭めてみてください。


詳しくはDEMOのソースをご覧ください。
【2018/11/28 11:32】 カスタマイズ | トラックバック(0) |
コメント(0)

 %による3カラム


3column.jpg
container100%をwrapper75%(赤枠)とright23%(pink背景色)に分け。
wrapper(赤枠)を100%と考えleft24%(yellow背景色)main74%空色背景色に分ける。
demoはこちら
【2018/11/16 14:46】 html | トラックバック(0) |
コメント(0)






| ホーム |
ブログ内検索

RSSフィード

*最新記事のRSS
*最新コメントのRSS
*最新トラックバックのRSS

TB_People

カレンダー

10 | 2018/11 | 12
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 -

ブロとも一覧

ブロとも申請フォーム

この人とブロともになる

リンク

author_name=Dreamy/album

気に入った事はとことんやってしまいます。
ほどほどにしたいものデス。ヾ(´▽`*)ゝ
recent comment

最新の記事

月別アーカイブ

recent trackback

ブログ内検索

RSSフィード

*最新記事のRSS
*最新コメントのRSS
*最新トラックバックのRSS

TB_People

カレンダー

10 | 2018/11 | 12
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 -

ブロとも一覧

ブロとも申請フォーム

この人とブロともになる

リンク

Template production /preview