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

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