Webサイトの作り方

webサイトを0から作成できるようになるための情報を随時更新しています。
この記事では、CMSを使用しない静的なサイトの作り方をまとめています。

どんなサイトを作るか考える

自身のサイトなのか、依頼でサイトを制作にするのか色々あると思います。
まずは何の目的のなのかを考えます。

 

 

webサイトをデザインする

リッチなサイトは、世界中に存在します。
どんなサイトが流行っているのか、どんなデザインが用途にあっているのか考える必要があります。
デザインについては執筆中です。
まずは、サイトギャラリーサイトを見てデザインの参考にしてみてください。
オススメのガラリーサイトのリンクを載せておきます。

SANKOU!

muuuuu.org

 

 

開発環境

テキストエディタ

WEBサイトのコーディング開発に必要なテキストエディタの紹介。
様々なテキストエディタがある中でおすすめのエディタやより便利にするための使い方プラグインなどを紹介しています。
より楽に高速にコーディングしよう。

最近だと「Visual Studio Code」が非常に人気です。
僕も元々下記記事の「Sublime Text3」を使用していましたが、今は「Visual Studio Code」に移行しています。
 
サイトコーディングにオススメのテキストエディタ『Sublime Text3』

現役コーダーがオススメするVSCode拡張機能紹介

 

 

制作

WEBサイトを作る方法やより効率よく作る方法を紹介。
これから自分のWEBサイトを作りたい方・サイトをカスタマイズしたい方、HTMLコーダーやフロントエンドエンジニアを目指している方のために記事を公開しています。
 

HTML

WEBサイトの基本の「HTML」について。
WEBサイトのベースであるHTMLの書き方や勉強方法などを公開しています。
基本が分かれば次にどうすれば早くなるのか製作速度を早くするための方法を紹介しています。
 

基礎

webサイトの作り方!HTML5でサイトを作ろう!

HTMLコーディングの練習・勉強方法

 

フォーム

jQueryでフォームのメールアドレスが一致しているか確認する方法

チェックボックスを1つ以上チェックを必須にする方法【javascript】

フォームのチェックボックスを入れないとボタンを押せないようにする方法

 

CSS

CSSについて。
WEBサイトのデザイン・レイアウトの調整で使われるCSSの書き方などを紹介しています。
今ではデザインを整える以外にアニメーションの作成などできることが増えています。
HTMLと合わせてよりこったWEBサイトを作ったり、カスタマイズする方法を紹介しています。
 
CSSを書く際に気をつけていること
 

アニメーション・ホバー(hover)

今までjQueryやjavascriptを使わないといけなかったものがCSSのみでできるようになってきています。
CSSを使いアニメーションを付ける方法を紹介しています。
 
ホバー(hover)時に動きのある下線を入れる方法【CSSのみ】

CSSのみでリンクのボタンにアニメーション付きホバーエフェクトを付けてみた

CSSだけでガクブル(ぶるぶる)させてみた
 

レイアウト

CSSを使ってWEBサイトのレイアウトを整えるためのテクニックを紹介。
CSSでのデザインの変更の方法やCSSだけでできるレイアウトテクニックを紹介しています。
上下・左右・中央に要素を配置するCSSテクニック
 
セレクトボックスの矢印を消す方法【Chrome・IE・Firefox】
 

テキスト系

WEBサイトのテキストの装飾などのテクニックを紹介。
CSSでできる装飾を紹介します。
テキストをCSSで両端揃えにする方法
 

画像系

WEB上でできる画像加工を紹介。
CSSだけでできる画像加工やトリミング方法を紹介しています。
CSSで画像トリミング!IE11での実装方法【object-fit】
 

チェック

WEBサイトを作ったあとに行う動作チェックや各項目のチェックを楽にするためのツールや方法を紹介。
より品質の高いWEBサイトにするためにチェックしておきたいポイントを抑えよう。
 
Altチェックを簡単にできるChrome拡張機能「Alt & Meta viewer」

効率化

毎回使用するパーツを共通化

どのページにも入ってくるパーツは1つのファイルにまとめてしまうのがおすすめです。
たとえば、100ページのサイトに、共通部分のheaderに1つ修正が入ると100ページ全てに修正を加える必要があります。
そこでPHPなどを使用して1つのファイルにまとめてしまうことで、1つのファイルを変更すると全ページ変更される仕様にすることができます。

サイトの共通部分を簡単に管理する方法【PHP】

「Emmet」を覚えて高速コーディング

高速コーディング「Emmet」を覚えよう!【HTMLコーダー・WEBデザイナー】