ホームページ、WEBサイトの実践的な作り方を公開。HTMLとCSSを必要な知識だけ学べます。
はじめに
当サイトはHTML・CSSを勉強したい人がなるべく無駄のないように必要なポイントを押さえて学べるサイトが作りたいという目的で制作しました。
自身が長年、WEB制作で得た知識と技術をすべて公開しています。ステップ形式にしてあるので必要な部分だけをかいつまんで学習することもできます。
内容に関しては品質向上のためテキストの加筆・修正は随時行っています。加筆・修正箇所は告知していないので、ご了承ください。
このサイトはHTML・CSSの技術のみ公開していますので、ソフトの操作に関する記事はあえて書いていません。編集ソフトに関しては下記に一部紹介していますがお好みのソフトで操作していただければ問題ありません。
HTML・CSSについて
基礎
基礎1〜42までは2カラムのPCサイトをつくるために必要なHTMLとCSSを紹介します。HTMLに関しては最低限のSEO対策ができる要素(タグ)のみに限定しています。CSSに関しては2カラムレイアウト作成に最低限、必要なプロパティを紹介します。
HTML・CSS基礎
応用
基礎で学んだタグ(要素)から、より細かい意味付けが行える要素を紹介します。ほかにもHTML5から追加された要素を中心にどのように意味づけをするかを解説します。CSSでは初級より複雑なレイアウトや細かいコントロールができるプロパティを中心に紹介します。またCSS3で追加されたプロパティも紹介していきます。
応用(43章から始まります)
レスポンシブサイト制作について
PCサイトとスマホサイトのCSSをデバイスサイズを切り替える「レスポンシブサイト」を解説します。レスポンシブサイトに必要な機能を実装するためのHTML、CSSとJavaScript(jQuery)をさまざまなデザインパターンから解説します。
レスポンシブサイト制作
参考資料について
HTML・CSS制作に役立つサイトや参考資料をまとめてあります。
参考資料
HTML・CSS編集ソフト(エディター)に関して
HTML・CSSの編集ができるソフトを一部紹介しています。使用方法は記載していないので、操作方法はネットで検索していただければと思います。「有料」と書かれていないソフトはフリーで利用ができます。
テキストエディター
オーサリングソフト(高度な編集ができるソフトです)
- Visual Studio Code(Windows・Mac・Linux)
- Dreamweaver(Windows・Mac)- 有料
- Sublime Text(Windows・Mac・Linux)- 有料
- Brackets(Windows・Mac)…2021/9/1 サポート終了
- Atom(Windows・Mac・Linux)…2022/6/8 開発終了