4月4日 授業内容(jQueryまとめ、レギュレーション(ガイドライン)、検索キーワードチェッカー、header内のh1とpを入力するときの注意点etc...)
今回参考になったこと
・要素を横並びにさせるときはdisplay:inline-block;を使う。 (html,cssテキストP155~P158)
taneppa.net
・focus・・・押した時に変わる (P99)
.blur …… ウィンドウからフォーカスをはずす
★レギュレーション、ガイドラインの学習・・・何回入力しても同じ表示ができる打ち方の学習
<!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>
<!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>
<!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を使うときの注意点
動きのあるimgは1ページにつき1箇所が良い。
複数入れると閲覧者の気が散ってします。