もくじ

【HTML・CSS】web制作初心者に役立つサイト5選

ハウツー
ウエのicon
ウエ

ほんっとにはじめてのHTML5とCSS3

ほんっとにはじめてのHTML5とCSS3
こちらは、本当にHTMLとCSSを勉強し始めたばかりの人向けのサイトですが、かなり細かいところまで親切丁寧に教えてくれているので、ちょっとわからなくなったらここで確認すると良いです。
丁寧すぎて文字が多いのですが、基本的なことはこのサイトで復習ができます。

とほほのWWW入門

とほほのWWW入門
こちらは1996年に開設された杜甫々さん運営のサイトで、HTMLやCSSなどのタグをわかりやすく参照できます。
シンプルで見やすく、このタグってなんだっけ……どう書くっけということにすごく役立ちます。
解釈が変わったものや新しく追加されたものも随時更新されているので、いまだに利用しています。
タグ一覧で、廃止されたものには×マークつけてくれているのも、とてもありがたいです。

HTMLクイックリファレンス

HTMLクイックリファレンス
こちらもHTMLやCSSのリファレンスサイトです。
タグの意味をタグ横に掲載してくれているので、やりたいことに照らし合わせてタグを見つけることができます。
私はとほほ派ですが、使いやすい方をブックマークしておくと非常に便利です。
HTMLタグリファレンス(目的別)
トップページ > HTMLタグリファレンス(目的別) ...... リンクをはる、リンクの出発点・到達点を指定する ...... ひとつの画像に複数のリンクを設定する(イメージマップ) ...... イメージマップの領域を設定する ...... 相対パスの基準URIを指定する ...... 関連する文書ファイルを指定する ...... 画像を表示する ...... プラグインデータを埋め込む(NN独自の仕様) ...... プラグインが利用できない環境用の表示内容を指定する(NN独自の仕様) ...... 文書にデータを埋め込む ...... JAVAアプレットを挿入する ...... パラメータを指定する ...... 効果音・BGMを鳴らす(IE独自の仕様) ...... ウィンドウをフレームに分割する ...... フレームに表示するファイルを指定する ...... フレームが表示できない環境用の表示内容を指定する ...... インラインフレームを作る ...... 絶対位置にレイヤー表示する(NN独自の仕様) ...... 相対位置にレイヤー表示する(NN独自の仕様) ...... レイヤーが利用できない環境用の表示内容を指定する(NN独自の仕様) ...... 文書にスクリプトを埋め込む ...... スクリプトが動作しない環境用の表示内容を指定する ...... ひとかたまりの範囲として定義する(ブロック要素) ...... ひとかたまりの範囲として定義する(インライン要素) ......
http://www.htmq.com/html/indexm.shtml

Webクリエイターボックス

Webクリエイターボックス
こちらも有名なサイトです。
Webデザイナー+WebデベロッパーのManさんが運営されているサイトで、初心者に優しい内容のコンテンツの多いのが特徴です。
「webサイトがうまく表示されないときの解決方法」とか「レスポンシブ対応の表の作成」とか、(いまだに私もつまずきますが)とくに初心者がつまずきやすい問題などの解説をしてくれています。
とくに是非ダウンロードしてもらいたいのがこちらのFlexboxのチートシートです。
Flexboxとはコンテンツを横並びにしたりできるCSSで、使えるようになると非常に便利です。最初は混乱するのでこれを見ながらやれば簡単ですので、是非ダウンロードしましょう!
日本語対応!CSS Flexboxのチートシートを作ったので配布します
FlexboxとはFlexible Box Layout Moduleのことで、その名の通りフレキシブルで簡単にレイアウトが組めちゃう素敵ボックスです。現在ほとんどすべての最新ブラウザーでFlexboxをサポートしており、Flexboxを使ったレイアウト組みが今後のWebデザインのスタンダードとなるでしょう。Webクリエイターボックスでは 以前からFlexboxの使い方について紹介してきたのですが、最近Flexboxが浸透してきたこともあってか各プロパティの使い方について質問される機会が増えてきたので、チートシートとしてまとめてみました。この記事ではなるべく画像メインでプロパティーの使い方を紹介したいと思います! PC・Macに保存してチラ見するなり、印刷してデスクに置いておくなりしてご利用ください! Flexbox チートシートPDFのダウンロード Flexboxの基本的な書き方 flex-direction ... 子要素の並ぶ向き flex-wrap ... 子要素の折り返し flex-flow ... flex-directionとflex-wrapをまとめて指定 justify-content ... 水平方向の揃え align-items ... 垂直方向の揃え align-content ... 複数行にした時の揃え order ... 順序の指定 flex-grow ... 子要素の伸びる比率 flex-shrink ... 子要素の縮む比率 flex-basis ... 子要素のベースとなる幅の指定 flex ... flex-grow、flex-shrink、flex-basisをまとめて指定 align-self ...
https://www.webcreatorbox.com/tech/css-flexbox-cheat-sheet

みんなの知識ちょっと便利帳

こちらは文字コードを参照する時に利用しているサイトです。文字コード?となるかもしれませんが、サイトを制作している際、記号そのものではなくコードでの記述が必要になる時もあるので、その時はこちらを参照しています。
たまに  といったコードがHTMLに記載されているのを見かけるかもしれませんが、こちらは空白文字と呼ばれるもので、スペースを入れるときに記述します。
あまり使用はしないのですが、稀に使うときがでてくるので、知っておくと便利なサイトです。

まとめ

初心者のうちはタグなどまったく分からないと思います。
どのようなものがあるのかリファレンスサイトで調べつつ、どのように表示されるのかを見ながら制作していくと良いと思います。
クリエイターボックスには、コピペだけでオシャレなスタイルができるCSSなどの記事もありますので、そういうものも利用しながら制作していくと良いと思います!
ウエのicon
ウエ
シンママ子1猫1。30代後半からweb制作の仕事をはじめ、現在肩こり悪化が最大の悩み。