4月4日 授業内容(jQueryまとめ、レギュレーション(ガイドライン)、検索キーワードチェッカー、header内のh1とpを入力するときの注意点etc...)

jQueryまとめ
d.hatena.ne.jp


今回参考になったこと
・要素を横並びにさせるときはdisplay:inline-block;を使う。 (html,cssテキストP155~P158)
taneppa.net



focus・・・押した時に変わる (P99)
 .blur …… ウィンドウからフォーカスをはずす

レギュレーション、ガイドラインの学習・・・何回入力しても同じ表示ができる打ち方の学習

f:id:paris1204:20160404202719p:plain

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ガイドライン、レギュレーション(縦並び)</title>
</head>
<style>
html,body,ul,li{font-family:"Hiragino Kaku Gothic proN",
Meiryo,
sans-serif;
padding:0;
margin:0;}

a{text-decoration:none;}
ul,li{list-style:none;}

/*body*/
.nav{width:300px;
 margin:100px 0 0 100px;}

li{font-size:20px;/*文字の項目なので幅高さは入れない*/
font-weight:bold;
}

li a{
 background-color:#000;
display:block;
margin-bottom:5px;
line-height:50px;
padding:1.0em;
color:white;}

li a:link,li a:visited{background-color:#39C;}

li a:hover{background-color:#f90;}


</style>
<body>
<ul class="nav">
<li><a href="#">カテゴリA</a></li>
<li><a href="#">カテゴリB</a></li>
<li><a href="#">カテゴリC</a></li>
</ul>
</body>
</html>


f:id:paris1204:20160404202805p:plain

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ガイドライン、レギュレーション(横並び)</title>
</head>
<style>
html,body,ul,li{font-family:"Hiragino Kaku Gothic proN",
Meiryo,
sans-serif;
padding:0;
margin:0;}

a{text-decoration:none;}
ul,li{list-style:none;}

/*body*/
body{background-color:blue;}

.nav{width:600px;
 margin:100px 0 0 100px;
 overflow:hidden;}

li{font-size:20px;
font-weight:bold;
float:left;
width:200px;/*floatをかけるときは必ず”幅”、高さ指定する*/
height:50px;
color:#FFF;
text-align:center;
}

li a{
 background-color:#000;
display:block;
line-height:50px;/*文字の位置の調整(真ん中に配置するために、高さと同じ値にしている)*/
color:#fff;
border-left:2px solid #fff;}

li:first-child a{border-left:none;}/*書き方注意*/

li a:link,li a:visited{background-color:#000;}

li a:hover{background-color:#f90;}


</style>
<body>
<ul class="nav">
<li><a href="#">カテゴリA</a></li>
<li><a href="#">カテゴリB</a></li>
<li><a href="#">カテゴリC</a></li>
</ul>
</body>
</html>


f:id:paris1204:20160404202855p:plain

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="CSS/kyoto.css">
<title>京都観光ガイド</title>
</head>

<body>
<div id="container">

<div id="header">
<h1>京都観光ガイド</h1>

<p>伏見稲荷大社(ふしみいなりたいしゃ)は京都市伏見区にある神社。旧称は稲荷神社。式内社(名神大社)、二十二社(上七社)の一社。旧社格は官幣大社で、現在は神社本庁に属さない単立神社。稲荷山の麓に本殿があり、稲荷山全体を神域とする。
全国に約3万社あるといわれる[1]稲荷神社の総本社である。初詣では近畿地方の社寺で最多の参拝者を集める(日本国内第4位〔2010年〕)[2]。現存する旧社家は大西家。</p>
</div><!--#header-->


</body>
</html>


。。。。。。。。。。。。。。。。。。。。。。。。。
検出キーワードをチェックできるサイト
FC2 SEO対策 - キーワード出現率チェッカー

。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。

header内のh1とpを入力するときの注意点etc...
以下の点を守らないと上位表示できない


・header内のh1は必ず文字で見える大きさ、色で表示しなければならない。隠し文字絶対ダメ!!
h1の最初のキーワードには必ず助詞をいれる
※ロゴを入れるときはpタグにidをつけて入れる。

・サイト内リンクに絶対パスは使ってはいけない

検索エンジンは最初から200行を読むので、上には無駄なデータを入力しないこと。

css,jsは必ず外部リンクにすること

・li aは検索エンジンはnavとしてしか拾わない

・文字≒キーワードとして拾う。100個を超えると消える。


★動くimgを使うときの注意点
f:id:paris1204:20160404205648p:plain
動きのあるimgは1ページにつき1箇所が良い。
複数入れると閲覧者の気が散ってします。