トップページ カテゴリ アーカイブ リンク集 問い合わせ

目次


・HTMLって何？CSSって何？
・構文を理解する
・まずは準備しよう
・サンプルコードを書いてみよう
・サーバーにアップするには？


HTMLって何？CSSって何？


さて、いきなり書いてみましょう！と言われてもいまいちイメージがつかないと思いますので、
ここでは座学として、Webサイトを作るなら知らないといけないHTML/CSS/PHPについて解説していきたいと思います。
単純な移動や文字だけなら誰でも作れます。これを静的といいます。
ですが、長くサイトを運営していると問い合わせページや情報商材を販売したいと思ったときに、
パスワード関連、決済導入方法、セキュリティ対策をする必要がでてきます。概念を学んでおくことは後々重要です。

・HTMLとは？
正式名称を「HTML（ハイパーテキストマークアップランゲージ）」といい、Webページを作成するために使用されるマークアップ言語です。
Webページの構造や基本的な情報を構成する役割を担っており、段落や見出し、リンク、画像の表示など、Webサイトを作成する上で必要な機能を制作することができます。

また、HTMLは、タグ・要素・属性の3つで構成されており、専用の文字列を用いて文章の構成や役割を示します。

たとえば、単語や画像をハイパーリンクさせたり、単語を斜体にしたり、フォントを大きくしたり小さくしたりすることができます。 HTMLの利点はWeb制作ツールがなくても作成できる点や、プログラミング初心者でも学びやすいのが利点です。

また、構築者以外は更新できないためセキュリティリスクが低いという特徴もあります。
HTMLにもバージョンがあり、今までは「HTML4」「XHTML」「HTML5」などがありました。
2021年1月に「HTML5」が廃止されたため、今後自作していくには、必然的に「HTML Living Standard」を学んでいくことになります。

・CSSとは？
CSS（シーエスエス）とは、「Cascading Style Sheets（カスケーディングスタイルシート）」の略で、Webページのデザインやレイアウトを定義するスタイルシート言語です。
CSSの役割としては、Webページの文字サイズや色、フォント、行間、余白、背景色、画像の設置、下線や枠、表の作成など、さまざまなデザインを指定することができます。

CSSは、Webページの基本となる言語であるHTMLと組み合わせて使用されます。
HTMLはWebページの構造を定義する言語で、CSSはその構造に対するスタイルや装飾を指定します。

両者は密接に連携して、美しく整ったWebページを作成するために使用されます。
CSSはプログラミング言語ではありませんが、Web制作を始めるにはまずCSSやHTMLを学ぶことがおすすめです。

・PHPとは？
PHP（Hypertext Preprocessor）とは、WebアプリケーションやWebサイトの開発に特化したプログラミング言語です。
シンプルさに重きを置いた「スクリプト言語」に分類されれます。

HTMLと組み合わせて使用することができ、Webページに「動き」を与えることができます。
文法がシンプルでわかりやすく、基本的な文法を習得すれば簡単なプログラムをすぐに書くことができます。

オープンソースとして提供されており、無料で使用できる言語のインストールだけでなく、公式のマニュアルも無料で閲覧できます。
問い合わせフォームやアンケートなどの動的なものはPHPで作られることが多いです。

処理の流れは以下の通りです。
①Webサーバー上でPHPコードが実行され、動的にHTMLを生成します。
②サーバー側でデータの処理やデータベースとのやり取りが行われます。
③最終的な出力がクライアントに送信されます。

例として次のような機能を作れるようになります。
・お問い合わせフォームの作成
・データベースとの連携
・検索機能の作成
・ブログの作成
・グループウェアシステムの作成
・ECサイトの作成 ・SNSの作成


構文を理解する


プログラミングを上達するためのコツは構文を理解することです。
プログラミングは一文字違えば意図した命令通りに動いてくれません。
今後プログラミングをしていくとエラーを見つけて修正する(デバッグ)作業を沢山することになりますが、 構文を理解していないと見つけられないので、HTML/CSSの構文を解説していきます。

・HTML
<>タグと呼ばれるもので囲む
始まりと終わりを書く
改行タグ

  1. br

文章を書くために必要なpタグ

  1. <p>
  2. ・ここに文章を書いていく
  3. </p>

フォーム入力タグ

  1.  <tr>
  2.  <th>お問い合わせ内容<br /></th>
  3.  <td><textarea name="お問い合わせ内容" cols="50" rows="5"></textarea>
  4. </td>
  5.  </tr>
  6.  



プルダウンメニュー

  1. <tr>
  2. <th>サイトを知ったきっかけ</th>
  3.  <td><input name="サイトを知ったきっかけ[]" type="checkbox" value="友人・知人" /> 友人・知人
  4. <input name="サイトを知ったきっかけ[]" type="checkbox" value="検索エンジン" /> 検索エンジン</td>
  5. </tr>

・CSS

  1. body{
  2. text-align:center;
  3. color:orange;
  4. }
  5. p{
  6. width:99%;
  7. height:100px;
  8. text-align:center;
  9. }

意味：
HTMLで設定したbodyタグを設定する。
内容は、文字を中央寄せにしてね。
色をオレンジ色に指定してね。
こんな感じで意味を理解しながら書いていくとプログラミングの抵抗がなくなると思います。
不明点は、解決するまで調べる習慣を身に着けてください。


まずは準備しよう


イメージができてきたところで、ここから書いていきましょう。
メモ帳でも書くことができますが、メモ帳だと改行やインデント(列をととのえる)などがやりづらいので、テキストエディタをインストールします。

サクラエディタの最新版をダウンロードしてくれば、OKです。

言語に特化したものも用意されていたり、色分けを自動的にしてしてくれるので、構文なのか文字なのか、どの言語を今使っているのかが分かりやすくてて便利です。

インストールできたら、始めましょう。
デスクトップ上にフォルダをまずは作ります。右クリック→新規作成→フォルダです。名前はなんでもいいです。HPとかにします。
今後はここに沢山作っていきます。

試しにそのフォルダを開いてそこで右クリック、新規作成→テキストドキュメントをクリックしてください。
新規 テキストドキュメント.txtになっているかと思います。
もし、拡張子が表示されていなから拡張子を表示するように設定を変えてください。
わからなければ調べていきましょう。
次にF2キーを押下して、「新規 テキストドキュメント.txt」を「index.html」にしましょう。いったんはこれで大丈夫です。
同じ要領で再度「新規 テキストドキュメント.txt」を作り「index.css」にしましょう。
これで準備ができました
あとは、先ほどインストールしたサクラエディタを開いて、ドラックアンドドロップで開きましょう。


サンプルコードを書いてみよう

いよいよサンプルコードを書いてみましょう。
理想は、コピペをするのではなくて、自分で書いてみて調べながら進めていきましょう。

ここに書いてあるサンプルコードはあくまで例文ですので、自分の作りたい機能などを調べて修正していく必要があります。
ここでは必要最低限だけ載せておきます。意味などは自分で調べてみてください。
・html

  1. <!DOCTYPE html>
  2.     <html>
  3.     <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width,initial-scale=1">
  6.     <link rel="icon" href="img/001.ico">
  7.     <title>ブラウザのタブバーに表示されます。</title>
  8.     <link rel="stylesheet" href="index.css">
  9.     </head>
  10.     <body background="img/img001.gif">
  11.     <a href="index.html"><img src="img/welcome.gif"></a><br>
  12.     <br>
  13.     <a href="index.html">ページを複数作る</a><br>
  14.     <a href="category.html">ページを複数作る</a><br>
  15.     <a href="archive.html">ページを複数作る</a><br>
  16.     <a href="link.html">ページを複数作る</a><br>
  17.     <a href="contact.html">ページを複数作る</a><br>
  18.     <h1>タイトルを書きます。</h1><br>
  19.     <p><br>
  20.     ここに本文を書いていきます。<br>
  21.     タイトルを増やしたい場合は<h1>から<br>をコピーして追加します。<br>
  22.     h1以降のタイトルを書く場合はh2-h7までの見出しを使います。<br>
  23.     理想はh6くらいまでがベストです。<br>
  24.     </p>
  25.     </div>
  26.     <br><br>
  27.     <a href="../../index.html">戻る</a><br>
  28.     </body>
  29.     </html>

・css

  1.     /*サイト全体の設定*/
  2.     body{
  3.     text-align:center;
  4.     color:orange;
  5.     }
  6.     p{
  7.     margin: 5px auto;
  8.     text-align:center;
  9.     display: block;
  10.     /*border: 1px solid #000;*/ /*本番環境はコメントアウト*/
  11.     }
  12.     p{
  13.     font-size:15px;
  14.     width:650px;
  15.     text-align: left;
  16.     display: inline-block;
  17.     }
  18.     /*タイトルの構成*/
  19.     h1,h2,h3,h4,h5,h6,h7{
  20.     margin: 5px auto;
  21.     text-align:center;
  22.     display: block;
  23.     /*border: 1px solid #000;*/ /*本番環境はコメントアウト*/
  24.     }
  25.     h1,h2,h3,h4,h5,h6,h7{
  26.     font-size:15px;
  27.     width:650px;
  28.     text-align: left;
  29.     display: inline-block;
  30.     }
  31.     /*画像の構成*/
  32.     img{
  33.     width:220px;
  34.     height:100px;
  35.     }
  36.     /*更新履歴のデザイン*/
  37.     rireki{
  38.     width:99%;
  39.     border-bottom: 1px dashed #ffa500;
  40.     }
  41.     box{
  42.     top:0px;
  43.     left:0px;
  44.     padding-bottom:10px;
  45.     }
  46.     headerSearchText{
  47.     line-height:30px;
  48.     padding-left:10px;
  49.     padding-right:28px;
  50.     }
  51.     headerImage{
  52.     width:20px;
  53.     position:absolute;
  54.     top:10px;
  55.     left:180px;
  56.     }
  57.     /*検索窓の設定*/
  58.     form{
  59.     width:890px;
  60.     }

これらをhtmlとcssにコピペして、少しづつ調べながら追加、修正していけば理想のサイトに仕上げることができると思います。

一行一行は解説すると勉強にならないと思いますので、コピペして、動かしてみて確認しながら色々追加して作ってみてください。

動的なものになると難易度があがるので、まずはページを完成させるところを目標としましょう。

また、サンプルコードとして、Webサイトのページから右クリック→ページのソースを表示とするとコードが書いてありますので、使いたいと思っている人のWebサイトのコードを調べて自分好みのサイトに仕上げるのも上達のコツです。

自分の場合ですが、昔はサンプルコードがなかった時代にパソコンを使っていたため、先人のコードをページのソースの表示から毎回見ながら書いていたことがあります。
調べ方がわかれば楽しいと思いますので、ぜひやってみてください。


サーバーにアップするには？

ある程度形になってきたら、サーバーにアップしていきましょう。
今作っているものをみんなに見てもらうためには、ネットに公開しないといけません。

そのためには、レンタルサーバーを使う必要があります。
初心者のうちは、ロリポップやサクラサーバーなどをお勧めしています。

ただ、将来的に本格的に容量の大きいものを作りたい、PHPなどの動的なものも作りたい場合はエックスサーバーがおすすめです。

10日間の無料期間がありますので、スタンダードで問題ないかと思います。
ちなみに、ロリポップだったか一部のサーバーではPHPが対応していない場合もありますので、確認しておきましょう。

作成方法は普通にアカウントを作ります。
しばらくするとメールボックスに重要と書かれているメールにはIPアドレスやパスワード、管理画面のURLなどが記載されていますので、削除しないようにしましょう。

エックスサーバーの場合、管理画面からログインすると、エックスサーバー契約ページにて、「ファイル管理」や「サーバー管理」が行えるようになるので、
ここをブックマークしておくと便利です。

作成したファイルをアップしたい場合には、「ファイル管理」を選択します。
it001_01.png
「ファイルマネージャー」から「一番最初のディレクトリ」に移動→「xxx.xsrv.jp」をダブルクリック→「public_html」をダブルクリック→「index.html」があるのを確認します。
it001_02.png
デスクトップ上に作成した、「index.html」をファイルマネージャーにドラックアンドドロップすると反映されます。

PCで作成した階層に合わせてフォルダを作成し、画像やドキュメントなどを合わせていきます。 階層がずれるときちんとページが移動しないので、注意しましょう。

自分のホームページのアクセスの方法ですが、作成後1-2時間程度でページに反映されるので、そのあとに、htttps://xxx.xsrv.jp/index.htmlと入力してみてください。
ページが表示されれば無事完成です。

自作でホームページを作るのが面倒そうだなとここまでで感じた方は、WordPressもあります。
インストール後にURLの設定とデザインの設定をするだけで気軽に文章を書くことができます。
ぜひ、自分に合った方法でやってみてください。

私の場合、本業がIT屋なので自力で作成してスキルアップしていきたい変態なので、他の方はWordPresssの検討もよいかと思います。
ここまでついてこれれば初心者モードから脱却しています。

あとは自分で調べながら、問い合わせフォームの書き方を学んだり、決済システムの導入を勉強していく必要があります。
少しづつ自分だけのサイトを構築していきましょう。
最後まで読んでいただきありがとうございました。


戻る