質問: Eclipseで HTML5、JavaScriptを学んでいます 参考書を探していますが ホームページのデザイン的なやつばかりです CSS?っていうみたいですけど・・・ デザイン的な内容ではなく webの技術的な内容でオススメの参考書ってありませんか? タグの解説とか webページの仕組みとか
回答: >Eclipseで >HTML5、JavaScriptを学んでいます Eclipseは重いので、「HTML、CSS、JavaScript」程度なら、もっと軽いIDEにしたほうが良いでしょう。 >参考書を探していますが >ホームページのデザイン的なやつばかりです >CSS?っていうみたいですけど・・・ >デザイン的な内容ではなく >webの技術的な内容でオススメの参考書ってありませんか? > >タグの解説とか webページの仕組みとか 探し方が悪いのでは? デザインと言う表題が付いていても実質コーダー用の参考書もあります(デザインと言う いかにもイケてる表題を付けて情報弱者に売ろうと言う魂胆)。 HTMLを学ぶのに最適な本を5冊紹介する ●作りながら学ぶ HTML/CSSデザインの教科書 一般的な文法やルールを抑えることができ、実際にサイトを作りながら学んでいけるので力になります。 HTMLを忘れたときの教科書的な引き方もできます ●いちばんやさしいHTML5&CSS3の教本 今すぐ使えるHTMLやCSSの基礎がしっかりと学べる入門書です。 こちらも実際にサイトを作りながら構築していくようです。初心者向けに書かれていますが、少し予備知識があった方がスムーズに進められるというのが実際のところでしょうか。 ●HTML5&CSS3標準デザイン講座 講義パートと実習パートがわかれているので勉強しやすいです。 この本は、HTMLはもちろんよりCSSについて掘り下げて詳しく説明してあります。他の本ではHTMLは理解できたけど、CSSはイマイチという人も多いですがこの本だとCSSもしっかりと理解できます。 また、中級者にも役に立つ情報も多いので比較的新しい知識を得たい方にもオススメですね。 ●デザインの学校 これからはじめるHTML&CSSの本 この本も実際のWebサイトを作りながら学ぶものです。(今回紹介するのは全てそうですが・・!) こちらはかなり初心者に向けて書かれたもので、HTMLとCSSの関係や文法を詳しく説明してくれるので、苦手意識がある方や全くの初めての人にはオススメです。 マスターとまではいけませんが、ある程度は書けるようになりますね。 ●スラスラわかるHTML&CSSのきほん とても丁寧に書かれていて、苦なくしっかりと進めることができます。内容はそこまで分厚くないので、気負わず気楽に取り組めるところがいいですね。 MacやWidnowsに合わせて操作が書いてあったりするのもオススメです。 挫折したくない人向け!JavaScript勉強本 14選 とりあえず「Progate、ドットインストール」の無料版を理解できるまで複数回 周回してみると良いでしょう。 もし フロントエンドをガッツリやりたいなら下記を参考に実際に「実用的なWebページ」を作ってみると良いでしょう。 現状では そんなこともあるんだな程度で流して読んでおけば良いです。 参考 ユーザー・フレンドリー(レスポンシブ・デザイン)・Webページ作成の注意点 「PC、タブレット、スマホ」などで解像度は機種ごとに違うので、特定の解像度に依存しないユーザー・フレンドリー(PCフレンドリー、タブレット・フレンドリー、スマホ・フレンドリー)なページが推奨されます。 (各解像度のチェック自体は それほど難しく無いので)現在 Webページを作成しているなら、実際にChromeのデベロッパー・ツールのモバイル・エミュレーターで「PC、タブレット、スマホ」の各解像度をチェックしてみると良いでしょう。 PCにおいては とりあえず「1k~4k」解像度をチェックしてみると良いでしょう。 具体的には「1k」では「約1000px*750px」(アスペクト比「4:3」)を、フルHD画面 以上なら「約2000px*1120px、約4000px*2250px」(アスペクト比「16:9」)の解像度をチェックすると良いでしょう。 「タブレット、スマホ」は既に登録されているプリセットの解像度でチェックしてみると良いでしょう。 「タブレット、スマホ」の解像度のプリセットは[Responsive]コンボボックスで選択可能です(下記の解像度をチェックしてみると良いでしょう)。 タブレット:『「iPad」(768px*1024px)、「iPad Pro」(1024px*1366px)』。 スマホ:『「Galaxy Fold」(280px*635px)、「iPhone 5/SE」(320px*568px)、「Moto G4」(360px*640px)、「Pixel 2」(411px*731px)、「Surface Duo」(540px*720px)』 解像度を変更したら必ずリロードして下さい。 この知恵袋で いろんな人に これを提示してますが、恐らく誰も やって無いでしょうけどね。