ブログ

HTMLとCSSで作る ウェブサイト

今回は私たちが毎日目にしているウェブサイトについてです。

私はウェブサイトを制作するにあたり、HTML & CSS, Javascript, PHPの順番に勉強しました。

何を言っているのかわからないと思いますが、ウェブサイトが表示されるまでの経緯を知ると面白いものがありますよ。

ウェブサイトって何? HTMLとCSS

HTMLとCSSはよく「本」で例えられます。

HTMLは見出しや文章

CSSは見た目(デザイン部分)

言われただけで理解できる人は相当頭が良いと思います。

私は最初さっぱり理解が出来ませんでした(笑)

しかし、実際に自分でウェブサイトを制作していく中で、理解できるようになりました。

オンラインショッピングを例に考える

まず欲しい商品のウェブページにアクセスします。

ここは購入前なので、誰が見ても同じ内容になります(HTMLとCSS。見る人によって商品の説明や画像が違ったらパニックになってしまいます)。

ウェブページに動き等を付けているのはJavascript(or jQuery。 例えば、ある一定のところまで下にスクロールするとボタンが出てきたりするヤツ)です。

欲しい商品をクリックすると、決済画面になります。

ここでログインして、個人情報等を入力します(ここからは様々なプログラミング言語による)。

個人情報をウェブサイト上に表示させて、決済となります。

私たちが普段使っているオンラインショッピングは様々なコンピューター言語が組み合わさって出来ています。

仕組みを理解

このような一連の流れを知った私は感動しました。

そして複雑さも理解しました。

いきなり難しいことは出来ないので、HTMLとCSSでウェブサイトを制作するようになりました。

制作していくうち(ページ数が増えてきたりする)に、共通部分が出てきます。

共通部分を毎回コピペするのは非効率です。

何かないかなと調べていくと、Wordpressというものを知りました。

そこからWordpressに必要なPHPという言語の勉強をし、プログラミングっぽい部分を色々と習得しました。

プログラミング部分で記述ミスするとエラーが出て、正常な部分も表示されません(HTMLとCSSだけでミスをしてもページ自体は表示されます)。

プログラミングは出来ないと何時間もそこで立ち往生してしまいますが、出来たときはめちゃくちゃ嬉しいです。

Ruby (Ruby on Rails)

今はWordpress以外でもう少し突っ込んだことをしたいと思いRubyというプログラミング言語を勉強しております。

RubyにはRuby on Railsという強力なフレームワークがあります。

HTML, CSS, Javascriptの知識も活用できるので、楽しくプログラミングすることが出来ます。

まとめ

まずはHTMLとCSSで誰が見ても同じウェブサイトを制作してみましょう。

自分でオリジナルのウェブサイトを作れるとテンションが上がります。

そこから自分がやってみたいことを覚えるのが一番だと思います。

ABOUT ME
naoyuki1213
Photoshopを覚えてから、カメラに興味を持ち独学で勉強。そこからパソコンを駆使し、自分で作る楽しさに目覚めました。今ではデザイン•写真•映像•ウェブサイト•プログラミングまで出来るようになりました。