layoutの検索結果

CSS3 でのレイアウトで使える box 系プロパティのまとめ

CSS3 でのレイアウトで使える box 要素系のまとめ

今は 3カラムのレイアウトをする際 float を使い clearfix や clear を使ったりと覚えたての頃は頭を悩まされた人も少なくはないかと思います。

でも今後普及するであろう CSS3 で 3カラムのレイアウトする際も display: box; を使うだけで簡単に出来ちゃうんですよね。って事でbox 要素系のプロパティについての紹介をしておきます。

demo page

floatさせた要素をレンガ風に整列してくれるjQuery Masonry

floatさせた要素をレンガ風に整列してくれるjQuery Masonry

floatさせると要素の高さによっては、想定していたように並ばないことがあるかと思うんですが、そんな時に使えるのが今回紹介するjQuery Masonryです。

まず水平方向に合わせた後、垂直方向にもあわせるので、綺麗に要素を整列できます。

demo page

クリック一つで記事の一覧レイアウトを切り替える Easy Display Switch

クリック一つで記事の一覧レイアウトを切り替える Easy Display Switch

「Easy Display Switch」はサムネイルなどを使って一覧で表示されているレイアウトをクリック一つで切り替えてくれるスクリプトです。

Easy Display Switch with CSS and jQueryで紹介、配布されているのですが、使い方などの簡単な解説をしたいと思います。

demo page

ヘッダー部分とかグリッドレイアウトを飛び出しているように作る方法

ヘッダー部分とかグリッドレイアウトを飛び出しているように作る方法

海外のサイトとかでよく見られるんですが、背景画像がドーンと大きく置いてあり、その上にコンテンツがあるようなサイトがあるかと思います。

代表的なサイトと言えばWeb Designer Wallさんが有名だと思いますが、この用なサイトも背景画像さえ出来ればけっこう簡単に出来ちゃうんで、その組み方を解説したいと思います。

demo page

サイト全体を上下中央配置にする方法

上下中央配置

サイト全体を包むdiv要素を上下中央配置にしたい!って声をちょこちょこ聞きますので解説をしていきたいと思います。

でも個人的に普通のWebサイトを上下中央にするのは好まないですよね...

フルFlashのサイトかや写真をメインに見せたいようなフォトギャラリー系のサイトなら良いと思うので今回は以前にも解説をしたlightview.jsを使ったPhoto Galleyのサイトをデモページとして作ってみました。

ネガティブマージンを使ってレイアウトしてみる

ネガティブマージン使用例

↑の画像のようなレイアウトってよく使われていると思うですが、こういうレイアウトをネガティブマージンを使う事でソース上も綺麗に収まりますし、使いけっこう使いがってもいいのでオススメしたいと思います。

CSSレイアウト 実践講座最終回 main要素

CL company

今回で実践講座最終回です。

記事を見返してみれば、説明不足の所もあったような...
もし気になった所があった時はコメントでも下さい。

最終回main要素と指定しているコンテンツ部分です。

CSSレイアウト 実践講座5 sub、footer要素

CL company

前回のエントリーでheader、globalNaviの中身の要素を作ったので、今回はsub、footer要素の指定をしていきたいと思います。

今回もcontents.cssに記述していきましょう。

CSSレイアウト 実践講座4 header、globalNavi要素

CL company

前回のエントリーで全体のレイアウト作りを行ったので、今回から細かい内面的のレイアウト作りをやっていきたいと思います。

今回からはサンプルに入っているcontents.cssに記述していきましょう。

CSSレイアウト 実践講座3 全体のレイアウト作り

CL company

前回のエントリーでデフォルト設定とベースの設定を行ったので、今回は全体のレイアウト作りをやっていきたいと思います。

今回はサンプルに入っているlayout.cssに記述していきましょう。

CSSレイアウト 実践講座2 デフォルト、ベースの設定

CL company

前回のエントリーに引き続いて今回から具体的に実践に入っていきたいと思います。

CSSレイアウト 実践講座1

CL company

CSSレイアウトを覚える一番の近道は実践で経験をつむって事が一番だと思うですよね。

なので、実際にありそうなサンプルサイトを作ったのでこのサイトをこれから作っていきたいと思います。

CSSレイアウトの基本 3カラム

3カラム

前回2カラムのレイアウトの解説したので、今回は

←このような3カラムのレイアウトの解説をしようと思います。

CSS レイアウトの基本 2カラム

2カラム

←このようごくごく普通の2カラムのレイアウトの解説をしようと思います。

基礎をしっかりと押さえてないと、応用なんて出来ないですからね。

自分の経験を生かしてレイアウト崩れがおきにく用な組み方をしたいと思います。

レイアウトの基本 ボックスモデルの概念とボックスを構成要素

CSSでWebサイトをデザインするうえで、最初に理解しておかないといけないのが、「ボックスモデル」と呼ばれているデザイン概念です。

一度理解してしまえば、凄く簡単な事だと思うですけど、言葉だけでは理解しにくいと思うので、図にしてまとめてみました。