#フルスタックへの道 初心者にも分かる、ウェブデザインやウェブアプリ制作を始めるために

ウェブデザインやウェブアプリ制作は独学でも身につけることができます。実際僕自身、有名なウェブサイトのコードを見て書き方を真似しながら知識を身につけてきました。そして今ではクライアントさんの方のためにウェブサイト制作をしています。

これからウェブデザインやウェブアプリの作り方を勉強したいという方の力に少しでもなれれば、と思い基本のキから説明をしていきます。

今回はウェブサイトやウェブアプリを作るにはどこから勉強すればいいのかをまとめます。

どこから勉強すればいいの?

ウェブサイトの基本は html + css

簡単なウェブページを構築するには html だけ知っていればできます。html だけでもページをフォーマットして表示できます。例えばこんなことができます。

  • 画像の配置
  • パラグラフの段組 (マルチカラム)
  • 太字や斜体、タイトルや見出しなどの文字装飾
  • 表の作成

こういったものをフォーマットして表示するだけなら html でもできますが、それだけだとまるでワードかリッチテキストファイルで文書を作ったような簡素的なもので止まってしまいます。

それを css で装飾することでオリジナルでユニークなデザインを施すことができ、ウェブページとして見た目良くすることができます。

まずは htmlcssがどんなものかを学ぶことが絶対大事。

動的なページを作るには php

html がウェブページのベース、csshtml をデコレーションするものなのですが、これだけだとhtml に記述されている内容しか表示できません。

ウェブサイトにアクセスするユーザーに合わせて表示する内容を変えるような動的なページを構築するには php を使うことが多いです。例えば、phpを使うことでこんなことができます

  • アクセスのあったデバイスに合わせてページのデザインを変更
  • ユーザーのログイン状態に合わせてページの表示内容を変更

phphtml を書き出すことができるので、 html の上位互換と呼べるかもしれません。

phpを少し扱えるようになると、幅がグッと広がります。がっつりと php を勉強しろとは思いませんが、少し知っておくといいでしょう。

mySQL を組み合わせることでより動的なウェブサイトに

例えばブログサイトを構築するときに、ブログ記事を書くたびに html ファイルやphpファイルを作るのは面倒。 こんな時はデータベースにブログ記事の内容を保管しておいて php でデータを取得し、html を書き出して表示すれば OK。

データベースで有名なのは mySQL です。

mySQLWordPressをベースにウェブサイトを作る際にはほとんど気にする必要はありません。ですが、ウェブアプリを自分で作るときにはデータベースへのアクセスが必須となります。

WordPressとは

ブログサイトや複数ページのウェブサイトを作る上で便利なシステム。バージョンが上がるたびに使いやすくなっており、現在では簡単にWordPressを自分のウェブサイトに組み込める。

WordPress が mySQL へのアクセスを勝手にしてくれるので、mySQL の知識が無くても簡単に動的なウェブサイト制作ができる。

wikipedia – wordpress

javascript でさらにリッチに

javascript はウェブサイトをよりリッチにしてくれます。例えば、

  • 画像は後で読み込ませる
  • スライドショーをウェブサイトに搭載する
  • 動画をコントロールする

など、もっといろんなことを可能にするために、javascript を使ってよりリッチなウェブサイトを作ります。

javascript は、元々は html にできないちょっとしたことをできるようにする程度の簡素な言語だったのですが、最近はかなり進化しています。ウェブアプリを作成する上でかなり重要になってくる言語。しっかり身につけていくのがいいです。

こんな記事も読まれています

投稿はありません。

もう記事がありません

エラーが発生しました

もっと表示する

ウェブ開発へのお問い合わせはこちらから

ウェブサイトやアプリ開発をしております。
どんなものを作りたいのかを明記した上でお問い合わせをお願いします。
また、簡単な質問や要望も受け付けています。まずはお気軽にお問い合わせください。

  • 入力必須です。
  • 入力必須です。
  • メールアドレスの形式で入力してください。
  • 入力必須です。
OR

お問い合わせを送信しました。
24時間以内に返信させていただきますので、しばらくお待ちください。
お問い合わせありがとうございました。

送信に失敗しました。
何度も失敗するようでしたら、こちらからお問い合わせください。