ホームページはどうやって出来ているか

PAK_PHP9V9A6882_TP_V

ホームページをお持ちでないダイビングショップは今や極少数派かと思います。

個人的には、そんなショップが一部にあっても、逆張りでプレミアム感が出て良いかな、なんて思います。

とはいえ、さすがに今の時代、ホームページが無いということは考えづらいですよね。

 

さてホームページ。

みなさんはどの様に構築していますでしょうか。

 

考えうる主だった方法論を挙げると

  • イチから作る
  • WIX
  • 各種無料HP作成サービス
  • ホームページビルダー
  • Dreamweaver
  • WordPress

あたりが考えられるでしょうか。

 

もちろん、上記の様なツールを使って

  • 自分で作る
  • 知人に作ってもらう
  • 製作会社に発注する

という選択肢があると思います。

 

とはいえ外注すると数十万単位で費用がかかります。

そこで、ご自身でチャレンジしようと思ったは良いものの、何から勉強すれば良いか分からない、というケースはありませんでしょうか?

よく聞くのは

最近WordpressってやつでHP作ってるショップが多いらしいけど、どこで買えるの?

みたいな言葉です。

WordPressはソフトじゃなくて…という説明が入るわけですが、今回は割愛します。

また

WordPressがソフトじゃないってのはわかったけど、結局暗号みたいな英語が出てくるじゃん

こんな声もありますね。

 

HPを構成するものとは

HPといっても、突き詰めて考えればデータです。

あるデータを、人間が見てわかりやすいように表示しているわけですね。

これで全てを網羅しているわけではありませんが、一般的には以下の様な物が使われています。

  • HTML
  • CSS
  • Javascript
  • PHP(などのサーバーサイドプログラム)
  • SQL(及びデータベース)

 

HTML

HPで骨組みにあたる部分です。

HPの構造を示し、Webブラウザで表示するためのものです。

WebブラウザとはSafariやGoogleChrome、MicrosoftEdgeなどのことです。※IEはもうやめましょう

論理構造などは存在せず、やりたいことと構文が1対1対応なので、都度調べながらでも比較的対応可能です。

 

CSS

HPで皮膚にあたる部分です。

文字の大きさや色、背景などの装飾を行います。

逆に言うと、HTMLだけだと、白地に黒色の文字だけのページということになります。

命令の優先順位や発動条件など、HTMLよりもややカッチリとルールが定まっているために、都度調べながら、だと思い通りに動かない事もあります。

 

Javascript

HPで筋肉にあたる部分です。

HPに動きを出します。

大抵のカッコイイ動きはこれです。

いわゆるプログラミングなので、論理構造をしっかりと考えたり、よりキッチリ文法を守る必要があります。

 

PHP(などのサーバーサイドプログラム)

HPで脳・神経にあたる部分です。

JavaScriptでは条件反射の様な動きしか実現できませんが、こちらはもっと複雑な計算と挙動を実現することが可能です。

訪れたユーザーの行動に応じて次に表示するページの内容を変えることや、後述のデータベースと連携して、的確な答えを返します。

JavaScript以上にゴリゴリのプログラミングと思ってもらっても良いかもしれません。

PHP以外にもいくつかの言語が存在します。

 

SQL(及びデータベース)

HPで大脳新皮質(長期記憶の部位)です。

例えば会員制のページなどの場合は、どこかにそのデータを保存必要があるので、活躍します。

また、通常のHPの場合でも、分量が大きくなる場合や、更新の効率性を上げるために、しばしば利用されます。

データベースをいじる言語のことをSQLと言います。

 

HPを作るとは

最初に挙げたHPの作成方法は以下でした。

  • イチから作る
  • WIX
  • 各種無料HP作成サービス
  • ホームページビルダー
  • Dreamweaver
  • WordPress

イチから作る以外のものは、基本的には専門的な知識を用いずに、HPを構築します。

つまり、作る人と先述の各言語の間を取り持ってくれる、というわけですね。

ただし、デザインも含めて、細かいカスタマイズをしようと思うと、どうしても多少の言語の知識が必要になります。

 

合同会社すぐもぐが出来ること

それぞれについて、全くの素人を1、プロの入り口を7、完璧なプロを10とすればスキルレベルは以下の様なイメージです。

HTML:5

一般的なことであれば、実現可能です。

CSS:3

基本は抑えていますが、しばしば頭を抱えます。

Javascript:2

基本のキがわかる程度です。

PHP:4

一般的なことを実現可能ですが、時々頭を抱えます。

SQL:3

基本は抑えていますが、よりよい構成までは突き詰められていません。

 

全てを活用して、まるっきりイチからWebサイトを構築したこともありますが、もう絶対にやりたくありません(笑)

めちゃめちゃ大変ですから…

 

ということで、某ウエットスーツメーカーのカタログ外商品について、オリジナルカラーシュミレーターをJavaScriptを用いて製作していたのですが、今日は1日その改修作業で終わりそうです。
※あくまで勝手に作っているものです。

 

コメントを残す

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