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

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


Webサイトの仕組み

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

no image
Webサイトとは何か。Webサイトの仕組みやWebサイトとホームページの違いを説明

続きを見る


ウェブデザインが思いつかない時

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

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

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

no image
Webサイト制作の参考に便利なギャラリーサイト38選

続きを見る


HTMLでのwebサイトの作成方法

HTMLでのwebサイトの作成方法

ツールの準備から、画面へのHTMLの表示方法までの流れを解説。

HTMLでのホームページの作成方法

続きを見る


実際にコーディングする前に用意しておくこと

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


カラムについて

カラムについて


カラムやレイアウトに関する記事。カラムについて理解するとwebサイト制作がかなりスムーズ。


ヘッダーについて

ヘッダーについて
no image
[CSS]ロゴを左に、メニューを右に横並びに配置するヘッダーを作成

続きを見る

下記の記事も参考になるかも。


画像やイメージについての取り扱い

画像やイメージについての取り扱い


ウェブサイトで使う画像やイラストはどこで取得できるの?

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

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


レスポンシブ対応

レスポンシブ対応


Githubを使ったwebサイトアップロードの方法

[Github] Github pagesの使い方:作成したウェブサイトを公開する

続きを見る


wordpressで自作テーマの作成

HTMLサイトをアップロードまでできるようになると、wordpressを使って、自分のデザインにブログ機能などを付け足すこともできる。

wordpressで自作テーマの作成

こちらが実際のHTMLサイトとwordpress追加後のサイトの例となる。

HTMLサイト:

https://shotaro-kamimura.github.io/minamiuonuma/#

wordpressサイト:

https://localjapan.shotarokamimura.com/

詳しいやり方は、こちらでまとめた。

WordPressの自作テーマの作成方法

続きを見る

2021-05-09