/* Google Analytics ▽ */ /* Google Analytics △ */

WEB制作の勉強メモ / 猫脳人間

HTML CSS JavaScript ActionScript jQuery WordPress PHP Illustrator Photoshop Flash … 猫サイズの脳でも覚えるぞ と…

2015年 04月01日(12日目)のWEB制作の勉強メモ CSSレイアウト

スタイルシートによるレイアウト

CSS: float によるレイアウト練習

  • まずレイアウトを紙に書く
  • #sidebar がレイアウト上では左にあるが、HTMLの中の記述は、#sidebar よりも #content(サイト内の重要な部分)を先に書く!(必須)
  • #wrapper(#content と #sidebar を包んでいる id) は、float をするレイアウト用 id の親要素になり、floatの親要素には、必ず overflow:hidden; を記述する。

#wrapper {
  overflow: hidden;
} 

レイアウトCSSのライブラリやその解説サイト

Layout GALA

レイアウトのHTMLとCSSがセットになった見本のようなソースを公開しているサイト。
Layout Gala: a collection of 40 CSS layouts based on the same markup and ready for download!

YUI Library

JavaScriptCSS のライブラリをフリーで公開しているサイト。
YUI Library

YUI Library を解説しているサイト。web-tan.forum.impressrd.jp

2カラムレイアウト-(1)

おいしい○料理レ○トラン

CSS:2カラムレイアウト:おいしい○料理レ○トラン

  • このレイアウトは #header #content #sidebar の順でHTMLに記述した場合、HTMLの仕様上 少しレイアウトが難しいが、margin に「-」を付ける事で対応する。
  • 授業ではまだ初歩なので #header に #sidebar に入れるリンクメニューを含む事も可ということで進められた。


SEO について少し

  • Yahoo! ブックマーク
  • Yahoo pipes(アメリカ) がサイトの情報の巡回をしにくる

Pipes: Rewire the web
matome.naver.jp

Google Webmaster Tool
www.google.com

広告を非表示にする