プログラミング初心者の60日間チャレンジ【26~30日目】

プログラミング日記

プログラミング初心者の60日間チャレンジ【26日目】

はじめてのレスポンシブWebデザイン入門講座 動画視聴

入門講座の視聴は1-1~3の3本で、視聴時間は約16分でした。

・構造的な擬似要素の応用
ノートにまとめようと思ったら、いきなりコード画面に変わって驚きました。初心者向けの動画なのに、展開が早くてびっくりです。nth-childは、偶数列奇数列の色づけでよく見かけますよね。(実際にnth-childと書かれているかどうかはわかりません(笑)。)綺麗に整列させるとき、入力ミスを防ぐとき、効果的な色づけ方法だと思います。

・構造的で特殊な擬似要素
日本語の間違い探しのみたいですね。CSSの適用内容も間違い探しみたいです。講義を見ているだけだと、簡単に「なるほど」と思いますが、自分がデザインしてコードを書くときは「どのコードがより適切なのか」を検討する必要があります。当たり前ですが、それが難しいですよね。既知のコードだけで勝負できるとは限りません。理想的な適用状態を示すコードをイメージしておくことも、大切だと感じました。

・UIに関わる擬似要素
プログラミング勉強を開始した頃は、HTML記述の方が多かったのに、今はCSS記述列が増大しています。レスポンシブにするためのコード書きは、想像している以上に大変な作業なのかもしれません。WordPressテーマ販売に、ひたすら感謝です。そろそろ新しいデザインを自分で実践しないと、コード練習ができませんね。気を付けます。

 

プログラミング初心者の60日間チャレンジ【27日目】

はじめてのレスポンシブWebデザイン入門講座 動画視聴

入門講座の視聴は1-4~6の3本で、視聴時間は約17分でした。

・一つ目を示す擬似要素
こういうコード指定を勉強するたびに、MicrosoftWordなどの汎用ソフトウエアがとても優秀であることに感動します。ボタン一つで、何でもできることが素晴らしい。その裏側には、こういうコードがたくさん隠されているのでしょう。
ドロップキャップ、という言葉を初めて知りました。新聞や雑誌などで使われている技法を、Webデザインで実行できるのです。しかもレスポンシブのため、体裁がとても綺麗に仕上がります。デザインそのものを勉強しなくてはならないですね。

・直前や直後の擬似要素
電話記号が想像と違ったのが残念です。『☏』だと思ったら『✆』でした。どちらも環境に依存する記号なので、書き込む前に環境確認が大切です。
「丸を書いてみましょう」からはじまったCSS記述に首をかしげていたら、大きな丸が表示されました。コードで記号を作るパターンでした。せっかく動画講義の勉強なので、講師がどういう意図でそのコードを扱おうとしているのか、理解できるようになりたいです。

・セレクタのまとめ
この講義は、今までのおまとめ講義になります。ノート代わりに使えます。どんなコードを使えば、実現したいデザインを実現してくれるのか。奥の深いCSSです。

 

プログラミング初心者の60日間チャレンジ【28日目】

はじめてのレスポンシブWebデザイン入門講座 動画視聴

入門講座の視聴は2-1~4の3本で、視聴時間は約15分でした。(1~4で3本になる理由は、のちほど。)

・文字の装飾(線を引く)
技が細かくなってきました。打ち消し線は便利ですし、利用頻度が高そうです。aタグとhoverの組み合わせからのnone指定は、合わせ技一本という感じがしました。しっかりUIを考えてからデザイン、CSSコードを書かなくてはいけませんね。

・空白などの扱い方について指定する
TechAcademyさんのYouTube講義動画が、同じ物が2つアップされています。確認してから視聴しましょう。もちろん、2回視聴しても良いです。
インデントと大文字、小文字の指定方法です。空白(スペース)を挿入すると、レスポンシブが成立しないときがあるため、相対的な表現が必要です。余談ですが、私の知り合いのフューチャーフォンから送られてくるメールが、改行を使わず空白で処置されてくるので、いつも読みにくいです。レスポンシブじゃないってことですね。勉強になります。

・文字に影をつける
オシャレです。オシャレ感を増すためにCSSでタイトルを書くわけではなく、タイトルロゴの挿入を画像から、文字に切り替えたいからです。画像よりも文字の方が検索に有利ですし、読み込みの速度向上も見込めます。

レスポンシブWebデザイン、とは言いつつ、検索対策にも必要な知識が満載ですね。理解をしながら、勉強を進めます。

 

プログラミング初心者の60日間チャレンジ【29日目】

はじめてのレスポンシブWebデザイン入門講座 動画視聴

入門講座の視聴は3-1~3の3本で、視聴時間は約14分でした。

・メディアクエリとは
何の話なのかわからず、慌てて参考書を開きました。参考書で具体例を見つけて、何の話をしようとしているのかを理解することができました。参考書、大活躍です。

・メディアタイプ
私が一番馴染みのあるのは、printです。印刷用レイアウトは、仕事でとてもお世話になっています。この○○用レイアウトは、それぞれのソフトウェアに導入されていることがあるので、想像しやすいと思います。

・メディア特性
コードの説明がふわっとしています。この回は特に、ふわっとしていると思います。

今回の3本の動画は全て、概要講義だけでした。実際の動きが楽しみです。

 

プログラミング初心者の60日間チャレンジ【30日目】

はじめてのレスポンシブWebデザイン入門講座 動画視聴

入門講座の視聴は3-4~5の3本で、視聴時間は約20分でした。

・環境に合わせた指定の追加
デバイス環境が変わると表示が変わることは、WordPressでは簡単に確認することができます。(便利な機能が搭載されているWordPressは優良です。)スマホでWebサイトを閲覧しているとき、うまく表示されない状態をイメージすれば良いと思います。今まで、全く気にしたことはありませんでしたが…。
高解像度ディスプレイの環境は、デジカメやスマホから写真データをパソコンに移したときのイメージですね。撮った画面で確認したときは、普通に見ることができるのに、パソコンに取り込むと画像範囲が膨らむ状態です。
どちらの表示環境も、見たことがある状態ではないでしょうか。

・ページの印刷
説明されている内容は理解できるのですが、実践のイメージが沸きませんでした。Webページ印刷が崩れるのは、何度も目にしたことがあります。しかし、印刷体裁が崩れない優良サイトのイメージが沸かないのです。印刷ニーズがあることに加えて、印刷体裁が整うコードを書いてくれているサイトを知りたかったです。実際のWebページを見るのが、一番の勉強になると思います。