Web制作

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

2015.09.08

2017.05.23

コード表

通常ホームページはコーディングを行い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;
}

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

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

SHARE

この記事の筆者

デザイナー 若井 徳彦

デザイナー 若井 徳彦

ターゲットに合わせたUIやUX、目的を達成させるためのデザインをモットーに取り組んでいます。SEOやグロースハックとの親和性の高いデザインが求められてると感じています。

Archive

CONTACT

06-6537-9941
受付時間
9:00〜19:00
休日
土日祝日

株式会社ゼロワンアース
〒550-0012 大阪市西区立売堀2-5−41合田ビル6F

メールで問い合わせる

ホームページで成果をあげるには、
まず現状分析

反響のないホームページをあきらめていませんか?ホームページで成果をあげるためには、現状を分析し改善していく必要があります。大阪市西区の本社にて無料相談を受け付けておりますので、ホームページ制作のことでお悩みの方は上記CONTACTより、お問い合わせください。