本日の教材動画はこちら 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の時は「…

チャートが「７．レスポンシブサイトを作ってみよう【英語】」に突入したのでいよいよ下手くそながらもサイトを作り始めるのか？と思ってたのですがそんなことありませんでした。引き続きCSSの勉強が続くみたいなので今日も元気にやっていきましょう。 本日…

さてさて、CSSを勉強し始めて4か月。のろのろながらも教材の全動画を勉強し終えたました。HTMLの時同様遅すぎでは？？？という感が否めませんが、途中でやめずコツコツ続けてるだけいいとしよう！ 今まで勉強してきたことを記事にまとめてきたわけですが、1…

本日の教材動画はこちら 今回はボックスに影（ドロップシャドウ）をつける方法です。色々なものにつけれるようですが、基本的な使い方は同じとのこと。 box-shadow の使い方について ボックスに影をつけるには box-shadow プロパティを使います。6つの値があ…

本日の教材動画はこちら 今回は引き続きボーダー関連について。前回はボーダー線のあれこれでしたが、今回はボーダーの角についてお勉強していきます。 border-radius について ボックスには必ず左上、右上、右下、左下と四隅がありますよね。border-radius…

本日の教材動画はこちら 今回はちょくちょく利用してきたborderについて掘り下げてみていきましょう。今までは黒色の実線を使う事が多かったかと思いますが、borderプロパティでより細かく姿勢ができるようです。 border について そもそもボーダーの範囲っ…

本日の教材動画はこちら 引き続き、背景指定のあれこれについて深く掘り下げて勉強していきます。今回は背景のサイズ指定についてと、背景の適応範囲について勉強していきましょう。 background-size で指定できる値について background-sizeは文字通り背景…

本日の教材動画はこちら 前回に引き続き、背景指定のあれこれについて深く掘り下げて勉強していきます。動画の後半が死ぬほど説明不足だったため、実践される人は一旦最後まで読んでいただけるとわかりやすいかと思います。 背景の繰り返し設定について 前回…

本日の教材動画はこちら いままで当たり前のように使ってましたが、今回は背景の指定について深く掘り下げて勉強していきます。 背景の指定方法のあれこれ 背景プロパティには色々な指定をかけることができます。下記に代表的なものをいくつか記載しました。…

本日の教材動画はこちら 前回勉強したpositionプロパの関係性が深い、z-indexについて勉強していきます。 z-indexについて z-indexとは、主に奥行きを指定するためのプロパティです。positionプロパでブロックの位置を固定したり、前後の位置関係がありまし…

本日の教材動画はこちら 本日もボックスの配置に関係するpositionについてみていきます。今回も動画を見てもいまいち理解に苦しんでしまったので自分で調べたながら書いてます。もし理解などが間違ってたら是非ご指摘ください...。 position プロパティにつ…

本日の教材動画はこちら 本日はボックスの配置に関係するfloatとclearプロパティについて勉強していきます。clearについては動画をみても正直よく理解できなかったので自分で調べたことを書いてます。よしなに。 float プロパティについて float についてで…