メモ。
onclick属性の中などに複雑な文を記述しようとすると、どうしてもクォーテーションが混在してしまう。
そんな時は"を用いて下記のように記述するとよい。
<a href="#" onclick="$(".selector")">
的な。
【HTML】タグの属性内でクオートが混在する際の記述方法。
【SEO】SEOを意識したパンクズリストの記述方法。
パンクズリストを作成するときに、下記の点に留意するとgoogleの検索結果に綺麗に反映される。
1, ul（リストタグ）を使用する
2, microdata形式の構造化マークアップを適用する
■構造化マークアップのやり方
1, liタグ内に「itemscope itemtype=”http://data-vocabulary.org/Breadcrumb”」を記述
2, aタグ内に「itemprop=”url”」を記述。※現在見ている場所もaタグで囲うこと。
3, アンカーテキスト部分をspanで囲んで「itemprop=”title”」の属性を付与する
下記例。
<ul id="bread-crumb-list;>
<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a itemprop="url" href="http://www.example.com/"><span itemprop="title">TOP</span></a> >
</li>
<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a itemprop="url" href="http://www.example.com/category/"><span itemprop="title">カテゴリー</span></a> >
</li>
<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a itemprop="url" href="http://www.example.com/category/article"><span itemprop="title">記事</span></a>
</li>
</ul>
【HTML】HTMLドキュメント内のHTML要素の全ての属性は自動的に小文字に変換される。
という衝撃的事実。
HTMLの属性は大文字小文字を区別が無い。
独自データ属性を例に上げると下記の通りになる。
指定：DATA-HOGE
取得時：dataset.hoge
※dataset.HOGEではアクセス出来ない。
なんという。
【HTML】HTMLで日本地図を作る。
タイトル通りのことをしたくて探してたらすばらしいコードを見つけたのでペタリ。
<table border="0" cellspacing="1" cellpadding="2" align="center" class="japan-map"> <tr> <td valign="top" colspan="14" rowspan="4"></td> <td colspan="2" height="60" bgcolor="#66CC00" nowrap align="center" class="act">北海道</td> </tr> <tr><td> </td><td></td></tr> <tr> <td colspan="2" bgcolor="#00CCFF" align="center" class="act">青森</td> </tr> <tr> <td bgcolor="#00CCFF" class="act">秋田</td> <td bgcolor="#00CCFF" class="act">岩手</td> </tr> <tr> <td colspan="10" rowspan="2"></td> <td rowspan="2" bgcolor="#FF6633" class="act"> 石川</td> <td colspan="3"></td> <td bgcolor="#00CCFF" class="act">山形</td> <td bgcolor="#00CCFF" class="act">宮城</td> </tr> <tr> <td bgcolor="#FF6633" class="act">富山</td> <td colspan="2" bgcolor="#FF6633" align="center" class="act">新潟</td> <td colspan="2" bgcolor="#00CCFF" align="center" class="act">福島</td> </tr> <tr> <td colspan="9"></td> <td colspan="2" bgcolor="#FF6633" align="center" class="act">福井</td> <td rowspan="2" bgcolor="#FF6633" class="act">岐阜</td> <td rowspan="2" bgcolor="#FF6633" class="act">長野</td> <td bgcolor="#00CC33" align="center" class="act">群馬</td> <td bgcolor="#00CC33" class="act">栃木</td> <td rowspan="2" bgcolor="#00CC33" class="act">茨城</td> </tr> <tr> <td colspan="4"></td> <td bgcolor="#6666FF" class="act">山口</td> <td bgcolor="#6666FF" class="act">島根</td> <td bgcolor="#6666FF" class="act">鳥取</td> <td rowspan="2" bgcolor="#FF3399" class="act">兵<br>庫</td> <td bgcolor="#FF3399" class="act">京都</td> <td colspan="2" bgcolor="#FF3399" align="center" class="act">滋賀</td> <td bgcolor="#00CC33" colspan="2" align="center" class="act">埼玉</td> </tr> <tr> <td rowspan="2" bgcolor="#FF9933" class="act">長<br>崎</td> <td rowspan="2" bgcolor="#FF9933" class="act">佐<br>賀</td> <td colspan="2" bgcolor="#FF9933" align="center" class="act">福岡</td> <td rowspan="5"></td> <td bgcolor="#6666FF" class="act">広島</td> <td bgcolor="#6666FF" class="act">岡山</td> <td bgcolor="#FF3399" class="act">大阪</td> <td bgcolor="#FF3399" class="act">奈良</td> <td rowspan="2" bgcolor="#FF3399" class="act">三重</td> <td bgcolor="#FF6633" class="act">愛知</td> <td rowspan="2" bgcolor="#FF6633" class="act">静岡</td> <td bgcolor="#FF6633" align="center" class="act">山梨</td> <td bgcolor="#00CC33" class="act">東京</td> <td rowspan="2" bgcolor="#00CC33" class="act">千葉</td> </tr> <tr> <td rowspan="3" bgcolor="#FF9933" class="act">熊<br>本</td> <td bgcolor="#FF9933" class="act">大分</td> <td colspan="3"></td> <td colspan="2" bgcolor="#FF3399" align="center" class="act">和歌山</td> <td></td> <td bgcolor="#00CC33" class="act">神奈川</td> <td></td> </tr> <tr> <td colspan="2" rowspan="3"></td> <td rowspan="2" bgcolor="#FF9933" class="act">宮崎</td> <td bgcolor="#339966" class="act">愛媛</td> <td bgcolor="#339966" class="act">香川</td> <td rowspan="3" colspan="9"> </td> </tr> <tr> <td bgcolor="#339966" class="act">高知</td> <td bgcolor="#339966" class="act">徳島</td> </tr> <tr> <td colspan="2" bgcolor="#FF9933" align="center" class="act">鹿児島</td> <td colspan="2"></td> </tr> <tr> <td colspan="2" bgcolor="#FF9933" class="act">沖縄</td> <td colspan="14"></td> </tr> </table>
■デモ
こんなかんじになる。
【Javascript】elementStyleで擬似hover属性を実装する。
cssファイルに記述するのがめんどくさい時。要素への記述のみでhoverが実現できたら楽だよね。
<a href="hoge.html" onmouseover="this.style.textDecoration='underline'" onmouseout="this.style.textDecoration='none'">text</a>
【HTML】metaタグのviewportに関するメモ。
ハマったのでメモ。超絶自分用。
・指定したwidthを元にドキュメントの幅が決定される
・initial-scaleの倍率を適用し、デバイス毎の表示領域にドキュメントの幅が最適化される
・initial-scaleの倍率で「ズームした状態」のページが表示される
・width=device-widthにするとデバイスごとの幅になる
・minimum-scale、maximum-scaleはuser-scalableがyesの歳に設定すれば良い
とにかくバグ？というか納得行かない挙動が多いので都度要最適化。
【HTML】base64エンコードされた画像を読み込む。
めも。
■GIF
<img src="data:image/gif;base64,[エンコード文字列]">
■PNG
<img src="data:image/png;base64,[エンコード文字列]">
■JPG
<img src="data:image/jpg;base64,[エンコード文字列]">
【Javascript】HTML5のカスタムデータ属性にアクセスする方法。
今回はjQuery無しのアプローチ。
下記のようなHTMLがあったとする。
<div class="target" data-hoge="piyo">target</div>
上記の「data-hoge」の中身を取得したい場合。
var elem = document.querySelector('.target');
var data = elem.getAttribute('data-hoge');
console.log(data);
// piyo
という様に取得できる。