FlexBoxについて勉強する

本日の教材動画はこちら Flexboxについて理解する 前回floatの理解が難しいってつぶやいてた私ですが、どうやら最近はfloatの代わりに今回勉強する「flexbox」を利用してレイアウトを組むことが多いらしい。というわけで、今回はflexboxについて勉強しました。 manablog.org ロードマック通りに勉強すると 、最初に貼り付けた動画でflexboxを勉強する形になるのですが… 丁度図書館で予約してたこちらの本に目を通していたところ、こちらのほうが100倍詳しくflexboxについて教えてくれていました。丁度いい時に借りられてよかった…。ので、今回は上記の本を読んでflexb…

レスポンシブデザインのサイトを作成する

本日の教材動画はこちら 今までいろいろと勉強しながら実際にコードを書いてましたが、最後に「実際にレスポンシブデザインのサイトを作る」とはどういうことなのか、上記の教材動画を見ながら作ってみました。 見よう見まねで作ろうとしてもうまくいかず… 勉強はしてきた者の今までCSSでサイトデザインしたことないし、どう組み合わせていいかもまったくイメージできていなかったので最初かなり苦戦しました…。作者さんがページのソースを配ってくれてたので最初それを見ながら作ってたのですがどうしてもうまくいかず…。 自分がわかりやすいようクラス名などを変えてたので、見本とどこが違うのかの見比べてもいまいち容量がつかめな…

floatで見た目を整える

本日の教材動画はこちら floatで見た目を整える 以前にfloatで文字や画像の回り込み方法を勉強しましたが、今回はレスポンシブデザインでのfloatについて少し見ていきましょう。floatについて忘れた場合は下記記事で復習。 syufu33.hateblo.jp 回り込みの指定と解除について理解する まず今回はfloatを使って下記の様にコンテンツを左右に並べたとします。ページソースはh1とdivタグにクラスをつけたのみのシンプルなものです。 外部CSSファイルの中身とその表示 左右に分けたいので、それぞれのコンテンツにfloatを指定しました。これでご覧の様に左右に分かれて表示してくれる…

段組みの切り替えについて

本日の教材動画はこちら 段組の切り替えについて考える 今回は段組の切り替えについてみていきます。段組みってなんぞ？段落じゃなくて？って最初思いましたが、「段＝カラム」ってのをみてなんとなく理解。ブログなどを作ってる人なら「1カラム」「2カラム」といえばイメージが付きやすいかもしれませんね。カラム＝縦方向に並んだブロックのことです（正確には縦だけじゃないと思いますが） 段組を理解できると、誰にでも見やすいレスポンシブデザインのサイトが作れるようになります。実際に見てみるとわかりますが、かなりのサイトで多用されている手法なようです。 2段を1段にしてみる ではまず2段を1段にしてみましょう。例えば…

切り替えポイントについて

本日の教材動画はこちら 切り替えポイントについて 切り替えポイントとは「ブレークポイント」と呼ばれるもので、CSSの切り替えのきっかけとなるタイミングのことを指します。 メディアクエリなら、＠media （メディアタイプ） and （ （メディア特性） ）｛ CSSの記述 ｝で書くことになるわけですが、主にメディア特性部分がブレークポイントになるようです。 例えば、＠medelia screen and (min-width:480px)｛セレクタ｛background-color:red;｝｝と記述した場合、480px以上の場合背景を赤色にするとなります。それ以下の場合ここのCSSは適応され…

レスポンシブデザインの考え方について

本日の教材動画はこちら レスポンシブとは 今まで散々レスポンシブ言ってきましたが、ここで初心（？）に戻ってそもそもレスポンシブとはなんぞや？を習っていきたいと思います。 まず response とは反応・返信を意味します。これをWEB上で捉えた場合は「反応が発生することによって見た目が変わる」＝レスポンシブデザインのことを指します。反応＝閲覧などと考えると手っ取り早いかもしれませんね！ レスポンシブデザインとは ではレスポンシブデザインとは何か。それは「1つのファイルを何らかの形で様々な表示形態に合わせることができるデザイン」のことです。HTMLページは1つですが、見る人によってデザインを合わ…

ページの印刷設定の仕方について

本日の教材動画はこちら 今日は印刷設定について見ていきたいと思います。 今回動画が文字だけの説明でまったく状況がイメージできず、何がなんだかさっぱりだったので、自分なりにページを作って勉強＆検証してみました。あとで見返してもわかるよう画像が多めです。そのため無駄に縦に長いですがご勘弁を！ 印刷設定をする際に使うべき単位 まずモニターの場合は解像度によって文字の大きさや画像の縮尺がかわってきます。印刷って基本画面をそのまま印刷しますので、場合によっては文字が小さすぎたり、画像が大きすぎたりでイメージ通りに印刷できないことがあります。それを避けるために、印刷設定時に使う数の単位は cm / mm …

スマホと高解像度ディスプレイに合わせた指定

本日の教材動画はこちら 今回はスマートフォンや、高解像度ディスプレイにどう画面表示を合わせるかを勉強していきましょう。 スマートフォンの「フィット」機能に対応する スマホはPC向けのWEBページも見ることができるようになってます。これはブラウザが画面の解像度を、ページの表示に合わせる「フィット機能」が搭載されているからです。おかげで私たちはPC用のページを綺麗に見ることができますが、このフィット機能が作動すると、折角用意したメディアクエリが正しく反映されないことがあります。 フィット機能への対策 次のmetaタグをhead内に組み込んであげることで対策することができます→＜meta name=…

メディア特性とは

本日の教材動画はこちら メディア特性について メディアクエリにはメディア特性を付け加えることができます。できますっていうかレスポンシブサイトを目指すなら必須の設定のようです。これも種類が多岐にわたりますが、ひとまずよく使う記述を見てみましょう width … 表示領域の横幅 height … 表示領域の高さ max-width … 表示領域の横幅（この後の指定が適応される最大値） min-width … 表示領域の横幅（この後の指定が適応される最小値） device-width … デバイスの横幅 device-heigh … デバイスの縦幅 orientation … デバイスの向き（スマホ…

メディアタイプとは

本日の教材動画はこちら メディアタイプとは メディアタイプとは、メディアクエリを指定する際に「どんなデバイスであるか」を指定するのに使います。合計10種類あるようですが、よく使う基本的なものだけ見てみましょう。 all … すべてのメディア screen … 一般的なディスプレイ全般（パソコンのスクリーン） projection … プロジェクター print … 印刷 記載方法について htmlに直接書き込む場合は＜link rel="stylesheet" type="text/css" media="（メディアタイプを記載）" href="xxx.css"＞という風に。外部CSSに書き込…

メディアクエリとは

本日の教材動画はこちら 今回からなにやら新しい単語いついて勉強していきます。 メディアクエリとは メディアクエリとは、CSSを利用して各種デバイスに合わせた表示・出力方法を指定することができるものです。デバイスの種類や表示解像度などをもとに、随時適切なものを自動的に選択してくれるものになります。 メディアクエリ＝レスポンシブサイトの基本！って感じでしょうかね？次にこのメディアクエリを指定していく方法をみていきましょう。 htmlで指定する ＜link rel="stylsheet" href="xxxx.css" media="（ここにメディアクエリを記述）"＞ という方法で指定ができます。た…

CSSで文字に影をつける

本日の教材動画はこちら 今回はCSSで文字に影をつけてみましょう。なんか前に似たようなこと勉強したよなーって思ってみてみたら、「影をつける方法について」記事ですでに自分で調べて勉強してたようなんですが、改めて教材としてでてきたので再度見ていきましょう。 text-shadow で文字に影をつける 使い方は至ってシンプルで text-shadow｛横方向にずらす数値 縦方向にずらす数値 ぼかし数値 色指定；｝です。実際に使ってみたほうが早いので早速見ていきましょう。 ソース内容と表示 上記のようなシンプルなページを用意しました。この文字にCSSで影をつけていってみましょう。 CSSで影をつける …

空白と大文字小文字の指定した文字装飾

本日の教材動画はこちら 今回はCSSで文字に空白を指定したり、大文字小文字を指定してみましょう。 text-indet で空白を指定する text-indetを使うと、1行目のインデント（字下げ）を指定することができます。使い方は text-indet：数値（5emなど）；となります。 text-transform で大文字・小文字をコントロールする text-transformを使えば、以下の様に大文字・小文字のコントロールをすることができます。 normal … 通常 capitalize … 単語の先頭文字を大文字にする lowercase … すべて小文字で表示する uppercase…

CSSを使った文字の線装飾

本日の教材動画はこちら 今まで様々な文字装飾をみてきましたが、ここで更にレパートリーを増やします。 text-decoration で文字に線を引く 文字装飾の定番（？）といえば、太線にする、色を変える、そして線を引くです！！今回は文字を線で装飾していく方法を見ていきましょう。線装飾には下記の4種類があります。 none … 何もつけない underline … 下線をつける overline … 上線をつける line-through … 打ち消し線をつける 使い方としては〇〇｛text-decoration：線の種類；｝です。noneはいつ使うんだ？って感じですが、これは主にaタグにつける…

セレクタのまとめ

本日の教材動画はこちら 今まで習ったセレクタのまとめ 本日は今までに習ったセレクタのまとめ動画でした。というわけで私も今まで勉強してきて、メモしてきた記事のリンクを動画の内容に沿って貼っていこうかと思います。 ・セレクタの種類と書き方について ・CSSをまとめて指定する方法 ・特殊なセレクタの記述方法について ・擬似要素について ・構造的な擬似要素について ・nth-childとnth-last-childの使い方について ・nth-of-typeとonly-of-typeについて ・直前や直後を示す擬似要素について これ以外にたくさんあり、特に擬似要素については記事にしただけでも上記より多い…

直前や直後を示す擬似要素について

本日の教材動画はこちら before と after について before は直前、after は直後を示す擬似要素です。使い方は〇〇：：before（又はafter）｛content：”表示させたい内容”；｝となります。前回同様今回もダブルコロンなので注意。一応コロン1こでもいけるようです。（どうも：はCSS2、：：はCSS3対応みたいです） もちろん文字以外にもスタイルの適応も可能。その場合はcontent：”内容”；の後ろにいつも通りCSSを追加していけばOKです。内容は文字だけでなく画像も指定可能。 その場合はcontent：url(アドレス)； となります。文字挿入せず何かしらのス…

1つ目を示す擬似要素について

本日の教材動画はこちら firs-letter と first-line について first-letter は1つ目の文字、firs-line は1つ目の行を示す擬似要素です。今までは「1つ目の要素」という形で全部をひっくるめていましたが、今回はピンポイントという形で指定できます。 使い方はシンプルですが、唯一注意点があるとすれば記述の仕方が セレクタ：要素名｛値；｝ではなく、セレクタ：：要素名｛値；｝となる点です。コロンが1個ではなく2個なので注意しましょう。ただ調べてみると：だけでも記載してたりするので、どっちが正しいのかは正直不明です。誰か教えて。 それでは早速使ってみます。今回用意し…

UIに関わる擬似要素について

本日の教材動画はこちら enabled disabled checked について 今回はまとめて3つの要素を見ていきます。まずそれぞれの定義は以下の通り enabled ： 通常の状態（選択・入力できる状態）のinput系要素 disabled ： "disabled"オプション（選択・入力ができない）の指定されたinput系要素 checked ： 主にradio,checkboxなどで選択されたものを対象とする これだけでは何が何だかさっぱりなので、実際に記述していきながら動作をみてみましょう。 用意したHTMLとCSSがこちら。 ページソースと外部CSSの内容 上記で出来上がるページが…

nth-of-typeとonly-of-typeについて

前回はnth-chileを勉強しましたが、今回はそれと似たnth-of-typeとonly-of-typeを勉強していきます。 本日の教材動画はこちら nth-of-type と only-of-type について nth-pf-typeは「特定の親要素の中の”特定の子要素が対象”」となります。nth-childの時は「特定の親要素の中の”隣接する子要素が対象”」でしたので、少しだけ違うことが分かるかと思います。 次にonly-of-typeは「特定の親要素の中の”唯一の子要素が対象”」となります。子要素が一つのみの場合に適用されます。 言葉だけでは分かりにくいので、実際に書いて違いを見ていき…

nth-childとnth-last-childの使い方について

チャートが「7．レスポンシブサイトを作ってみよう【英語】」に突入したのでいよいよ下手くそながらもサイトを作り始めるのか？と思ってたのですがそんなことありませんでした。引き続きCSSの勉強が続くみたいなので今日も元気にやっていきましょう。 本日の教材動画はこちら 今回は「何個目」かを指定できる擬似的な要素について勉強していきます。 nth-child と nth-last-child について nth-childは「最初から何番目の」を指定することができます。last-childは逆に「最後から何番目の」を指定することができます。使い方は「要素：nth-child（値）｛スタイルの内容｝で記載し…