WEB

はじめての人の為のweb制作

せっかく今までweb系の事やってきたので、webの記事もたまには書いてみようかと思います。
まず今回初めての人の為の初歩的なことからまとめてみたいと思います。

HTMLを書いてみる

webサイトを作る際の基本になるHTMLを書いてみましょう。

テキストエディタで文字を打ったりもしくはコピペするだけで大体できます。エディタはwindowsのメモ帳やMacだとmiあたりのソフトで構いませんが、色々あるので選んでみましょう。

  • sublimetext
  • Brackets
  • Visual studio code
  • Atom
  • Dreamweaver

この辺りから選ぶと良いです。個人的にはちょっとしたコードを書く時は軽めのsublimetextを使い、きっちりサイトを構築する時はBracketsかvscode( Visual studio code )を使います。

それぞれネットで調べてプラグインを入れたり、テーマを変えて使いやすいようにカスタムします。

Atomは使ったことはありますが、現在は使ってないですね。DreamweaverはAdobe製で高機能なのですが、重いのであまり使いません。しかし更新作業などでライブビュー（コードと画面の表示を同時に見れるモード）を使うことはあります。ややこしいテーブル（表）をいじる時とかですね。
Dreamweaverは有料なのと、ある程度マシンスペックが必要な点に注意。

とにかく各エディタについてそれぞれ検索すればインストールやプラグインの入れ方など出てくると思いますので予め自分の使いやすいようにカスタムしてください。

面倒ならホント最初はメモ帳でもいいです。

<html>
<head><title>ページのタイトルが入ります</title></head>
<body>
<h1>私のサイト</h1>
</body>
</html>

これをファイルとして「index.html」という名前で保存してダブルクリックなんかでブラウザで開けばウェブサイトの原型が出来上がりです。実際にアップロードしたのはこちらのリンクで確認してください。(※pcの設定で拡張子を表示するようにしておいてください)

ちなみにindexというのはトップページのファイルにつけられる名前です。web業界のルールとしてそういうもんだと思ってください。

<title>と </title> の間に入れた文字はブラウザのタブに表示されるページのタイトルです。あと検索エンジンでの検索結果で表示されます。

<body> と </body>の間に入るものがそのページのコンテンツになります

ただしこれはかなり原型も原型で、これではまともなサイトとは言えません。もう少ししっかり文書としての内容を記述していきます。

もうちょいきっちり書くと

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>ページのタイトルが入ります</title>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="author" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="">
<!--[if lt IE 9]>
<script src="//cdn.jsdelivr.net/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<link rel="shortcut icon" href="">
</head>
<body>
<h1>私のサイト</h1>
<p>テキストが入ります。</p>
<ul>
<li>リスト</li>
<li>リスト</li>
</ul>
</body>
</html>

となります。

サンプルはこちら

desctriptionやkeywordなどはページとして目には見えないけど設定として入力しておくべきです。
descriptionは検索エンジンでの検索結果に表示される内容なのでユーザーに見てもらった際に興味を引くような内容を考えましょう。keywordはサイト内に含まれる重要なキーワードを入力するのですが、SEO（検索エンジン最適化）的に今は あまり重要視されませんので気持ち程度で構いません。

他にはIE9以下の対策の記述がありますが、とりあえずコピペでいいです。

<body>内の要素ですが、<h>タグで文書としての見出しを設定します。<p>はパラグラフなので通常の文章を入れます。<ul>と<li>はリストです。

他にもHTMLで使うタグは色々あるので、用途に合わせて正しいものを選びましょう。

タグを適切に選ぶことで、検索エンジンにサイトを正確に評価してもらえる可能性が高まります。

それによって検索順位にも影響がある可能性が上がります。

しかしこれでは文字が大きすぎたりしますよね。他にも色をつけたりしたいですよね。そこで使用するのがCSS（カスケーディングスタイルシート）です。

HTMLはあくまで文書ファイルです。

  • 文字の大きさや色を変えたい
  • レイアウトを組み変えたい
  • 要素と要素の間隔を取りたい

こういった装飾についてはCSSというものを使ってデザインを行います。

HTMLは文書、HTMLのデザインはCSSとそれぞれのファイルの意味を理解しておきましょう 。

今回は一旦説明は省きますが、またの機会に説明できればと思います。

普段見ているwebサイトはこういった技術の結晶で、結構手間がかかっているという事を理解してもらえたと思います。実際にHTMLなんかを記述してみたら分かると思いますが、結構手間なんですよね。

今回はまずHTMLとCSSでwebサイトが出来るということと、HTML記述もそれなりに手間がかかるということを理解してもらえれば十分です。

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

CAPTCHA