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

目次


・Webサイト構築で大変なこと
・HTMLサンプルコード
・CSSサンプルコード
・JSPサンプルコード
・大変だけどサイトを自作してよかったこと


Webサイト構築で大変なこと


日々のサイト構築お疲れ様です。
自作で作成していると知識が沢山身についてとても勉強になりますし、スキルアップできた自信につながりますよね。

ですが、自力でやりきろうと思うとエンジニアと同じくらいの知識が必要になりますし、
ネットに転がっているサンプルだけでは対応できないことも多々あるかと思います。

そこで、今回は私がサイトを自作して調べても分かりずらかったものやネットにあまり出ていないものをまとめていきたいと思います。

サイト構築で大変なことはやはり調べる力と構築する力が必要です。
身に着けるためには、私のように独学でもサイトを作ってみたり、スクールに通うことが考えられます。

ですが、ぶっちゃけスクールに通うよりIT業界に就職して、プログラミングを学んだほうが応用も効きますし、基礎が身に付きます。

基礎を学んで自分で作れるようになったらフリーランスでもいいですし、別業界に転職ぜも全然構いません。 私の考え方はスクールは基礎しか教えてくれないので、仕事でプログラミングする人たちと全然知識が足りないことが多いです。
なので、数十万円払うくらいなら短期間でもお金をもらいながらプログラミングを学ぶことをおすすめします。

期間は早い人で1年、遅い人でも3年以内に基礎は身についていると思うので、ここまでは修行するのがおすすめです。
独学でやる人は、自分で調べて理解する力が必要になります。

この記事を読めば基本的なことが分かるようにしてありますので、ぜひ参考にしてください。
ゼロベースから再構築しなければならない場合などはここを見れば基本は構築できるようになるかと思いますので、必要なときに見返してください。

HTMLサンプルコード


【宣言、リンク、css、スマホ対応】

  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>オワコンSE｜トップページ</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>
  12.   <br>
  13.   <a href="index.html">トップページ</a>
  14.   <a href="category.html">カテゴリ</a>
  15.   <a href="archive.html">アーカイブ</a>
  16.   <a href="link.html">リンク集</a>
  17.   <a href="contact.html">問い合わせ</a><br>

解説
・1行目は、htmlであることの宣言をします。無くても構いませんが、ほとんどのWebサイトが記載してあります。
・3行目は、ヘッダーの部分を宣言します。
・4行目は、文字コードをUTF-8に指定する意味です。デフォルトのShift-JISは環境によって文字化けをする場合があるので、HTMLでは、UTF-8に統一します。
・5行目は、スマホ版に対応するためのソースです。css側で@media screen内に記述し、サイズなどを指定します。
・6行目は、ファビコンを挿入します。href部分のパスを間違えると正しく表示されません。
・7行目は、タイトル部分です。ここはタブに表示される部分になります。
・8行目は、cssを指定する部分になります。ファイル名とパスも階層を間違えると正しく表示されませんので、気を付けましょう。
・9行目は、ヘッダーの終わりを宣言します。
・10行目は、Webサイトの画像デザインを挿入します。拡張子とファイル名が正しくないと表示されませんので、確認をしましょう。
・11行目は、トップページの画像を挿入します。当サイトだとWeleocme to my Pageの部分です。画像はいつでも任意に変更できます。
・13～17行目は、各機能へ飛ばす部分になります。サイト全体で使うことになるので、コピペして使えるように分かりやすい名前にしましょう。


【タイトル、pタグ】

  1. <h1>挨拶</h1><br>
  2. <p>
  3. pタグ内に文章を書いていきます。<br>
  4. </p>

解説
・1行目は、タイトル部分になります。h1～h7まであります。
・2行目と4行目の範囲内に文章などを書いていきます。


【広告挿入】

  1. <!-- admax -->
  2. <script src="生成したコードをコピペします。"></script>
  3. <!-- admax -->
  4. <br>

解説
・1行目は、コメントなので、無視して構いません。
・2行目のscript内にコピペします。生成されたソースがscriptまで記載してあればそのままコピペします。


【フッター、宣言終了】

  1. <a href="index.html">戻る</a>
  2. <footer>Copyright &copy XXXSE Inc. All Rights Reserved.</footer>
  3. </body>
  4. </html>

解説
・1行目は、トップページに戻りやすくするために記述しています。特に無くても問題ないです。
・2行目は、コピーライト表記です。マルシーを表示するには上記のような記載になります。
・3行目は、body全体の終了宣言です。
・4行目は、html全体の終了宣言です。


【見出し】

  1. <!--
  2. *************************************************
  3. index.html
  4. 版数：XX.XX版
  5. 作成日：20XX/XX/X
  6. 作成者：XXXX
  7. 更新日：XXXX/XX/XX
  8. 更新者：XX
  9. 概要：機能の役割などを書く
  10. *************************************************
  11. -->

解説
・1行目と、11行目は、コメントの範囲を表します。
・2行目と、10行目は、役割などを書く際の範囲を表します。
・3行目～9行目に機能名や版数、作成者などを記載します。
一般的には、機能名、版数、作成日、作成者、更新日などを書くことが多いです。ここは決まりはないので記載しないケースもあります。


【画像挿入】

  1. <img src="../../XX/XX/XX/XX.png" alt="XX.png" width="XX" height="XX"><br>

解説
・1行目は、画像を挿入し、表示します。サイズを合わせるために、 widthとheightに必ずpxで指定してください。

また、階層が合うように../で合わせましょう。
指定した階層を表すために1階層を../で表します。
階層が深いほどミスが多くなるため、なるべく少ない階層で合わせていきましょう。


【リンク先を別ページのウィンドウで開く、リンク先のページを開く】

  1. <a href="URLや遷移先のページのリンクを書く" target="new">こちら</a>

解説
・1行目は、リンク先を指定すると飛ぶようになります。
こちらの部分を最適な日本語にすることで、クリックしてページが飛ぶようになります。
・target="new"を指定することで新規でウィンドウが開くようになります。
・target="_blank"で記述する方法もありますが、現在はセキュリティの脆弱性の問題もありほとんど使われなくなりました。
原因として、リンク元であるWebページを操作できるようになってしまうことや、ダイレクトに受けやすいことからパフォーマンスが低下する原因になります。
極力使わないようにしましょう。


【変換したコードの記載】

  1. <div id="wrapper">
  2. <ol style="list-style:decimal-leading-zero outside;in-left:0;padding-left:36px;margin:0;background-color:#330;color:#FF7;">
  3. <li style="background-color:#330;">&lt;a href="URLや遷移先のページのリンクを書く" target="new"&gt;こちら&lt;/a&gt;</li>
  4. </div>

解説
・1行目はdivで囲った範囲の表示範囲の指定をする。位置も調節をする。
・2～3行目は、変換したコードをコピペする。
・4行目は、コピペしたコード範囲の終了宣言。


いかがでしょうか？
少し難しく感じましたかね。
これらのコードが分かるようになるとプログラミングが楽しくなってくるのではないかと思います。

ここに書いているコード以外を使う場合には自分で調べて目的を達成させることがスキルアップにつながります。

次にcssで苦労した点などを書いていきたいと思います。


CSSサンプルコード


JSPサンプルコード

大変だけどサイトを自作してよかったこと

戻る