WEB制作
DIVパズルでHTMLとCSSを理解しよう！DIVパズルLv.1 【初級編】
働きたくない人のために、アフィリエイトとプログラミング、投資のススメを配信中。
DIVパズルでHTMLとCSSを理解しよう！DIVパズルLv.1 【初級編】
なにかとつまづく独学WEB制作ですが、先日友達からWEBについて教えて欲しいと言われたので初心者にもわかりやすいように勉強できるコンテンツを制作しました。
基本的にはこのサイトを見てくれれば簡単なホームページぐらいできるよ！っていうぐらいにしていたいので、WEBについて学びたい！という意欲のある方は、ぜひこちらのサイトで学んでくれたらと思います。
質問なんかも記事の最後に受け付けているので、どなたでもご質問ください。すぐに返信したいという意気込みだけはあります。一緒に勉強していきましょう！
ここからは実際に手を動かしてコードを書いていきたいと思います。今回は、WEB制作初心者の方にもわかりやすいようなコンテンツをつくりました。
題してDIVパズル。
なんとなくで大丈夫なので、HTML と CSS を理解しているという方はお試しください。WEBの基本とも言えるHTMLとCSSについての理解が必要なので、なにそれ？という方は、まずこちらの記事でWEB制作の基本を勉強してみてください。
DIVパズルとは？
DIVパズルでは、基本的なHTMLとCSSを使って、以下のサンプルのようなものと同じものをつくってもらいます。
この形、よくあるWEBサイトになんとなく見えませんか？ 一般的なWEBサイトの基本的な構造は、大きくヘッダー、メインボディ、フッターで構成されます。まずはこの大きな構造をDIVのみで再現してみましょう。
用意するものは、ブラウザとエディターだけ。ブラウザには、Google Chrome をインストールし、エディターには黒画面でイケてる Sublime Text をインストールしましょう。
それでは、Google Chrome ブラウザと Sublime Text エディターのインストールが完了したら、さっそく制作に取りかかりましょう。
DIVパズルLv.1 【初級編】
HTMLの記述は、<body></body>内に<div class=”{className}”></div>のみ。CSSで使用するプロパティは以下の通り。
- CSSで使用するプロパティ
- ・display
・width
・height
・float
・clear ※(clearfixのhelperでも可)
・background
・margin
ヒント
WEB制作でつまづいた時は、とにかくググること！ ※バグにぶつかった時、エンジニアはググり力がかなり問われます。
ググり方がわからないという方には、例えばCSS プロパティ floatなどで検索してみてください。
さっぱりわからないという方に、まずはHTMLだけを公開してみます。これはあくまでも一例なので、絶対に正しい！なんてことはありません。
DIVパズル Lv.1 の ソースコード例
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>divパズルlv1</title>
<link rel="stylesheet" href="common.css">
</head>
<body>
<div class="wrapper">
<div class="header">
<!-- end of .header -->
</div>
<div class="main clearfix">
<div class="content">
</div>
<div class="side">
</div>
<!-- end of .main -->
</div>
<div class="footer">
<!-- end of .footer -->
</div>
<!-- end of .wrapper -->
</div>
</body>
</html>
このHTMLをベースに、同一階層に common.css を作成し、それぞれの要素にスタイルを指定していきましょう。
以下に解答例があるので、わからない方は続きをご覧ください。
DIVパズル Lv.1 の解答例
先ほどHTMLを公開したので、次にCSSを公開します。
body {
width: 100%;
}
.wrapper {
width: 600px;
margin: 0 auto;
}
.header {
width: 100%;
height: 180px;
background: #ca1019;
}
.content {
float: left;
width: 420px;
height: 480px;
background: #14865f;
}
.side {
float: right;
width: 180px;
height: 480px;
background: #2935a8;
}
.footer {
width: 100%;
height: 100px;
background: #f4d508;
}
.clearfix:after {
content: "";
display: block;
clear: both;
height: 0;
visibility: hidden;
}
/* ------------------------------
clearfixを使わない場合
---------------------------------
body {
width: 100%;
}
.wrapper {
width: 600px;
margin: auto auto;
}
.header {
width: 100%;
height: 180px;
background: #ca1019;
}
.content {
float: left;
width: 420px;
height: 480px;
background: #14865f;
}
.side {
float: right;
width: 180px;
height: 480px;
background: #2935a8;
}
.footer {
width: 100%;
clear: both;
height: 100px;
background: #f4d508;
}
---------------------------------
the end of no clearfix
--------------------------------*/
DIVパズル Lv.1 初級編を終えて
DIVパズルはどうだったでしょうか？ 解答例を確認できるようファイルを用意したので、ダウンロードして実際に使用してみてください。
ZIPファイルをダウンロードする
最初に言っておくと、コーディングは基本的に見た目を再現するものなので、完璧な答えはありません。
もう少し大規模なサイトになってきた時、同じコードを使用してなるべく記述量を減らすなどの汎用的なコードを書くテクニックも必要になってきますが、今の段階ではその必要はありません。画像で起こしたものと同じようにマークアップする楽しさをわかってもらえればと思います。
普段何気なくネットサーフィンをしていると、かっこいい！お洒落！というサイトに巡り会えると思います。このデザインどうやって記述しているの？って疑問に思ったときは、command+option+Iでディベロッパーツールを開き、コードを確認する癖を身につけてください。そうすれば自ずと上達していきます。
次回の記事では、DIVパズル Lv.2 【中級編】 を紹介したいと思います。
人気記事