ホームページ制作のコーディング

コード表

通常ホームページはコーディングを行いWebベージとして仕上げます。ホームページ制作やプログラミングに精通していない方にはコーディングは聞きなれない言葉だと思います。今回はコーディングが何なのかについてご説明させていただきます。

ホームページ制作の流れ

コーディングの前に大まかなホームページが形になるまでの流れについてふれておきます。

ホームページの設計: 打合せした内容を元にホームページの設計を行います。
原稿制作: ホームページの設計を元に各ページの原稿を制作します。
デザイン制作: ホームページの設計、原稿を元にデザイン制作を行います。ケースバイケースですが原稿よりデザインが先行することもあります。
コーディング: 仕上がったデザイン、原稿を元にコーディングを行いWebページとして完成させます。

ホームページ制作のコーディングとは？

流れを見ていただければわかるようにコーディングは仕上がったデザイン、原稿を元にソースコードを記述しWebページに仕上げる作業です。主にHTML、CSS、JavaScript、PHP等の言語が使われます。

こちらのサンプルページをごらんください。

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>コーディングとは？のサンプルページ</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<article id="wrapper">
  <h1>DEMO PAGE</h1>
  <div class="block">
    <div class="inner">
    	<p>これはデモコンテンツです。</p>
    </div>
  </div>
  <div class="block02">
    <p>ホームページとはこのようにHTMLなどのソースコードを記述し制作されています。</p>
  </div>
</article>
</body>
</html>

CSS

*{margin:0; padding:0;}

body{font-family:sans-serif; text-align:center;}

h1{margin-bottom:20px;}

.block{
  width:100%;
  padding:50px 0;
  margin-bottom:20px;
  position: relative;
  overflow: hidden;
  height: 400px;
  background:#0CF;
}
.inner{
  width: 1500px;
  height: 300px;
  padding: 50px 0;
  position: absolute;
  left: 50%;
  margin-left: -750px;
  background: #FC3;
}
.block02{
  width:1000px;
  padding:200px 0;
  margin:0 auto;
  background:#eee;
}

パワーポイントでも作れそうな見た目にはすごくシンプルなページなのですが上記のようなソースコードが記述されています。

ホームページはこのようにこのようにコーディング作業によって仕上げられています。