盆暗の学習記録

データサイエンス ,エンジニアリング,ビジネスについて日々学んだことの備忘録としていく予定です。初心者であり独学なので内容には誤りが含まれる可能性が大いにあります。

Webページ制作の入門時に参考にしたサイト等まとめ

最近HTML,CSSJavascriptをちょっと勉強し,シンプルなWebサイトを作っていました。

その際に参考にしたサイトや,使ったツールをまとめます。

Webページの骨格を作る段階で参考にしたサイト

saruwakakun.com

HTMLやCSSの基本や,ちょっとした悩むポイント(色をグラデーションにするには?要素を中央に寄せるには?など)をわかりやすく解説しています。このサイト自体のデザインも非常に優れているので,デザインの勉強にもなります。

レスポンシブサイトへの移行

スマートフォンなど,パソコン以外の端末で閲覧される時への対応は,主に以下のサイトを参考にしました

ics.media

レスポンシブサイトを作るにあたって,どういう手法が選択肢に挙げられるのかといった点を把握できます。

Flexboxについて

私は結局Flexboxを使うことにしましたが,その際に参考になったのが主に以下のサイトでした。

www.webcreatorbox.com

ics.media

www.kerenor.jp

こちらのサイトはデモページがデザインの参考としても実装例としても非常に優れていました。

クロスブラウザ対応

autoprefixer.github.io

Google ChromeInternet Explorerなど,ブラウザは様々あり,それぞれに合わせたCSSの書き方が求められる場合があります。

自動でCSSを翻訳することでそこの処理を簡単にしてくれるAutoprefixerというツールがあるのですが,これはインストールが必要で,面倒です。

そこで,インストールいらずでWeb上で動作してくれるAutoprefixer CSS onlineという便利なモノが作られています。これには助けられました。

細かい部分を作る上で参考にしたサイト

総合

リファレンス

冒頭ですでに紹介しているサイトなのですが,この「レファレンス」のページを見ながらやることで,自分の作りたいCSSのボタンや見出しなど,細かい部分を簡単に作ることができました。

「やりたいこと(目的)」別に解説する構成なので,やりたいことが決まっている場合は目的の情報が探しやすいですし,やりたいことが決まっていない場合はこの辺りのページを眺めていくことで「こういうこともできるのか!」と新たな気付きにつながってやりたいことを決めるきっかけになります。

メニュー

メニューに関しては以下のサイトが参考になりました。

photoshopvip.net

photoshopvip.net

デモが多くて非常に良いページです。

favicon

realfavicongenerator.net

自分のサイトに正しくfaviconを設定できているのかをチェックしたり,faviconにしたい画像を指定してfavicon用ファイルを生成したりしてくれるWebアプリです。

Canvas

HTML5Canvas要素にJavascriptでアニメーションを書いてきれいな映像を作りたいときに参考にしました(これはまだわからないところも多く勉強中ですが…)

developer.mozilla.org

yoppa.org

こちらのサイトは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

また,GitHubAtomも使っていました。ちゃんとコードを書くようになればこっちのほうが便利になっていくのだと思いますが,どういうパッケージを入れるべきか等は勉強中です…