最近HTML,CSS,Javascriptをちょっと勉強し,シンプルなWebサイトを作っていました。
その際に参考にしたサイトや,使ったツールをまとめます。
Webページの骨格を作る段階で参考にしたサイト
HTMLやCSSの基本や,ちょっとした悩むポイント(色をグラデーションにするには?要素を中央に寄せるには?など)をわかりやすく解説しています。このサイト自体のデザインも非常に優れているので,デザインの勉強にもなります。
レスポンシブサイトへの移行
スマートフォンなど,パソコン以外の端末で閲覧される時への対応は,主に以下のサイトを参考にしました
レスポンシブサイトを作るにあたって,どういう手法が選択肢に挙げられるのかといった点を把握できます。
Flexboxについて
私は結局Flexboxを使うことにしましたが,その際に参考になったのが主に以下のサイトでした。
こちらのサイトはデモページがデザインの参考としても実装例としても非常に優れていました。
クロスブラウザ対応
Google Chrome,Internet Explorerなど,ブラウザは様々あり,それぞれに合わせたCSSの書き方が求められる場合があります。
自動でCSSを翻訳することでそこの処理を簡単にしてくれるAutoprefixerというツールがあるのですが,これはインストールが必要で,面倒です。
そこで,インストールいらずでWeb上で動作してくれるAutoprefixer CSS onlineという便利なモノが作られています。これには助けられました。
細かい部分を作る上で参考にしたサイト
総合
冒頭ですでに紹介しているサイトなのですが,この「レファレンス」のページを見ながらやることで,自分の作りたいCSSのボタンや見出しなど,細かい部分を簡単に作ることができました。
「やりたいこと(目的)」別に解説する構成なので,やりたいことが決まっている場合は目的の情報が探しやすいですし,やりたいことが決まっていない場合はこの辺りのページを眺めていくことで「こういうこともできるのか!」と新たな気付きにつながってやりたいことを決めるきっかけになります。
メニュー
メニューに関しては以下のサイトが参考になりました。
デモが多くて非常に良いページです。
favicon
自分のサイトに正しくfaviconを設定できているのかをチェックしたり,faviconにしたい画像を指定してfavicon用ファイルを生成したりしてくれるWebアプリです。
Canvas
HTML5のCanvas要素にJavascriptでアニメーションを書いてきれいな映像を作りたいときに参考にしました(これはまだわからないところも多く勉強中ですが…)
こちらのサイトはDEMOがスゴいです。たとえばこれ。 https://ics.media/tutorial-createjs/index.html
CreateJS入門サイト - ICS MEDIA
コードを書くときに使用したテキストエディタ
エディタはしっかり検討して選択しているわけではありませんが,主にMicrosoftのExpression Webという,開発終了とともに無料になったエディタを使っていました。
このエディタはやや古いですが,編集中のHTMLのclassやidがリンクと化してクリックすると対応したcssの対応した箇所に飛んでくれるようになるので,CSSのclassやidの管理に慣れていないうちは非常に助けられます。
Expression Webは以下でダウンロードできます。下部の「Details」をクリックすれば日本語版のリンクも展開します。
Download Microsoft Expression Web 4 (Free Version) from Official Microsoft Download Center
また,GitHubのAtomも使っていました。ちゃんとコードを書くようになればこっちのほうが便利になっていくのだと思いますが,どういうパッケージを入れるべきか等は勉強中です…