webページの製作【作業過程 #1-1】

今回の記事は講座編で培った知識がどのように使われているのかという部分について具体的なイメージを持ってもらうためにwebページを実際に作っている様子を記録していくものになります。

実践的な記事になる分多少難しいものやマイナーな実装が出てくるかとは思いますが、その辺は調べて引き出しを増やしていただければと思います。

1. どんなwebページを作るか
2. コーディング開始
3. headerの制作

どんなwebページを作るか

最初に今回のwebページがどういったものにするのかを考えていきます。目的はやっぱり大事です。何も決めないまま発車するよりは少し悩んでコンセプトを決めた方が最終的な仕上がりが全然違います。

ざっとwebページの全体的なレイアウトを考えます。自分はこの時紙に鉛筆を使って適当に済ませがちなのですが、折角記事にするので、デジタルソフトでササっと描いてみます。

こんな感じで上にロゴやタイトル(webサイト名)説明を入れてその下に固定ページやメニューボタンを入れ、その下に文章を書きこむ白いエリアがあって一番下にコピーライトやその他諸々のリンクを置くフッターエリアという構成にしてみました。

ブログのようなページ(記事)がどんどん増えていくタイプのものを作成するならサイドバーを付けて2カラムレイアウトにした方が良いですが、今回はサロンや企業などの固定ページが主で、ページ数があまり増えない場合を想定しているのでサイドバーは無しにしてみました。

コーディング開始

早速コードを書いていきます。

まずはheadタグの中身とbodyタグの中を書いていきます。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <meta name="robots" content="noindex, nofollow">
  <title>岩ちょこの参考webページ1</title>
  <script src="https://kit.fontawesome.com/a8e9cefa55.js" crossorigin="anonymous"></script>
</head>
<body>
  <header>
  </header>
  <div class="main">
  </div>
  <footer>
  </footer>
</body>
</html>

headタグの中のmetaタグ3つは上から順に文字コードの設定、レスポンシブデザイン対応のための設定、検索エンジンにかからないようにする設定になっています。

scriptタグはawesomeのアイコンを使いたいので入れています。bodyタグの中のものについては説明不要でしょう。

次に、CSSファイルを作ってhead部分にlinkタグを使って関連付けてあげましょうか。

多くのweb系エンジニアの人が最初に行っているのはCSSのリセットです。どうして何にもCSSファイルを書いていないのにCSSのリセットが必要なのかをざっくりいうと、それぞれのブラウザが気を利かせて最初からある程度HTMLだけでも読めるように最低限のCSSを用意してくれています。そんな意図しないCSSが適用されないように最初にリセットしてしまおうというのがCSSのリセットになります。

自分が使っているリセットファイルはこれです。

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strong, sub, sup, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

これを最初に読み込んだ後に適用させたいCSSファイルをlinkすることでどのブラウザを使っていても表示が同じになります。

実際に適用させるCSSファイル『main.css』を作成していきます。

/*全体*/
body {
  font-family: 'Avenir','Helvetica Neue','Helvetica','Arial','Hiragino Sans','ヒラギノ角ゴシック',YuGothic,'Yu Gothic','メイリオ', Meiryo,'ＭＳ Ｐゴシック','MS PGothic';
}

CSSファイルは行数が多くなりやすいので、抜粋で表示をしていくことにします。今回の作業の最終的なコードは記事の終わりにくっつけておきますのでよかったら眺めてみてください。

ちなみにここではbodyの内側の文字をどのフォントで表すかの設定をしています。

CSSファイルを作成したので、headタグの中に追記しましょうか。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <meta name="robots" content="noindex, nofollow">
  <title>岩ちょこの参考webページ1</title>
  <link href="reset.css" rel="stylesheet">
  <link href="main.css" rel="stylesheet">
  <script src="https://kit.fontawesome.com/a8e9cefa55.js" crossorigin="anonymous"></script>
</head>
<body>
  <header>
  </header>
  <div class="main">
  </div>
  <footer>
  </footer>
</body>
</html>

このように記述することでCSSファイルが適用されるようになります。

headerの制作

最初にユーザーがPCを使う場合を想定して作り、そのあとでレスポンシブ対応にしていきます。まずは一番最初のイメージ図を頭の中で簡単な図形に分割します。ここではheader部分に相当するエリアのみにしましょう。

一番上の黒い線や固定ページに飛ぶボタンの下の黒い線は同じ部品を使い回せそうな感じがするので、同じパーツにしましょうか。固定ページボタンは横並びで同じ幅で作らないと見栄えは良くないですね。
色々考えることがありますが、パーツごとにdivタグを使って分割とカタマリを作成しましょうか。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <meta name="robots" content="noindex, nofollow">
  <title>岩ちょこの参考webページ1</title>
  <link href="reset.css" rel="stylesheet">
  <link href="main.css" rel="stylesheet">
  <script src="https://kit.fontawesome.com/a8e9cefa55.js" crossorigin="anonymous"></script>
</head>
<body>
  <header>
  <div class="sep"></div>
    <div class="titleWrapper">
      <div class="logo"><img src="./image/logo.png" alt="企業のロゴマーク"></div>
      <div class="title">
        <h1>webページのデザイン例1</h1>
        <p>webサイトの実践的な知識を身につけたい人向け</p>
      </div>
    </div>
    <div class="menu">
      <div class="menuChild">トップ</div>
      <div class="menuChild">webデザイン</div>
      <div class="menuChild">お問い合わせ</div>
      <button type="button" id="menubtn"><i class="fas fa-bars"></i></button>
    </div>
    <div class="sep"></div>
  </header>
  <div class="main">
  </div>
  <footer>
  </footer>
</body>
</html>

とりあえずこんな感じでしょうか。sepという名前のdivは黒い横棒を表していて、titleWrapperはtitleとlogoをセットにして扱う部分で、title部分にはh1タグとpタグを入れてwebページ名と概要を書く欄をもうけました。タイトルやロゴが長い場合を考慮してサブタイトル風ではなくpタグで2段にしました。固定ページの部分はCSSのfloatで横並びにするのを考えているので、menuというクラス名のdivタグでカタマリにしてあります。

実際にCSSを書いていきましょうか。

/*メニュー部分*/
.menu {
  width: 100%;
  overflow: auto;
}

.menuChild {
  width: 20%;
  height: 40px;
  color: #aaa;
  font-size: 1.5rem;
  background-color: #222;
  float: left;
  padding-top: 10px;
  margin:5px 10px 0 0;
  border-radius: 5px 5px 0 0;
}

.menuChild:hover {
  background-color: #444;
}

#menubtn span {
  text-indent:100%;
	white-space:nowrap;
	overflow:hidden;
}

#menubtn i {
  color: #fff;
  font-size: 20px;
}

#menubtn {
  position:absolute;
  top:170px;
  right:10px;
  padding:6px 15px;
  background-color: #222;
  border: 1px solid #222;
  border-radius: 5px;
  cursor: pointer;
}

#menubtn:hover {
  background-color: #444;
}

#menubtn:focus {
  outline:none;
}

/*黒いバー*/
.sep {
  width: 100%;
  height: 20px;
  background-color: #222;
}

menuの部分を実装してみました。

menuバーのところにある固定ページは高さを変化させたくないので、heightをpx単位で固定しています。最終的にはremにするかもしれませんがPC版を作っているうちはそのままでも大丈夫でしょう。border-radiusの使い方でこれを覚えておくとデザインの幅が広がると思います。
『border-radius: 左上右上右下左下;』
また、floatを使って要素を横並びにしています。ここでは、親要素のmenu内で子要素のmenuChildがfloat: left;で横並び表示するようにデザインしている部分になります。

『なんちゃら:hover』を使ってカーソルがボタンの上なんかに来たときの処理を書いています。

.sepで黒い横長の線をデザインしています。

キリがいいところまでやりたいので、ロゴとタイトル部分までを今回の記事で作っちゃいましょう。とりあえずサンプルとなるロゴをお借りしてきます。それをimageフォルダ(画像を一括管理するフォルダ)を作り移動しておきます。(先にhtmlで書いておいた通りに合わせて名前をつけています)

そしたら、またCSSをいじっていきましょう！

/*ロゴとタイトル部分*/
.titleWrapper {
  width: 100%;
  height: 155px;
}

.logo {
  width: 30%;
  float: left;
}

.logo img {
  width: 300px;
}

.title {
  width: 70%;
  float: left;
  text-align: left;
  padding: 40px 30px;
  box-sizing: border-box;
}

.title p {
  padding-left: 5%;
}

タイトル部分やロゴ部分はwebページの大きさに左右されることなく表示された方がかっこいいと思うので、高さを固定しています。

ここまでの作業で概ねheaderタグ内のデザインは整いました。この記事までのソースコードを下に置いておくので、コピペして試して実際のソースコードと見比べてみると使い方のイメージが掴めると思いますので是非！！ここまでのコードでwebページがどこまでできたかをみたい人はソースコードの下までスクロールして出力結果を見てくださいね。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <meta name="robots" content="noindex, nofollow">
  <title>岩ちょこの参考webページ1</title>
  <link href="reset.css" rel="stylesheet">
  <link href="main.css" rel="stylesheet">
  <script src="https://kit.fontawesome.com/a8e9cefa55.js" crossorigin="anonymous"></script>
</head>
<body>
  <header>
  <div class="sep"></div>
    <div class="titleWrapper">
      <div class="logo"><img src="./image/logo.png" alt="企業のロゴマーク"></div>
      <div class="title">
        <h1>webページのデザイン例1</h1>
        <p>webサイトの実践的な知識を身につけたい人向け</p>
      </div>
    </div>
    <div class="menu">
      <div class="menuChild">トップ</div>
      <div class="menuChild">webデザイン</div>
      <div class="menuChild">お問い合わせ</div>
      <button type="button" id="menubtn"><i class="fas fa-bars"></i></button>
    </div>
    <div class="sep"></div>
  </header>
  <div class="main">
  </div>
  <footer>
  </footer>
</body>
</html>

/*全体*/
body {
  font-family: 'Avenir','Helvetica Neue','Helvetica','Arial','Hiragino Sans','ヒラギノ角ゴシック',YuGothic,'Yu Gothic','メイリオ', Meiryo,'ＭＳ Ｐゴシック','MS PGothic';
  min-width: 880px;
}
/***header***/
header {
  text-align: center;
  background-color: #45c16c;
}

/*ロゴとタイトル部分*/
.titleWrapper {
  width: 100%;
  height: 155px;
}

.logo {
  width: 30%;
  float: left;
}

.logo img {
  width: 300px;
}

.title {
  width: 70%;
  float: left;
  text-align: left;
  padding: 40px 30px;
  box-sizing: border-box;
}

.title p {
  padding-left: 5%;
}

/*メニュー部分*/
.menu {
  width: 100%;
  overflow: auto;
}

.menuChild {
  width: 20%;
  height: 40px;
  color: #aaa;
  font-size: 1.5rem;
  background-color: #222;
  float: left;
  padding-top: 10px;
  margin:5px 10px 0 0;
  border-radius: 5px 5px 0 0;
}

.menuChild:hover {
  background-color: #444;
}

#menubtn span {
  text-indent:100%;
	white-space:nowrap;
	overflow:hidden;
}

#menubtn i {
  color: #fff;
  font-size: 20px;
}

#menubtn {
  position:absolute;
  top:170px;
  right:10px;
  padding:6px 15px;
  background-color: #222;
  border: 1px solid #222;
  border-radius: 5px;
  cursor: pointer;
}

#menubtn:hover {
  background-color: #444;
}

#menubtn:focus {
  outline:none;
}

/*黒いバー*/
.sep {
  width: 100%;
  height: 20px;
  background-color: #222;
}

確かめたい人はこちらのページでどうぞ>>出力結果

最後まで記事を見ていただきありがとうございます。また別の記事でお会いできることを祈っております。

webページの製作【作業過程 #1-1】

どんなwebページを作るか

コーディング開始

headerの制作

CSSカテゴリの最新記事

webページの製作【作業過程 #1-1】

CSSの擬似要素・擬似クラス【HTML&CSS講座 #6】

CSSのプロパティ【HTML&CSS講座 #5】

CSSの基本【HTML&CSS講座 #4】

webページの製作【作業過程 #1-2】

HTMLの基本<後半>【HTML&CSS講座 #3】