岩ちょこLab プログラミング関連の記事が中心

注目キーワード

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

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

前回の記事を見ていない人は前回の記事から見ることをおススメします。

webページの製作#1-1

前回に引き続き、実際にwebページを作成している様子を見てもらいます。前回までのところでheaderタグの中身はほとんど作成し終わっているので今回はfooterや記事のメイン部分を作成していきます。

目次

header部分の残り物

headerタグの部分で唯一残っていたh1タグのデザインしていきます。CSSで文字の大きさと太さを調節しているだけです。他のh2, h3, h4に関しても一応作っておきます。h5, h6は使わないと踏んで入れませんがもしかしたら後で追加するかもしれません。

/*見出し部分*/
h1 {
  font-size: 3.0rem;
  font-weight: 500;
  margin-bottom: 10px;
}

h2 {
  font-size: 2.2rem;
  font-weight: 300;
}

h3 {
  font-size: 1.5rem;
}

h4 {
  font-size: 1.3rem;
}

とりあえずはこんなもんでしょう。

mainとfooterのデザイン

次に簡単にfooter部分とmain部分の設定していきます。
footer部分にはとりあえずコピーライトを書いて、main部分には内側に内容を書き込むエリアを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 class="article">
    </div>
  </div>
  <footer>
    <p>©︎2019-2021 岩ちょこ</p>
  </footer>
</body>
</html>

/***コンテンツ部分***/
.main {
  line-height: 1.5;
  padding: 20px 0;
  background-color: #333;
}

.article {
  width : 90%;
  padding: 10px 40px;
  box-sizing: border-box;
  margin: 0 auto;
  background-color: #fff;
}

/***footer***/
footer {
  background-color: #222;
  color: #fff;
  text-align: center;
  font-size: 0.8rem;
}

footer部分はもう少しデザインを考えましょう。コピーライトの上に別ページへのリンクや、トップページに移動するリンクなどが欲しい気がします。なので、footer部分のデザインをもう少し改善してみましょうか。

<footer>
  <div class="footerLink">
    <div class="linkarea">
      <p><a href="https://www.iwachoco.com/wp/">岩ちょこlab トップページ</a></p>
      <p><a href="xxxx">hogehogehoge</a></p>
      <p><a href="xxxx">hogehogehoge</a></p>
    </div>
    <div class="linkarea">
      <p><a href="xxxx">hogehogehoge</a></p>
      <p><a href="xxxx">hogehogehoge</a></p>
      <p><a href="xxxx">hogehogehoge</a></p>
    </div>
  </div>
  <p>©︎2019 岩ちょこ</p>
</footer>
/***footer***/
footer {
  background-color: #222;
  color: #fff;
  text-align: center;
  font-size: 0.8rem;
}

.footerLink {
  width: 100%;
}

.footerLink .linkarea {
  float: left;
  width: 50%;
  padding: 10px 20px;
  box-sizing: border-box;
}

.footerLink .linkarea p a {
  color: #fff;
  text-decoration: none;
}

footerLinkという名前で親クラスを作りその中にlinkareaというクラス名のdivタグを用いてfooterのリンクを2列で表示する実装をしています。基本的には前回の記事の固定ページと同じ実装ですね。

『text-decoration: none;』はリンク部分の下線をなくすためのCSSです。

中身のデザイン

コンテンツの部分を作ればwebページのCSSやHTMLの部分はほとんど完成です。張り切って作っていきましょう。
まずは書く内容を考えます。ここでは仮に以下のような内容を書くことにしましょう。

  • 料金設定
  • 注意事項
  • お問い合わせ先

大体このあたりの内容があれば大丈夫でしょうかね。

<div class="main">
    <div class="article">
      <h2>料金の見積もり</h2>
      <p>会社のページを制作する場合は、webページ1つあたりで計算します。ただページ単価がそれぞれ違ったりしてややこしくイメージしづらいので時給換算でお願いしています。</p>
      <p>時給1000円でそれぞれのページにかかる時間から見積もりを算出させていただきます。詳しい作業にかかる時間は下記の表を参照していただければと思います。</p>
      <p>レスポンシブ対応になりますので、PC・タブレット・スマートフォンの画面に合わせたデザインを設計します。</p>
      <table>
        <caption>作業にかかる時間</caption>
        <tr>
          <th>ページの種類</th>
          <th>制作目安</th>
        </tr>
        <tr>
          <td>トップページ</td>
          <td>5hour</td>
        </tr>
        <tr>
          <td>お問い合わせページ</td>
          <td>4hour</td>
        </tr>
        <tr>
          <td>その他のページ(1ページあたり)</td>
          <td>3hour</td>
        </tr>
      </table>
      <p>トップページは必須になります。トップページの製作時間にはwebページのデザイン時間分が含まれています。他のページの製作はトップページのものを一部使い回しをしてデザインの統一を図るため少し短い時間で作業できる見込みになります。</p>
      <p>ロゴや経営者の写真などの画像データは企業様側に用意していただく形になります。(デザインをする上で作成する画像はこちら側で行います)</p>
      <p>画像の作成や修正箇所が多くなると上記の表から作業時間が超えることが予想されますので見積もり額プラス5000円くらいまでをみてもらえるとトラブルが少ないと思います。</p>
      <h2>注意点</h2>
      <p>コンテンツを運用する際のサーバーやドメインの管理、及び経費につきましては企業様側の負担でお願いしています。</p>
      <h2>連絡先</h2>
      <p>会社のホームページの制作を依頼される場合は以下のメールアドレスまでご連絡いただけると幸いです。</p>
      <p>hogehoge@pekepeke</p>
    </div>
  </div>

文章については適当です。

次はCSSファイルの方を編集していきます。

/*見出し部分*/
h1 {
  font-size: 3.0rem;
  font-weight: 500;
  margin-bottom: 10px;
}

h2 {
  font-size: 2.2rem;
  font-weight: 300;
  margin: 10px 0;
  padding-left: 10px;
  border-left: 8px solid #d29836;
  border-bottom: 2px solid #000;
}

h3 {
  font-size: 1.5rem;
  margin: 10px 0;
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
}

.main p {
  margin-bottom: 0.5rem;
}

/*表のデザイン*/
table{
  width: 90%;
  border-collapse: collapse;
  margin: auto;
}

table caption {
  padding: 5px;
}

table th,table td{
  padding: 10px 10px;
  text-align: center;
}

table tr:nth-child(odd){
  background-color: #eee
}

table tr th {
  background-color: #000;
  color: #fff;
}

menuの部分の中身が実装できました。見出しはh4まで使いそうもないので、h3までにしました。またpタグの段落を見えやすくするために余白を調整しました。

サンプル文章

あとはwebページの依頼をしてくれる人のために、画像を入れて文章なんかを書いておきます。文章と写真を横並びで表示させるために、HTMLとCSSを変更していきます。

<h2>サンプル文章</h2>
<div class="column2">
  <div class = "yoko">
    <img src="./image/image.jpg" alt="岩ちょこのアイコン">
  </div>
  <div class="yoko">
    <h3>web製作者 岩ちょこより</h3>
    <p>みなさん<b>夢</b>ってありますか？</p>
    <p>私は持っています。自分で作ったペイントソフトを使ってデジタルイラストを描くのが私の夢で、日々勉強をしています。</p>
    <p>今はSAIというペイントソフトを使っていますが、いずれは自分のハンドルネームをもじったソフト名で配布してみようと思います。</p>
  </div>
</div>
/*記事の途中で2カラムレイアウトを入れる部分*/
.column2 {
  width: 100%;
  overflow: auto;
}

.yoko {
  float: left;
  width: 50%;
}

img {
  border: 1px solid #000;
}

今回の記事でとりあえずPCのデザインは終わりました。次はJavascriptでメニューボタンが押された時の実装とレスポンシブデザインについての作業を書いていきます。

前回同様、この記事までの作業経過のソースコードを下に置いておくので、コピペして試してみても大丈夫です！！(試す場合は画像部分は適当な画像を使ってください)
ここまでのコードで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 class="article">
      <h2>料金の見積もり</h2>
        <p>会社のページを制作する場合は、webページ1つあたりで計算します。ただページ単価がそれぞれ違ったりしてややこしくイメージしづらいので時給換算でお願いしています。</p>
        <p>時給1000円でそれぞれのページにかかる時間から見積もりを算出させていただきます。詳しい作業にかかる時間は下記の表を参照していただければと思います。</p>
        <p>レスポンシブ対応になりますので、PC・タブレット・スマートフォンの画面に合わせたデザインを設計します。</p>
        <table>
          <caption>作業にかかる時間</caption>
          <tr>
            <th>ページの種類</th>
            <th>制作目安</th>
          </tr>
          <tr>
            <td>トップページ</td>
            <td>5hour</td>
          </tr>
          <tr>
            <td>お問い合わせページ</td>
            <td>4hour</td>
          </tr>
          <tr>
            <td>その他のページ(1ページあたり)</td>
            <td>3hour</td>
          </tr>
        </table>
        <p>トップページは必須になります。トップページの製作時間にはwebページのデザイン時間分が含まれています。他のページの製作はトップページのものを一部使い回しをしてデザインの統一を図るため少し短い時間で作業できる見込みになります。</p>
        <p>ロゴや経営者の写真などの画像データは企業様側に用意していただく形になります。(デザインをする上で作成する画像はこちら側で行います)</p>
        <p>画像の作成や修正箇所が多くなると上記の表から作業時間が超えることが予想されますので見積もり額プラス5000円くらいまでをみてもらえるとトラブルが少ないと思います。</p>
        <h2>注意点</h2>
        <p>コンテンツを運用する際のサーバーやドメインの管理、及び経費につきましては企業様側の負担でお願いしています。</p>
        <h2>連絡先</h2>
        <p>会社のホームページの制作を依頼される場合は以下のメールアドレスまでご連絡いただけると幸いです。</p>
        <p>hogehoge@pekepeke</p>
        <h2>サンプル文章</h2>
        <div class="column2">
          <div class = "yoko">
            <img src="./image/image.jpg" alt="岩ちょこのアイコン">
          </div>
          <div class="yoko">
            <h3>web製作者 岩ちょこより</h3>
            <p>みなさん<b>夢</b>ってありますか？</p>
            <p>私は持っています。自分で作ったペイントソフトを使ってデジタルイラストを描くのが私の夢で、日々勉強をしています。</p>
            <p>今はSAIというペイントソフトを使っていますが、いずれは自分のハンドルネームをもじったソフト名で配布してみようと思います。</p>
          </div>
        </div>
        <hr>
        <p>イラストはwebとは別で趣味でやっているので、イラスト系のタッチの画像を描いてwebページを作って欲しいのような依頼はお断りいたします。予めご了承ください。</p>
      </div>
    </div>
  <footer>
    <div class="footerLink">
      <div class="linkarea">
        <p><a href="https://www.iwachoco.com/">岩ちょこlab トップページ</a></p>
        <p><a href="xxxx">hogehogehoge</a></p>
        <p><a href="xxxx">hogehogehoge</a></p>
      </div>
      <div class="linkarea">
        <p><a href="xxxx">hogehogehoge</a></p>
        <p><a href="xxxx">hogehogehoge</a></p>
        <p><a href="xxxx">hogehogehoge</a></p>
      </div>
    </div>
    <p class="copyright">©︎2019-2021 岩ちょこ</p>
  </footer>
</body>
</html>

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

/*ロゴとタイトル部分*/
.titleWrapper {
  margin-top: 10px;
  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;
}

/***コンテンツ部分***/
.main {
  line-height: 1.5;
  padding: 20px 0;
  background-color: #333;
}

.article {
  width : 90%;
  padding: 10px 40px;
  box-sizing: border-box;
  margin: 0 auto;
  background-color: #fff;
}
/*見出し部分*/
  h1 {
  font-size: 3.0rem;
  font-weight: 500;
  margin-bottom: 10px;
}

h2 {
  font-size: 2.2rem;
  font-weight: 300;
  margin: 10px 0;
  padding-left: 10px;
  border-left: 8px solid #d29836;
  border-bottom: 2px solid #000;
}

h3 {
  font-size: 1.5rem;
  margin: 10px 0;
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
}

.main p {
  margin-bottom: 0.5rem;
}

/*表のデザイン*/
table{
  width: 90%;
  border-collapse: collapse;
  margin: auto;
}

table caption {
  padding: 5px;
}

table th,table td{
  padding: 10px 10px;
  text-align: center;
}

table tr:nth-child(odd){
  background-color: #eee
}

table tr th {
  background-color: #000;
  color: #fff;
}

/*記事の途中で2カラムレイアウトを入れる部分*/
.column2 {
  width: 100%;
  overflow: auto;
}

.yoko {
  float: left;
  width: 50%;
}

img {
  border: 1px solid #000;
}

/***footer***/
footer {
  background-color: #222;
  color: #fff;
  text-align: center;
  font-size: 0.9rem;
}

.copyright {
  font-size: 1.1rem;
}

.footerLink {
  width: 100%;
  overflow: auto;
}

.footerLink .linkarea {
  float: left;
  width: 50%;
  padding: 10px 20px;
  box-sizing: border-box;
}

.footerLink .linkarea p a {
  color: #fff;
  text-decoration: none;
}

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

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

Print Friendly, PDF & Email

CSSカテゴリの最新記事