第1回ゆるりWeb制作交流会
Web制作（フロントエンド、デザイン中心）に関わる方や興味のある方のための交流会を行いました。
1回目というか0回目的なたたき台的な実験だったのですが、自分も含め参加者の方には喜んでもらえたのかな手応えを感じました。また近いうちにこういった会をやってみたいです。参加者は各回8人くらいを上限にこじんまりと行いたい。
内容
CSS勉強会
シンプルなヘッダー・フッターつき2カラムレイアウトをHTML＆CSSで実現するためのコーディングをゆるーく勉強。
- まずは全体を囲う#container
ヘッダーには#header、
中央には#wrapper、#left、#right、
フッターには#footerを用意 - わかりやすいようにそれぞれに文字列を入れます
- HTMLが準備出来たら<style>で囲われたところにCSSの記述を行います
- これもわかりやすいようにpaddingと色を付けました
- 次に#containerに幅1000pxを入れました
- #leftに
float:left;
width:200px; - #rightに
float:right;
width:750px; - #left、#rightをfloatすると#wrapperの中身が空になるため高さが0pxとなり、
#footerが意図しない位置に来てしまいました - そこで、.clearfixを使って#wrapperが0pxとなるのを防ぎます
- そうすると2カラムヘッダー、フッターつきのレイアウトが実現できました
完成したソースコード
※きれいなソースではないですがサンプルなので・・・
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<title>sample</title>
<style>
body{
color:#fff;
}
#container{
width:1000px;
padding:30px 0;
background:#cc0;
}
#header{
padding:30px 0;
background:#f00;
}
#wrapper{
background:#080;
}
#left{
float:left;
width:200px;
padding:30px 0;
background:#00f;
}
#right{
float:right;
width:750px;
padding:30px 0;
background:#606;
}
#footer{
padding:30px 0;
background:#990;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
</style>
</head>
<body>
<div id="container">
container
<div id="header">header</div>
<div class="clearfix" id="wrapper">
<div id="left">
left
</div>
<div id="right">
right
</div>
</div>
<div id="footer">footer</div>
</div>
</body>
</html>
HTMLやCSS関連の話題
HTML4.01、XHTML、HTML5？
いろいろ有りますが、HTML4.01、XHTML、HTML5の順に登場。
いずれも記述方法や使用できるタグに違いが有りますが、基本的なタグ・使用目的は共通しているところが多い。
※HTML1からある<h1><h2><a><p>などは今もHTML5で使用できる
HTMLは1からスタートしていて、HTML3.2や4.0、4.01の時代にインターネットが爆発的に普及しました。XHTMLはCSSとHTMLの切り分け（論理マークアップと装飾の記述わけ）が叫ばれた2000年代前半に広まりました。
HTML5がどこからともなく出てきたみたいに感じる昨今ですが、HTML4.01の後継版です。ただ、今まではWebサイトをマークアップするために広く利用されてきたものが、今後はより一層ほかのメディア・コンテンツで利用されることになります。ゲーム、デジタルサイネージ、電車の広告ディスプレイ、車のインパネ、カーナビなどなど・・・。
HTML5は様々な市場で今後普及し、多くの技術者が触れる機会が増えるでしょう。
Webサイトを見てみる
テンプレートサイト、現在のサイト、過去にあったサイトなどを見てみました。
中にはネタにされるようなサイトも有りますが、それはそれで技術力が実は高かった。
「HTML 4.01」と「XHTML 1.0」と「HTML5」の違いまとめ
HTML5 Boilerplate: The web’s most popular front-end template
