見出し画像

HTML/CSS6 サイト作ってみよう&JS・・


li内改行でインデントを揃える楽な方法
ul {padding-left: 20px;
  list-style-type: disc;
     list-style-position: outside;

    }
= 左に20px分のスペースができた!

レスポンシブにする方法
①画面サイズごとに別々のCSSを当てる。pc.cssとsp.css、といったように閲覧端末の数だけCSSを用意する方法
②同じファイルにCSSを記述するが、横幅によって当てるCSSを分ける。
共通のCSSの中でメディアクエリという機能を利用して画面幅によってCSSを適用し分ける方法

レシポンシブのコツ
可変幅を意識して、要素の中でも文字画像のような最小構成要素のみが決まった大きさ(px)やマージンを持ち、それ以外の「囲い」の要素はなるべく%で大きさを指定するようにする。

キービジュアルとは、ヘッダーとコンテンツの間にある重要なメッセージを含んだ一番大きな画像部分

JavaScrip(jQuery)

スライドショー、スクロールフェードイン、モーダルなどの動きをWebサイトにつける。
関数とは、処理をひとまとめにして名前を付けたもの。

jQuery
ブラウザに表示されるHTML/CSSを操作して、簡単に動きをつけるという機能に絞る。
jQueryはJavaScriptのライブラリです。
「ライブラリ」とは汎用性の高い複数のプログラムを再利用可能な形でひとまとまりにしたもの。他のプログラムに何らかの機能を提供するコードの集合体です。

jQueryの全てに通づる基本は、「いつ」「何を」「どうするか」

jQueryの基本構造
$("button").on("click",function(){
  console.log("クリックされたら");
)}
ボタンをクリックした時に、「クリックされた」とコンソールに表示させる

Tip・・
CSSは後から読み込まれたものが優先される


この記事が気に入ったらサポートをしてみませんか?