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

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


Webサイトの仕組み

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

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

Webサイトとは何か、Webサイトが表示されるまでの仕組みを解説する。 Webサイトを作るにあたって、何が必要なのかも整理。Webサイトとホームページの違いも説明する。 Contents1 webサイトとは何か?1.1 ...

続きを見る


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

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

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

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

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

ウェブサイト制作で欠かせないウェブデザイン、なかなかうまく思い描けない時もあるのでは? そんな時に他社事例としてとても参考になるギャラリーサイトについて紹介。 Contents1 ギャラリーサイトとは?2 ギャラリーサイ ...

続きを見る


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

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

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

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

ここではHTMLでのホームページの作成方法を共有する。 CMSやホームページ作成ツールではなく、HTMLやCSSを実際に書いてホームページ制作をしたい人向けに、必要なツールや方法を紹介。 web制作にあたって、使っていき ...

続きを見る


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

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


カラムについて

カラムについて


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


ヘッダーについて

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

ここではHTMLサイト作成時に、ロゴを左に、メニューを右に横並びに配置する基本的なヘッダーの作り方を解説。 コピペで使えるheaderのHTMLとCSSを提供しているウェブサイトもいくつか紹介する。 Contents1 ...

続きを見る

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


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

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


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

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

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


レスポンシブ対応

レスポンシブ対応


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

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

今回、ウェブサイトを初めてgithub pagesを使ってあげてみたので、その手順を整理する。 URL:https://shotaro-kamimura.github.io/cozy-experience/ github ...

続きを見る


wordpressで自作テーマの作成

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

wordpressで自作テーマの作成

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

HTMLサイト:

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

wordpressサイト:

https://localjapan.shotarokamimura.com/

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

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

既存のテーマだと物足りないという場合、オリジナルのwordpressテーマを作成することができる。 ここではオリジナルテーマの作成を解説していく。 Contents1 先にHTMLとCSSでページを作成する1.1 HTM ...

続きを見る