webサイトを0から作成できるようになるための情報を随時更新しています。
この記事では、CMSを使用しない静的なサイトの作り方をまとめています。
どんなサイトを作るか考える
自身のサイトなのか、依頼でサイトを制作にするのか色々あると思います。
まずは何の目的のなのかを考えます。
webサイトをデザインする
リッチなサイトは、世界中に存在します。
どんなサイトが流行っているのか、どんなデザインが用途にあっているのか考える必要があります。
デザインについては執筆中です。
まずは、サイトギャラリーサイトを見てデザインの参考にしてみてください。
オススメのガラリーサイトのリンクを載せておきます。
開発環境
テキストエディタ
WEBサイトのコーディング開発に必要なテキストエディタの紹介。
様々なテキストエディタがある中でおすすめのエディタやより便利にするための使い方プラグインなどを紹介しています。
より楽に高速にコーディングしよう。
最近だと「Visual Studio Code」が非常に人気です。
僕も元々下記記事の「Sublime Text3」を使用していましたが、今は「Visual Studio Code」に移行しています。
・サイトコーディングにオススメのテキストエディタ『Sublime Text3』
制作
WEBサイトを作る方法やより効率よく作る方法を紹介。
これから自分のWEBサイトを作りたい方・サイトをカスタマイズしたい方、HTMLコーダーやフロントエンドエンジニアを目指している方のために記事を公開しています。
HTML
WEBサイトの基本の「HTML」について。
WEBサイトのベースであるHTMLの書き方や勉強方法などを公開しています。
基本が分かれば次にどうすれば早くなるのか製作速度を早くするための方法を紹介しています。
基礎
フォーム
・jQueryでフォームのメールアドレスが一致しているか確認する方法
・チェックボックスを１つ以上チェックを必須にする方法【javascript】
・フォームのチェックボックスを入れないとボタンを押せないようにする方法
CSS
CSSについて。
WEBサイトのデザイン・レイアウトの調整で使われるCSSの書き方などを紹介しています。
今ではデザインを整える以外にアニメーションの作成などできることが増えています。
HTMLと合わせてよりこったWEBサイトを作ったり、カスタマイズする方法を紹介しています。
・CSSを書く際に気をつけていること
アニメーション・ホバー（hover）
今までjQueryやjavascriptを使わないといけなかったものがCSSのみでできるようになってきています。
CSSを使いアニメーションを付ける方法を紹介しています。
・ホバー（hover）時に動きのある下線を入れる方法【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」
効率化
毎回使用するパーツを共通化
どのページにも入ってくるパーツは１つのファイルにまとめてしまうのがおすすめです。
たとえば、100ページのサイトに、共通部分のheaderに１つ修正が入ると100ページ全てに修正を加える必要があります。
そこでPHPなどを使用して１つのファイルにまとめてしまうことで、１つのファイルを変更すると全ページ変更される仕様にすることができます。
「Emmet」を覚えて高速コーディング
・高速コーディング「Emmet」を覚えよう！【HTMLコーダー・WEBデザイナー】