本日の教材動画はこちら Flexboxについて理解する 前回floatの理解が難しいってつぶやいてた私ですが、どうやら最近はfloatの代わりに今回勉強する「flexbox」を利用してレイアウトを組むことが多いらしい。というわけで、今回はflexboxについて勉強しました…

本日の教材動画はこちら 今までいろいろと勉強しながら実際にコードを書いてましたが、最後に「実際にレスポンシブデザインのサイトを作る」とはどういうことなのか、上記の教材動画を見ながら作ってみました。 見よう見まねで作ろうとしてもうまくいかず… …

本日の教材動画はこちら floatで見た目を整える 以前にfloatで文字や画像の回り込み方法を勉強しましたが、今回はレスポンシブデザインでのfloatについて少し見ていきましょう。floatについて忘れた場合は下記記事で復習。 syufu33.hateblo.jp 回り込みの指…

本日の教材動画はこちら 段組の切り替えについて考える 今回は段組の切り替えについてみていきます。段組みってなんぞ？段落じゃなくて？って最初思いましたが、「段＝カラム」ってのをみてなんとなく理解。ブログなどを作ってる人なら「１カラム」「２カラ…

本日の教材動画はこちら 切り替えポイントについて 切り替えポイントとは「ブレークポイント」と呼ばれるもので、CSSの切り替えのきっかけとなるタイミングのことを指します。 メディアクエリなら、＠media （メディアタイプ） and （ （メディア特性） ）｛…

本日の教材動画はこちら レスポンシブとは 今まで散々レスポンシブ言ってきましたが、ここで初心（？）に戻ってそもそもレスポンシブとはなんぞや？を習っていきたいと思います。 まず response とは反応・返信を意味します。これをWEB上で捉えた場合は「反…

本日の教材動画はこちら 今日は印刷設定について見ていきたいと思います。 今回動画が文字だけの説明でまったく状況がイメージできず、何がなんだかさっぱりだったので、自分なりにページを作って勉強＆検証してみました。あとで見返してもわかるよう画像が…

本日の教材動画はこちら 今回はスマートフォンや、高解像度ディスプレイにどう画面表示を合わせるかを勉強していきましょう。 スマートフォンの「フィット」機能に対応する スマホはPC向けのWEBページも見ることができるようになってます。これはブラウザが…

本日の教材動画はこちら メディア特性について メディアクエリにはメディア特性を付け加えることができます。できますっていうかレスポンシブサイトを目指すなら必須の設定のようです。これも種類が多岐にわたりますが、ひとまずよく使う記述を見てみましょ…

本日の教材動画はこちら メディアタイプとは メディアタイプとは、メディアクエリを指定する際に「どんなデバイスであるか」を指定するのに使います。合計10種類あるようですが、よく使う基本的なものだけ見てみましょう。 all … すべてのメディア screen … …

本日の教材動画はこちら 今回からなにやら新しい単語いついて勉強していきます。 メディアクエリとは メディアクエリとは、CSSを利用して各種デバイスに合わせた表示・出力方法を指定することができるものです。デバイスの種類や表示解像度などをもとに、随…

本日の教材動画はこちら 今回はCSSで文字に影をつけてみましょう。なんか前に似たようなこと勉強したよなーって思ってみてみたら、「影をつける方法について」記事ですでに自分で調べて勉強してたようなんですが、改めて教材としてでてきたので再度見ていき…

本日の教材動画はこちら 今回はCSSで文字に空白を指定したり、大文字小文字を指定してみましょう。 text-indet で空白を指定する text-indetを使うと、1行目のインデント（字下げ）を指定することができます。使い方は text-indet：数値（5emなど）；となり…

本日の教材動画はこちら 今まで様々な文字装飾をみてきましたが、ここで更にレパートリーを増やします。 text-decoration で文字に線を引く 文字装飾の定番（？）といえば、太線にする、色を変える、そして線を引くです！！今回は文字を線で装飾していく方法…

本日の教材動画はこちら 今まで習ったセレクタのまとめ 本日は今までに習ったセレクタのまとめ動画でした。というわけで私も今まで勉強してきて、メモしてきた記事のリンクを動画の内容に沿って貼っていこうかと思います。 ・セレクタの種類と書き方について…

本日の教材動画はこちら before と after について before は直前、after は直後を示す擬似要素です。使い方は〇〇：：before（又はafter）｛content：”表示させたい内容”；｝となります。前回同様今回もダブルコロンなので注意。一応コロン１こでもいけるよ…

本日の教材動画はこちら firs-letter と first-line について first-letter は1つ目の文字、firs-line は1つ目の行を示す擬似要素です。今までは「1つ目の要素」という形で全部をひっくるめていましたが、今回はピンポイントという形で指定できます。 使い方…

本日の教材動画はこちら enabled disabled checked について 今回はまとめて3つの要素を見ていきます。まずそれぞれの定義は以下の通り enabled ： 通常の状態（選択・入力できる状態）のinput系要素 disabled ： "disabled"オプション（選択・入力ができな…

前回はnth-chileを勉強しましたが、今回はそれと似たnth-of-typeとonly-of-typeを勉強していきます。 本日の教材動画はこちら nth-of-type と only-of-type について nth-pf-typeは「特定の親要素の中の”特定の子要素が対象”」となります。nth-childの時は「…