HTML＆CSS③+その他
HTML＆CSS③
レスポンシブデザインに対応するための基礎知識
メディアクエリとは？
ブラウザの画面サイズに応じてCSSのスタイルを適用できる手法
メディアクエリの書き方
@media(条件){…}
条件を満たしているときのみそのスタイルが適用される。
条件には、max-width,min-widthを指定することができる。
条件にはセミコロンは不要
指定した条件の幅(〇〇px)の部分をブレイクポイントと呼ぶ。
例
@media(max-width:1000px){
.classname{
width:50%;
}
}
要素の幅が100％を超えてしまうのを防ぐ
box-sizing:border-box;
を指定することで、要素の％の中にpaddingとborderを含むことができる
※marginは例外なので注意！
すべての要素に適用するCSS
*{...} のようにアスタリスクで指定する
レスポンシブデザインを適用する場合は、
<head>タグ内にviewportを設定する。
スマホやタブレットにメディアクエリを適用する際に必要となる。
レスポンシブ用のCSSを用意する場合はviewport読み込みの記述より下に書くこと
レスポンシブデザインの参考サイト
レスポンシブWebデザインにしよう！ － 新米web担のためのホームページの作り方 | 第14回 | コアースのブログ
他今日の活動
paizaにて好奇心でJavaScriptを使用してDランク問題にチャレンジしてみました。
for文を使えばもっとスマートだったかもなぁ…。
ググりながらだったので時間かかってしまった。次はもうちょっとささっと書きたい！
Vue.jsについて
まだ理解できていませんが入門のリンク
https://dotinstall.com/lessons/basic_vuejs_v2
勉強用で作成した静的サイトを公開する手法
いつか試してみたいのでメモ
