ラベル WEBデザイン の投稿を表示しています。 すべての投稿を表示
jQueryで可変グリッドレイアウト
最近ではスマートフォン端末もよく利用される様になってから、
Web業界でもレスポンシブルデザインを取り入れるサイトが増えて来ました。
そして最近では可変グリッドレイアウトと言うカードを並べた様な形のデザインも増えています。
そこで、簡単にグリッドレイアウトを使える様にしたjQueryを紹介したいと思います。
必要な物はライブラリーだけ!!
以下のサイトから2つのJavaScriptファイルをダウンロードして下さい。
ダウンロードが完了したらこれで準備は完了です。
後はソースを入力していくだけ、
JavaScriptファイル読み込み
jQueryコードを書く
$(function(){
$('#main_container').masonry({
itemSelector: '.box',
isFitWidth: true,
isAnimated: true
});
});
※
[$('#main_container')]ではHTMLのグリッドレイアウトのボックス全体を囲む要素です。
[itemSelector: '.box',]レイアウトする対象要素
HTMLを書く
Box1
Box2
Box3
Box4
Box5
Box6
Box7
Box8
Box9
CSSをお忘れなく!!
body{ background-color: #808080; }
#main_container{ margin: 0 auto; width: 900px; }
.box{
background-color: #fff;
float: left;
width: 200px;
margin: 10px;
padding: 10px;
border-radius: 5px;
}
初心者でも分かる様にCSS3角丸の説明
多分以下の表見たら一発で分かると思います。
角丸の全てはこれだけです。
| 角丸プロパティ | 特定箇所プロパティ | px指定 | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|
| border-radius: |
|
5px; |
全て同じpx数の場合は「角丸プロパティ」とpx数を指定するだけで全ての角が角丸になります。
もし、特定の場所のみ角丸にしたい場合は「特定箇所プロパティ」で個別に指定する事により、
左上だけ角丸にするといった指定も可能です。
一覧にして全ての角を様々な角度にしたい場合は以下の様にします。
もし、特定の場所のみ角丸にしたい場合は「特定箇所プロパティ」で個別に指定する事により、
左上だけ角丸にするといった指定も可能です。
一覧にして全ての角を様々な角度にしたい場合は以下の様にします。
border-radius: 1px 3px 4px 2px;
- 左上
- 右上
- 右下
- 左下
角丸の全てはこれだけです。
イラストサイト向けレスポンシブデザイン テンプレート
イラストサイト向けのレスポンシブデザインのテンプレートを配布開始!!
以前配布した「イラストサイト向けテンプレート」の改バージョンとなるレスポンシブデザインに対応したテンプレートを今回配布致します。 レスポンシブデザインの特徴は1つのソースで複数の端末に対応出来る柔軟性が特徴です。今回は主にタブレット端末・スマートフォンに対応しました。
特にテンプレート自体の仕様は変わっていないので、以前のテンプレートと同じ様に使う事が可能です。
