ここ数日、初めてレスポンシブ・ウェブデザインでサイトを作っていて、(自分の)既存サイトを移行しているところです。
まだまだ調整が必要な所が沢山ありますが、公開しながらちょっとずつ修正して行こうと思ってます。
- CSS3 Media Queries を使って、Webサイトをスマートフォンに対応させるときの注意書き
- Responsive Design with CSS3 Media Queries
- レスポンシブ・ウェブデザイン 基礎
上記サイトなどを参考にさせて頂いてサイトを作っています。
すごく丁寧に分かりやすく説明してあるので、思っていたより早く進んでいる気がします。
ありがとうございます。
サイトですが、iPhoneなど小さい画面のレイアウトからPCサイトの大きい画面のレイアウトの順番で、全体のレイアウトを考えてから作るのが良いようですが、初めてなのであまり想像も出来なかったので、とりあえず慣れているPCサイトを作ってみました。
更に一番単純そうなワンカラムレイアウトのサイトを作る事にします。
メインコンテンツの一部に3段表示と2段表示があります。
画面サイズによって2段にしたり、1段にしたり、表示しないなどを考えてます。
HTMLはだいたいこんな感じで作りました。
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 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <title></title> <meta name="viewport" content="width=device-width; initial-scale=1.0"> <link media="screen" rel="stylesheet" href="style.css" type="text/css" /> <!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </head> <body> <div id="pagewrap"> <header id="header"> <hgroup id="hgroup"> <h1 id="site-logo"><img src="images/logo.png" /></h1> </hgroup> <nav id="main-nav"> <ul> <li id="nav-blog"><a href="#">Blog</a></li> <li id="nav-work"><a href="#work">Work</a></li> <li id="nav-hello"><a href="#footer">Hello</a></li> </ul> </nav> </header> <div id="content"> <article id="slide"> <a href="#"><img src="images/xxxx.png" /></a> <img src="images/xxxxx2.jpg" /> <img src="images/xxxxx3.jpg" /> </article> <article id="work"> <h2>Work</h2> <div class="sub-article"></div> <div class="sub-article"></div> <div class="sub-article"></div> </article> <article id="passion"> <h2>passion</h2> <ul class="sub-box"> <li></li> <li></li> <li></li> <li></li> </ul> </article> </div> <footer id="footer"> <p>XXXX All Rights Reserved.</p> </footer> </div> </body> </html> |
かなり省略したCSSです。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
/* メイン構造のCSSを記述(全体に適用) */ #pagewrap { width: 1236px; margin: 0 auto; } #header { height: 72px; } ・ ・ ・ @media screen and (max-width: 1238px) { /* 横幅が1238px以下の時適用 */ } @media screen and (max-width: 980px) { /* 横幅が980px以下の時適用 */ } @media screen and (max-width: 650px) { /* 横幅が650px以下の時適用 */ } @media screen and (max-width: 480px) { /* 横幅が480px以下の時適用 */ } |
max-width: で表示幅を制御します。
今回は1238px, 980px, 650px, 480pxで分けてます。
小さいサイズになるにしたがって、
・横並びを縦並びにしたり
・コンテンツを非表示にしたり
している所をオーバーライドして、設定を新たに適用するのでしょうね。
こういうブログもありました。
- スクロールしたら画像が下からふぉあ〜んと出てくる効果を
- 自分のアメブロサイトを少しカスタマイズ
- WordPressにソーシャルブックマークのアイコンを表示する
- Webデザイナー検定 エキスパート 受験結果
- 下までスクロールしたら隠れていたフッタが現れるサンプル htmlとcssで
人気のあるブログ:
- 新しいgemのアップデート方法(rubygems-update)
- Coda2でscssを使うときのお供にcompassをどうぞ。
- NginxをSSL付きで動かすために設定したこと
- SIM無しiPhone 3Gで初めて脱獄をやってみた
- bashでUTF-8に設定して日本語表示したり使ったり。Emacsでも。
[…] >>初めてのレスポンシブ・ウェブデザイン | サイバーまめカン 出水市でITを活用して行きたい人のブログ Author: […]