Webサイト系

Webデザイン~検索データベースシステムが出来るまで~PART1

このタイトルでは、私一花が今まで独学で築き上げてきた技術やコツをこれからWebデザインをしてみようかな、検索システム取り入れたいなと思う人向けに、自分に向けてのメモの意味も込めて記していこうというものです。一から学ぶWebデザインと言い換えても良しということで、なるべく詳細にまとめていこうと思います。

Webデザインとは?

始める前に、まずWebデザインとはなんぞやについてです。Webデザインとは、いわゆるWebサイトを作るお仕事のことです。今開いているページもWebデザインの領域ですが、これはWordpressという仕組みを使って構築しています。今の所Wordpressがなんぞやってところは理解しなくてもいいです。adobeのPhotoshopなどと同じように、操作できればWebサイトを簡単に制作できるもの、と思っていてください。

Webデザイン(サイト構築)をイチからするには、最低HTMLとCSSというプログラミング言語を理解している必要があります。構築をHTMLが、デザインはCSSが司ります。この他に、サイトに動きを出したり工夫を凝らしたいときにはjavascript、データベースと連動したい場合にはPHPという言語を用います。これらの言語は「Webサイト」を作る時に使う言語で、いわゆる「プログラム」を作る言語とはまた性質が違うので、目的がサイトを作るものであれば勉強のし甲斐があるでしょう。

Webサイトを作る事のできるメリットといえば、私はまだ収益化できていませんが、やり方によっては自分のWebサイトに広告を貼り付け、その収益を得る「アフィリエイト」ができたり、仕事にも勿論Webデザイナーとして生かせますが、自分の好きなようにサイトを作ったりできることです。私もサイト構築できるようになって、表現の幅が広がったと感じています。

検索システムには何の言語を使うの?

サイト構築する際にはHTML5とCSS3を使います。HTML5とCSS3はそれぞれ最新バージョンが5と3で、それに準拠して作るのが通常です。私の検索システムは、データベースに情報を入れたうえでサイトと連動させて、情報を引き出すシステムです。データベースはロリポップなどのレンタルサーバーを月300円程度で契約して使っています。データベースに情報を入れないと使えないので、私の構築したモバプロ2レジェンドの攻略サイトなんかでは、選手データやオーダーデータが更新されたら都度データベースへ入力をしています。更新データによっては沢山ありますが、終わりのある仕事でもあるので気持ち的には楽です。

小ネタ

先にちょっと難しい話をしておくと、通常、サイトを作る時にファイルの形式は.htmlになるんですが、データベースと連動させる場合にはPHPの言語を使うので、ファイル形式は.phpで作ることになります。ファイル形式を.phpで作らないとPHPは動かないので注意です。

サイトに訪れた時に最初に表示されるページは「index.html」のページに設定されています。そのページから移動させたい場合に、任意の「○○○○.html」のページを作り、リンクを作って飛ばす、という仕組みです。

ページ数などが多くなるサイトを作る予定であれば、javascriptを使って管理した方が後々楽になります。これはサイトを作るようになって気付いたのですが、違うページで同じ表記をさせたいときって結構出てくるんですが、その場合、javascript側で「AAA」と設定したら、HTML側のMページとNページでjavascriptの設定をします。そこで「AAA」を「ABB」に変更したら、MページとNページ両方で表示が「ABB」に変更されます。これを知ってると知ってないで後々の更新作業の量に直結してくるので、サイト構築では意識すると良いでしょう。

まとめ

今回は、Webデザインを始めるにあたり、いろはや先に知っておくと良いであろうことについて触れてきました。サイトを作りたくなるきっかけは人によってさまざまあるでしょうが、会得するとお店のホームページを作ったり、人のためになるきっかけを作ることが可能になります。誰かのためになるってやっぱりモチベーションになることなので、このサイトがあるおかげで勉強になったと思ってもらえるように、私も気を引き締めたいと思います。

ではね、ちゃお☆

ピックアップ記事

  1. Round1figh!!

関連記事

  1. Webサイト系

    Webデザイン~検索データベースシステムが出来るまで~PART5 「タグ3」

    本日はモバプロ2ではなくWebデザインで使うタグ紹介part3です。…

  2. Webサイト系

    Webデザイン~検索データベースシステムが出来るまで~PART2

    HTMLという言語を使う時は、adobeが提供しているdreamwe…

  3. Webサイト系

    Webデザイン~検索データベースシステムが出来るまで~PART3 「タグ」

    今回はHTMLでつかうタグの一例をご紹介します。特にHTML5の5か…

  4. Webサイト系

    Webデザイン~検索データベースシステムが出来るまで~PART4 「タグ2」

    タグ紹介二回目です。一回目は特にHTML5準拠からのタグをご紹介しま…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

Twitter

  1. レッドストーン

    製錬終了!!~どんな装備が出来たかな~!?~レッドストーン
  2. モバプロ2レジェンド

    来たぞ4周年!!~本番は明日?ガチャを見ていこう~モバプロ2レジェンド
  3. モバプロ2レジェンド

    新LP5選手考察~新たな全体特性が強い!~モバプロ2レジェンド
  4. 幻影戦争

    幻影戦争 – Youtube動画まとめ をご紹介!
  5. モバプロ2レジェンド

    モバ2 | 2021_3 CCチャレンジ結果 防御率タイトル取得!!
PAGE TOP