HTML

マークアップエンジニアとかWEBディレクターとかをやってる僕が、自分が詰まって、解決したことをここに残しておきますよ。

「<LINK> の REL の属性値 `shortcut icon` は正しくありません。」というエラーがでたら

<link rel="shrotcut icon" href="./img/common/favicon.ico">

ってダメだったっけ?あれれ?

と思うよね。

上記の書き方はXHTMLの書き方。

HTML5ではこう書くんだ。


<link rel="icon" href="./img/common/favicon.ico"> 


relはiconだけでOK


 

最初の1文字だけ適用させるcss first-letter疑似要素

普通のテキストで、最初の1文字だけ色を変えたりでかくしたり、することってあんまりないと思う。
(むかしは雑誌風に1文字目をでかくするとかあったよね)

でも、listなどで頭につく●が色付きだったりすることはちょいちょいある。


調査
お見積もり作成
ご訪問

みたいな感じで。

こういうとき、

<li><span>●</span>調査</li>

というようなやりかたをやっていたのだけれども、cssで1文字目だけやっちゃうほうが楽なんだな。


html

<ul class="flow_list">
<li>●調査</li>
<li>●お見積り作成</li>
<li>●ご訪問</li>
</ul>

css
.flow_list li:first-letter{
color:#0000ff;
}

ってやるだけでシンプルに実現できる。

しかもIE6から使えるから、安心。
対応ブラウザ

急な腹痛にも安心なの。

 

フォームでで都道府県のプルダウンが出て来た時にコピペするselect

出てくる時にいちいち探すのが面倒なので、
(もちろんいちいち書くのは面倒だよね)

コピペできるように置いておくね。

<select name="ken">
<option>選択してください</option>
<option value="">北海道</option>
<option value="">青森県</option> 
<option value="">岩手県</option>
<option value="">宮城県</option>
<option value="">秋田県</option>
<option value="">山形県</option>
<option value="">福島県</option>
<option value="">茨城県</option>
<option value="">栃木県</option>
<option value="">群馬県</option>
<option value="">埼玉県</option>
<option value="">千葉県</option>
<option value="">東京都</option>
<option value="">神奈川県</option>
<option value="">新潟県</option>
<option value="">富山県</option>
<option value="">石川県</option>
<option value="">福井県</option>
<option value="">山梨県</option>
<option value="">長野県</option>
<option value="">岐阜県</option>
<option value="">静岡県</option>
<option value="">愛知県</option>
<option value="">三重県</option>
<option value="">滋賀県</option>
<option value="">京都府</option>
<option value="">大阪府</option>
<option value="">兵庫県</option>
<option value="">奈良県</option>
<option value="">和歌山県</option>
<option value="">鳥取県</option>
<option value="">島根県</option>
<option value="">岡山県</option>
<option value="">広島県</option>
<option value="">山口県</option>
<option value="">徳島県</option>
<option value="">香川県</option>
<option value="">愛媛県</option>
<option value="">高知県</option>
<option value="">福岡県</option>
<option value="">佐賀県</option>
<option value="">長崎県</option>
<option value="">熊本県</option>
<option value="">大分県</option>
<option value="">宮崎県</option>
<option value="">鹿児島県</option>
<option value="">沖縄県</option>
</select> 

フォームでselect要素の三角マーク(→▼これ)を非表示にする

cssやjsなどでフォームを装飾するときに、selectプルダウンの三角マークを消したいときは、cssで以下。

    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;   

IE7でdisplay:inline-block を使いたいとき

display:inline-block
使ったけど、「IE7も対応だよ」 って言われちゃったとき

ul li{display:inline-block;}

*:first-child+html ul li{
display:inline;
zoom:1;



でOK

最近よく使う。 
記事検索

リモキュー

お仕事のご依頼・お問い合わせはこちら

コーディングのお仕事が得意です。

https://twitter.com/tacshock
タグクラウド
QRコード
QRコード
  • ライブドアブログ