Browse: Home » HTML

HTML

【HTML】タグの属性内でクオートが混在する際の記述方法。

メモ。

onclick属性の中などに複雑な文を記述しようとすると、どうしてもクォーテーションが混在してしまう。
そんな時は"を用いて下記のように記述するとよい。

<a href="#" onclick="$(&quot;.selector&quot;)">

的な。

 

2014/04/27 _onichannn , ,

【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>&nbsp;&gt;&nbsp;
  </li>
  <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
    <a itemprop="url" href="http://www.example.com/category/"><span itemprop="title">カテゴリー</span></a>&nbsp;&gt;&nbsp;
  </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>

 

2014/04/27 _onichannn , , ,

【HTML】HTMLドキュメント内のHTML要素の全ての属性は自動的に小文字に変換される。

という衝撃的事実。

HTMLの属性は大文字小文字を区別が無い。
独自データ属性を例に上げると下記の通りになる。

指定：DATA-HOGE
取得時：dataset.hoge

※dataset.HOGEではアクセス出来ない。

なんという。

 

2014/04/19 _onichannn , ,

【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>

■デモ

こんなかんじになる。

11

 

2014/03/19 _onichannn , ,

【Javascript】elementStyleで擬似hover属性を実装する。

cssファイルに記述するのがめんどくさい時。要素への記述のみでhoverが実現できたら楽だよね。

<a href="hoge.html" onmouseover="this.style.textDecoration='underline'" onmouseout="this.style.textDecoration='none'">text</a>

こんな感じ

 

2014/02/15 _onichannn , , ,

【HTML】metaタグのviewportに関するメモ。

ハマったのでメモ。超絶自分用。

・指定したwidthを元にドキュメントの幅が決定される
・initial-scaleの倍率を適用し、デバイス毎の表示領域にドキュメントの幅が最適化される
・initial-scaleの倍率で「ズームした状態」のページが表示される
・width=device-widthにするとデバイスごとの幅になる
・minimum-scale、maximum-scaleはuser-scalableがyesの歳に設定すれば良い

とにかくバグ？というか納得行かない挙動が多いので都度要最適化。

 

2013/11/29 _onichannn , ,

【HTML】base64エンコードされた画像を読み込む。

めも。

■GIF

<img src="data:image/gif;base64,[エンコード文字列]">

■PNG

<img src="data:image/png;base64,[エンコード文字列]">

■JPG

<img src="data:image/jpg;base64,[エンコード文字列]">

 

2013/11/26 _onichannn , ,

【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

という様に取得できる。

 

2013/11/05 _onichannn , , ,