きょうは HTML CSS から、Web サイト開設の流れまで学びます。
サイトを作るには、HTML と CSS の知識があった方がいいです。CMS などを使うと必要ないといえばいえますが、そもそも CMS もそれらでできていますのでね。
それに、複雑になればなるほど HTML CSS は必要になってくるので、この際、最初から学んでおくほうがいいと思います。
きょうはあなたと、それらを含め、Web サイト開設の流れを学習します。
私はブログ歴15年、あわせて1000記事以上書いてきて「Web 開設をゼロから作った経験」が何度もあります。三重県津市在住の男性です。
１. HTML は比較的やさしい言語
暑い日がつづいています。文章を技巧的に洗練されたものに換え、効果的に物語を再構成します。多くの読者にアピールする小説を作り上げねばなりません。
HTML は比較的やさしい言語です。
JavaScript には幾度も泣かされましたが、HTML はマークアップ言語といってプロブラム言語ではありません。まさにあつらえたとおりに”映る”ものです。そしたら外からもうひとつやってきました。「実はあなたの親友なんで」と遅ればせにつぶやくような CSS です。
マークアップ言語というだけあって、単純なテキスト情報に「タグ」と呼ばれる目印をつけることで、文章に注釈を入れてテキスト情報に意味をもたせているのです。
CSS は HTML に装飾を与える役を担っています。HTML だけでは文字のサイズを変えたり、色、背景などの装飾はできないのです。それを行うのが CSS で、拡張子は「.css」です。
HTML はWEB 制作の基礎ですが、CSS がなければ味も素っ気もありません。それに Web制作のクラウドソーシングに申し込みしょうにも JavaScript がセットになっているので、最低限この３つを同時に学ばないと仕事にさえありつけないのです。
１．URL
ともあれ、HTML （Hyper Text Markup Language）は Web 上のドキュメントを記述するためのマークアップ言語のひとつで拡張子は「.html 」です。ファイルには拡張子というものがありコンマ以下につくもので、 例えば、写真は jpg、PDFファイルは pdf、Word文書は docx、音楽ファイルは mp3などです。
このサイトは「https://pckatada.com」ですが、この文字列のことを《URL》と呼んでいます。URL は Web における住所のようなもので、「アドレス」と呼ばれることもあります。
２．HTTP
HTTP とは、データの送受信の方法についての決まりごと（これをプロトコルと呼びます）のことです。Web システムでは、ネットワークプロトコルとして TCP/IP をアプリケーションプロトコルとして HTTP を使用します。Web 技術は基本的にこれらの決まりごとにしたがって広がってきき、世界中でやり取りをすることができるのです。
３．HTML
HTML とは、データの表現方法について定義している言語のことです。HTML はマークアップ言語の一種で、Web ページの構造や見た目などを「<h1>見出し</h1>」のようにタグを使うことで書くことができます。
HTML タグは、すべて半角英数記号で書かれています。
<h1>HTML の基本</h1>-------見出し
<p>-------段落
HTML は、タグで文書を囲んで意味づけするマークアップ言語です。
</p>
マークアップ言語とは、文章の構造や見ばえなどに対して指定する言語のことで、記述される「<」～「>」で囲まれた文字列を「タグ」と呼びます。「<タグ>」で始まり、テキストを記述し、最後に「<タグ>」で閉じて使用します。
４．タグ
また、HTML ファイルはテキスト形式となっているためテキストエディタなどを使って人の目で確認しながら直接編集することができます。
| 意味 | タグ | 働き |
| 見出し | h1,h2,h3… | h1はタイトルにページに1個だけ。 |
| 段落 | p | <div>とは違います。 |
| リンク | a | クリックするとそのページに飛びます。 |
| 画像 | img | 指定した URL にある画像ファイルを表示します。 |
| テーブル | table,tr,td,th | 表を作ります。 |
| リスト | ul,ol,li | リストを作ります。 |
検索エンジンは、この構造をつかみ、ブラウザがタグを解析するのです。タグはたくさんありますがまずは基本のタグをしっかり覚えます。
5．拡張子
拡張子とは、例えば、写真は「 jpg」「png」、PDFファイルは「pdf」、Word文書は 「doc」、音楽ファイルは「mp3」などのように、ファイルを識別するためにつけています。ファイル名と拡張子の間は .（ドット）で区切られています。
拡張子の表示・非表示の設定は、フォルダオプションにて行います。エクスプローラー→表示、オプション。もともとの Windows では、「登録されている拡張子は表示しない」にチェックが入っているので、はずしておいた方がいいですね。
HTML Living Standard と CSS4 が2022年現在、標準になっています。
２．HTML 形式のファイルは、２つの要素から構成される
要素をどこに書くのか？ それが問題ですね。
1．要素
要素とはドキュメントを構成することで、要素を組み合わせてページを構成していきます。
- head 要素で、ページのタイトルや概要説明、キーワードに関する情報を記述する部分です。
- body 要素で、ページの内容や装飾方法を記述します。
これらファイル全体の要素を合わせて html 要素というのです。
テキストエディタに書きます。パソコンの「アクセサリ」に入っている「メモ帳」「ワードプレス」でも構いませんが、専用のもの（エディタ）があります。
例えば、「SublimeText3」で、無料です。ダウンロードするときは自分のパソコンが64bit か32bit どちらかを確かめてからしてください。32ビットは「2の32乗」、64ビットは「2の64乗」の情報をいちどに処理できることをあらわす表記です。
２．確認の仕方
- デスクトップ画面左下の、スタートをクリックし、設定(歯車マーク)を選択します。
- 「Windows の設定」画面が開きますので、[システム」を選択します。
- 画面が表示されたら、左メニューをスクロールして最下部から「バージョン情報」を選択します。
- 画面が開きますので、「システムの種類」を確認します。macOS は64ビット版に統一されており、32ビット版のAppをインストールして利用するとエラーが発生しますので注意してください。
インストールの方法です。特に「SublimeLineter」というプラグインが便利ですから必ず入れておきましょう。
３．head 要素を理解する
- <head>～</head> にはタイトルやページの概要、キーワードなどを記述します。
- <title> にはページのタイトルを記述し、META タグと呼ばれる <meta～> の部分にはページの概要とページのキーワードを記述しておきます。
- meta タグの「description」にページの概要を記述するときは、サイト全体ではなくそのページだけの概要を110字程度を目安に記述します。タイトルと合わせて検索結果に表示される部分なので、読むだけでそのページの内容がつかめるようにします。
- meta タグの「keyword」には、ページの要となるキーワードを５つ以内を目安に記述します。検索結果の上位表示の要因の一つといわれている部分です。
<!DOCTYPE html>
<html>
<head>
<title>ページのタイトル</title>
<link rel="stylesheet" href="cee/styles.css">
</head>
<body>
ここでは HTML の基本を説明しています
</body>
</html>
４．body 要素へ記述した内容はコンテンツに表れる
よく使うタグ
- <br /> タグに位置で改行。終了タグは必要なし。
- <p></p>
囲まれた部分がひとつの段落。開始タグと終了タグの位置に改行。 - <h1></h1>
↓
- <h6></h6> h1 が最上位。h6が最下位。
- <div></div>
囲まれた部分がブロック。<span></span>で囲んでフォントなどの装飾を行う。 - <ul></ul>
番号なしの箇条書き。<li></li>と組み合わせて使う。 - ＜ol></ol> 番号ありの箇条書き。
- ＜img>
画像を挿入。終了タグは必要なし。<src>に指定した画像が表示され、<alt>に画像の説明を記述。表示サイズの指定もできる。
内容に凝るより、１行でもいいから作って見るのが大事です。テキストエディタ、とりあえず「メモ帳」を立ち上げ書き込んでみます。【スタート】→【アクセサリー】から、
<html> //このページが HTML で書かれていることを宣言します。
<body> //ここからページの本体が始まることを宣言します。
<font color=”blue”> //文字の色を青にします。
<h1><center>ホームページ 大見出しを「h１」のサイズで中央に置きます。</center></h1>
</font>
<font size=12>
<center>まず文字だけのページ</centre>
</font>
</body>
</html>
必ず半角で入力してください。
- CMS（WordPressなど）ではこれらの記号は使わず、文字をそのまま入力するだけです。書き終わったら【ファイル】→【名前を付けて保存】通します。
- 【保存する場所】を moji.html とします。【ファイルの種類】を「すべてのファイル」にして「保存」を押します。
保存した「moji.html」がブラウザでどのように表示されるか確認しましょう。
【スタート】→ブラウザをクリック→【ファイル】→【開く】→【ファイルを開く】ダイヤログボックス→【参照】→マイドキュメント→一覧から【HTML】を選び開く→【moji.html】を選び開く→【OK】
そのファイルをクリックするとページの見え方が確認できます。
ページを修正する場合は、メモ帳を立ち上げ「ファイル」→「開く」です。
3．CSS （Cascading Style Sheets）とは？
CSS とは html などの要素をどのように装飾して表示するかを記述するスタイルシート言語のひとつです。
1．デザイン
html で表現できるほとんどのデザインを表現することができ、幅広いデザインが表現できます。基本的には、HTML と CSS を組み合わせて使用します。
HTML を改良した XHTML やブラウザ上で動作する Web プログラムの JavaScript、サーバー上で動作して情報を操作できる Perl（CGI）や、Perl より簡単な記述で日本語や画像の処理にも優れている PHP なども利用できます。
テキストの見せ方は CSS で
文字の大きさや行間などは CSS で調整します。
- フォントの大きさ：14px以上
- 行間：1.5em～2.5
２．CSS の基本
- 外部から読み込む CSS ファイル。＜head></head> の中に埋め込む。
- 局所的に指定する。<body></body>
<head>
<title>タイトル</title>
<meta name>”discription”content=”ページの概要”>
<meta name>”keywords”content=”キーワード”>
<link rel=”stylesheet”type=”text/css”href=”sample.css”>
</head>
必ず半角で入力してください。
「sample.css」の部分に外部ファイルの CSS ファイルを指定します。
p.{font-size:10pt}
p.→セレクタ
font-size→プロパティ
10pt→値
＜p></p> で囲まれた文字サイズを10ポイントにする、という意味です。
この開始タグと終了タグの間に「内容（コンテンツ）」を記述します。
３．プロパティ
- color →文字の色
- font-size →文字の大きさ。値には xx-small から xx-large までの7段階や px や
pt などがある。 - font-weight →文字の太さ。値には lighter（1段階細い）や bolder（1段階太い）、100～900までの数値を記述。
- text-decoration →文字の飾り（下線や取り消し線）、overline（上線）、underline（下線）、line-through（取り消し線）など。
- latter-spacing→文字と文字の間隔。（例）p{latter-spacing:8px}
- line-height →行と行の間隔。（例）p{line-height:10px}
- background-color →背景の色。カラーコードやカラーネーム。（例）p{background-color:”#ff0000″}
- background-image→背景の画像。p{background-color=”url（画像URL)”}
基本的にはこれだけで出来上がります。
例えば、この Web ページを右クリックして、「ソースの表示」をクリックすると表示される右上の赤枠が「head」です。「/head」はずっと下の方で、この画面にはでていません。その下に「body」があるという形です。
このページを右クリックして「ソースの表示」をクリックしてください。
4．Web サイト開設の流れ
Web サイトの作成の準備をします。
私が必要だと思う「WordPressの初期設定」は全部で15個。
- Web サイトを作成する。
- Web サイトを転送する。
１．契約しているプロバイダの Web サイト開設サービスを確認
- Web サイト開設サービスを利用するために必要な費用。
- WWW サーバーに保存できるデータの容量。
- Web サイト開設に関する注意事項。
２．Webページをつくってみよう
サーバーは、契約しているプロバイダーが無料で貸してくれる場合はそれを利用しましょう。プロバイダーの HP を見て、画面の指示に従って作業してみてください。どこのプロバイダーでもほぼ同じです。サーバーとは、あなたの作ったサイトを保管してくれるパソコンのことです。
HP とブログは厳密にいうと違うのですが、HTML に関しては同じです。縦に奥深いのがブログ、横に幅広いのが HP というイメージですね。HP は HP の文書を保存するフォルダをマイドキュメントの中に作ります。この作業をしないと、文書をサーバーに送れないのですが、ブログはそれらを必要としません。
例えば XFREE 「今すぐ新規登録」をクリックします。ユーザーIDとパスワードを入力し、「登録」をクリック。必ず記録をとっておいてください。
いよいよページ作りです。
- テーマを決める：自分が興味をもっていることや得意な分野からテーマを決めます。定期的に更新することが重要になってきますからね。
- 内容を決める：テーマが決まったら、そのテーマに沿って大まかな内容を決めます。この時、キーワードを書きだすと考えやすくなりますね。
- Web サイトの構成を考える：ブログであれば、最新記事がトップになります。HPであれば表紙にあたるトップページからそれぞれのページに移動します。
３．写真や画像を貼り付ける
画像を貼り付けたい場合は、いったんブログに乗せたら、無断でコピーされるのを防ぐのは難しいので、コピーされても差しさわりのない写真を使います。大きな写真は表示に時間がかかるのでできるだけ圧縮しましょう。
Png 形式は画質が良くとてもきれいですが、それだけ容量が大きいので、Jpg 形式、もしくは WebP がいいです。見出し用の画像は大きめのものを使いますが、大きすぎてコンテンツからはみ出してしまうことが往々にしてあります。
img {
max-width:100%;
}
CSS フォルダ内の「style.css」をテキストエディタで開き、最初に書き足しておきます。
「圧縮ってどうするの？」
とりあえず縮小しましょ、サイズを小さくするのです。
それを画像名を付けて保存します。JPG か PNG のどちらかです。最近は Google が更に圧縮して画像の質が変わらない Webp という画像があります。画像には必ず「説明」を付けてください。
HTML で見ると「”」と「”」の間に画像のファイル名を拡張子までまで含めて入れてください。その画像が一体何なのか説明を付けるのがルールです。
最近では JPG や PNG だと100KB 以上になってページを開くとき時間がかかってしまい、Google に認知されなくなるのを嫌って画像を軽くする方法がとられています。squoosh.app というページから Webp という無料のソフトを利用できます。
<img src=”～”> 表示する画像名を入れます。～にファイル名を入れます。
<img width=”～”> 画像の横幅（height にすると縦幅）ピクセル数で指示します。～には数字が入ります。どちらか片方だけ指示すると縦横比を保ったまま縮小・拡大されます。
<img alt=～> その画像が何なのか説明文（～の部分）を付けます。
必ず半角で入力してください。
アップロードします。
表示されました。完了です。気に入らないところがあったら、元のファイルを修正しアップロードし上書きします。ブログは小マメに書き換えてこそ、おもしろいものです。何回も更新してゆくうちに「もっと複雑な、もっとかっこいいものに挑戦したい」と思ったら、ご自分で HTML を勉強してください。
実際の HTML は多くの約束事や文法のある企画です。
タグもたくさんあります。ブログや HP の良いところは何度でも書き直せるところです。
ディベロッパーツールが使えると「サイトのコードを真似できます」。このスキルは違反ではありませんので、コーディングする速度が速く楽にできます。
- 現在閲覧しているページの要素を選択して、どんな CSS が使われているか確認できる。
- CSS を書き足したり、削除するとどうなるかをブラウザで見ることができる。
- スマホから見た場合にどんな表示になるか見ることができる。
スマホで見る場合
英語ですがわからなくても内容で理解できればいいですよね。日本語で説明しているのがこちらのサイトです。
「新米Webデザイナーがこれだけは抑えておきたいデベロッパーツールの使い方」
初心者向け！Chrome の検証機能（デベロッパーツール）の使い方
こちらへ尋ねれば返事がもらえます。日本語に翻訳すればできます。
「フレックスボックス」という「枠づくり」です。自由に伸び縮みできるので便利です。エラーが出たら「デベロッパーツール」で確認作業してみましょう。
日本語で詳しく説明されているサイトです。「Bootstrap」というテンプレートも人気があります。こちらのサイトで詳しく解説しています。Bootstrapのグリッドシステムの使い方を初心者に向けておさらいする。
もう一つは、【Bootstrap 4 入門】初心者は2つの使い方を覚えるだけでかなり便利に Bootstrap を使えるようになる、です。
HTML の基本は覚えておいて損しません。
４．HTMLはマークアップ言語。プログラム言語ではない
HTMLを学ぶことは、ウェブページの作成に必要な基礎的なスキルを習得することに役立ちますが、プログラミングに必要なコンピュータサイエンスの概念やアルゴリズムについては学ぶことができません。
マークアップ言語は、文書の構造や表示方法を指定するための言語です。主な目的は、文書の要素や要素の関係をタグや特定の形式でマークアップすることです。マークアップ言語は、コンピュータやソフトウェアに対して文書の構造や意味を伝える役割を果たします。
一般的なマークアップ言語の例
HTML（HyperText Markup Language）:構造化されたデータを表現するためのマークアップ言語です。XMLはタグを使用して要素と属性を定義し、データの交換や保存に使用されます。サイトマップなどはこれです。
Markdown:ウェブページの構造やコンテンツをマークアップするための言語です。HTMLはタグを使用して要素を定義し、ブラウザはこれを解釈してウェブページを表示します。このページのことです。
XML（eXtensible Markup Language）:プレーンテキストの書式を指定するための軽量なマークアップ言語です。Markdownはシンプルな文法を持ち、ウェブ上のコンテンツやドキュメントの作成に広く使用されています。
マークアップ言語は、文書の構造や見た目を指定するためのルールや規則を提供します。これにより、文書の解釈や表示を行うソフトウェアやアプリケーションは、マークアップ言語に基づいて正しく処理や表示を行うことができます。
あとがき
マークアップ言語の利点は、文書の意味や構造を明示的に示すことで、一貫性や柔軟性を持ったデータの表現や処理を実現することです。
自分だけのサイトを作ることで身につけた HTML や CSS の知識は、SNS 全盛の現代において思いがけないところで役にたつと思います。
今は昔と違ってレンタルサーバーのサービスが充実しています。PHP で作られている WordPress も使えます。
プログラミングを学ぶ場合、HTMLの前に基本的なプログラミング言語である Python や JavaScript も学ぶことをお勧めします。これらの言語は初心者にも理解しやすく、様々な用途に応用できるため、プログラミングの入門として最適です。
また、プログラミングに興味がある場合は、プログラミングについての基本的な概念や用語、アルゴリズムなどについて学ぶことも重要です。
ブロック機能やアクセス拒否機能を活用
それと、作るだけではなく、制作者は「保守運用は大丈夫か」を確認した方がいいです。まれに、サイトに設置したメールフォームを通してしつこいメッセージが送られてくることがあります。こんな時はブロック機能やアクセス拒否機能を活用します。サーバーの設定でアクセス拒否ができることもあります。
これらの機能は、IP アドレスを使って送信先を特定しています。メールフォームなどでメッセージを送信する場合、IP アドレスが記録されている場合が多いので、受信したメッセージに IP アドレスが記載されていないか確認します。
サーバーのアクセス拒否設定のしかたは、レンタルサーバーによって異なるので、使っているサーバーの説明を確認しましょう。
HTML/CSS について、悩みや疑問がありましたらご自由にコメント欄に投稿してください。
コメント