takalogtakalogサイトマップお問い合わせホームプログラミング【仕事】HTML5&CSS3デザインブック【スキル】2019年10月27日SHAREツイートシェアはてブLINEPocket前回のブログで『HTML5/CSS3モダンコーディング』を紹介しました。HTML5とCSS3を同時に勉強したい、という人向けにご紹介しました。以下の3つのレイアウトを実際に作ってみるという内容です。・スタンダードレイアウト・グリッドレイアウト・シングルページレイアウトもちろん、スマートフォン対応についても学ぶことができます。スタンダードレイアウトとシングルページレイアウトは、通常どの本でも掲載されているレイアウトなので、今まで紹介してきた本と大きな差異はありません。この本の珍しい点は、グリッドレイアウトというレイアウトを学ぶことが出来る点です。様々な大きさのボックス(四角いエリア)をランダムなレイアウトで表示できるものです。MasonryというJavaScriptライブラリを使います。その手法について学ぶことができる点が他の本との大きな違いです。どのようなレイアウトかは前回のブログに私がコーディングしたものを掲載していますので、ご確認ください。今回ご紹介する本も基本的にはHTML5とCSS3を学ぶことができる本です。学ぶことができる内容は以下の4つです。・ブログ・ニュース系サイトのコンテンツページ・ブログ・ニュース系サイトのトップページ・ビジネスサイト風のトップページ・ビジネスサイト風のコンテンツページ本のタイトルは『HTML5&CSS3デザインブック』です。・実際にどのような知識とスキルが得られるのか・どうしたらよいか?■本の紹介この本から学ぶことができる最大のメリットはCHAPTER1の「Webページにおける段組み」です。このCHAPTER1だけで実に43ページものページ数を使って、Webページのレイアウト、デザインについて解説してくれているのです。この章を読むだけでも、この本を購入する価値があります。この章の内容を完全に理解すれば、今後どのようなレイアウトのWebページでも作ることができるようになるでしょう。本の内容は以下の通りです。Webページにおける段組みWebページにおけるレイアウト、デザインを解説してくれている章になります。必見の価値のある章です。Webページを作成する準備CHAPTER3以降で実際に作成していくWebページのひな型やパーツを準備する章です。ブログ・ニュース系サイトのコンテンツページブログやニュースなどの記事を掲載するページについて学ぶ章になります。いわゆるスタンダードなレイアウトですが、記事の掲載するページに必要なパーツをどのように並べて表示するかを学ぶことができます。ブログ・ニュース系サイトのトップページCHAPTER3の各記事のページに対して、それらをまとめるトップページについて学ぶ章になります。各記事の概要などが並べられて表示するパーツをどのように並べて表示するかを学ぶことができます。いわゆる会社のホームページについて学ぶ章になります。トップページ、つまり会社のホームページの顔に当たる部分について学ぶ章になります。どのようなパーツをどのように配置して表示するかを学ぶことができます。ビジネス風サイトのコンテンツページここでは、会社のホームぺージの中の各個別のページ、例えば会社紹介などの各ページについて学ぶことができる章になります。本の構成は以下のようになっています。■実際にどのような知識とスキルが得られるのかこの本を通して得られる知識とスキルは、ズバリWebページのレイアウトの理解と作成スキルです。Webページの作成で何が一番難しいのかというと、横の情報を並べることです。縦に情報を並べることは、HTMLのコーディングが上から順に記述していくため視覚的に理解しやすいのであまり苦労はしません。ところが、縦にコーディングしているものを横に並べて表現することは、視覚的に見ているものと表現しようとしているものが違っているので、とても理解しづらいのです。その理解しづらい横に情報を並べる方法をCHAPTER1で詳細に解説してくれているのがこの本なのです。CHAPTER3以降の実践部分ももちろんとても勉強になるし、とても良い内容なのですが、CHAPTER1がなにしろ秀逸なので、この章だけでも読む価値があります。以降でその理解したことを実際に作ってみる、という流れです。今まで紹介してきた本では、とにかく実践しながら理解していくことに重点が置かれていたと思いますが、ここらでなぜそう表現できるのかということをじっくり深く理解して、知識とスキルをちゃんと定着させることも良いと思います。分厚くて、簡単には終わらないかもしれません。実際私も1週間では終わらず2週間かかってしまいました。そのため先週のブログの更新ができませんでした・・・(泣)。■どうしたらよいか?まず、この本に関するフォルダを作成しましょう。用のフォルダを作成し、本のHPから見本用としてダウンロードしましょう。自分がコーディングする用のフォルダを別途作成します。画像は見本用からコピぺします。本に記載されている内容を1ページずつ一文字ずつ打ち込んでいきます。本に記載されている通りに打ち込んで動かしてみると、ちゃんと動きます。当たり前・・・なのですが、自分が間違えずにちゃんと打ち込むと動くのです。これってスゴクないですか。再現率100%なんですよ。誰でも同じプログラムを同じように打ち込めば、作ることができるのです。誰にでもできるそのスキルは誰もが持っているのです。理解しなければいけないことはたくさんあるので、途中でわからなくなって諦めてしまったり、好き嫌い、向き不向きはあるので、誰もがプログラマーやシステムエンジニアになれるかと言われるとなれるとは言い切れません。普通の人が普通にキーボードを打つことができれば、能力としては充分可能なのです。プログラマーとしてのスキルを身に付ける可能性は誰もが十分持っているのです。そこだけは理解しておいてください。ちなみに私自身がコーディングした結果です。このようなページが作成できます。:CSS3HTML5デザインブックAWSにトライする。ドキュメントルートって何?AWSにトライする。SSHでログインする。コメントをキャンセルメールアドレスが公開されることはありません。【仕事】文系でもプログラミング副業で月10万円稼ぐ!【スキル】AWSにトライする。