HTMLとCSS、Javascriptを使ったwebサイトの作り方まとめ

このページでは、HTMLとCSS、Javascriptを使ったwebサイトの作り方についてまとめていく。

Webサイトの仕組み

まずはwebサイトの仕組みなどをわかっておくと、今後の準備がかなり楽になる。

コーディングの前に最初にたちはだかるのがウェブデザイン。

なかなか思い浮かばないこともあるのでは？

そんな時に他社事例としてとても参考になるギャラリーサイトをみるとウェブデザインの助けになる。

実際に自分の書いたHTML、CSSのコードをウェブ上に表示させるにはどのようなステップを踏めば良いのだろうか？下記に書いた。

コーディングに取り掛かる前に、準備しておくと楽かもしれない。

　　コーディング前の準備　

カラムは、ウェブページのレイアウトを作成するために使用される機能の1つ。ページのコンテンツを複数列に分割したり、様々なレイアウトに並べることができる。ここではウェブデザインに重要なカラムについて説明している。

　　カラムとレイアウトについて　

ヘッダーとは、ウェブサイトの上部に表示される場所のことで、ロゴやサイト名、ナビゲーションメニュー、検索バーなどが載っているのが一般的。ここでは、ヘッダー作成についての詳細を書いた。

　　ヘッダーについて　

画像はウェブサイトの構成で重要な役割を果たす。HTML・CSSにおける画像の取り扱い方を下記でまとめている。

　　画像について　

イラストやアイコン、画像を自分で用意することが難しくても、素材サイトで取得できる。

下記にアイコン、イラスト、画像それぞれの素材サイトをまとめた。

　　素材サイト関連　

ウェブサイトを見るデバイスがスマホが中心になった今、ウェブサイト作成にレスポンシブ対応はもはや必須だろう。ここではレスポンシブ対応についてまとめている。

　　レスポンシブ対応について　

HTML・CSSで自分でウェブサイトを作成し、アップロードまでできるようになると、wordpressを使ってさらに高機能のサイトを作成することができる。

wordpressを導入できれば、自分のオリジナルデザインにブログ記事や写真ギャラリーなど簡単に追加できるようになるのでHTML・CSSのみの比べてとてもリッチなウェブサイトに仕上がる。

下記にwordpressの導入方法から自作テーマの作り方までまとめた記事を作成した。