疑似クラス

擬似クラスは記述した順に適用されていくため記述する順番に注意が必要です。

a:link(未訪問のリンク)
a:visited(訪問済みのリンク)
a:hover(マウスカーソルが重なったとき)
a:active(リンクをクリックしたとき)

▼書き方
a:link{
プロパティ:値;
}

参考サイト:http://html-coding.co.jp/knowhow/tips/rollover/
参考サイト:http://www.htmq.com/selector/link.shtml

クロームのキャッシュは最強

テストアップしても残ってるケースが多いクロームブラウザ。
画像変更したのに、変えたのに、常に表示が残っているグーグルクロームブラウザ。
なので変更して完了しても結構面倒なことがあります。

そういう場合には履歴を削除します、ただ履歴溜まってると結構長時間になります。
いろいろ便利なのですが、ときどき不便なときも。コーディング関係ないのですが、最強過ぎてなかなか。

jQueryのスライダー表示プラグイン「bxslider」

jQueryのプラグイン「bxslider」を使えば簡単にスライダーを導入する事ができます。

まず下記からダウンロード
http://bxslider.com/

ダウンロードしたファイルで下記の必要なファイルをディレクトリに移します。

・imagesフォルダ
・pluginsフォルダ
・jquery.bxslider.css
・jquery.bxslider.min.js

ヘッダー内に下記コードを読み込みます。

次にHTMLの表記、例えば4枚のスライダーを表示したい場合
下記のようにリストにclass=”bxslider”を記述

最初にbxsliderを読み込んだ後にの下記のコードを記述すればbxsliderが動きます。

FireFoxで崩れないtableでのboderのかけ方

通常tableを組んでborderをかける場合
下記のようなCSSの指定をする場合が多いと思いますが

FireFox等の一部のブラウザで表示すると
線が消えたりしてレイアウトが崩れてしまいます。

その場合、下記のような
borderのtableで上と左の線、th,tdで右と下の線を指定する書き方で解消することができます。

スマホ表示時にタップで電話番号をかけれるようにする。

2784745974-cell-phone-690192-XDlv-480x320-MM-100

今回はスマホ表示時にタップで電話番号をかけれるようにする方法についてです。

ユーザーがスマホでサイトを閲覧した時に
わざわざ電話番号を入力する手間をかけてまで電話をかけてくれるか?といえば
大概の場合「面倒くさいしまた今度電話しよう・・・」なんて思われ二度とかけてくれない、なんてなりかねません。
思い立った時にタップの1動作だけで電話がかけられる事がユーザーにストレスを与えない為にも必須です。

・設定の方法は実に簡単、

aタグのhref内に「tel:」と入れ電話番号を設定するだけです。

ただ、この状態のままだとPC表示でも電話がかかってしまうので
jQueryを使って特定の端末時のみタップが効くように設定します。

これで完成です。
レスポンシブ表示等ででスマホ、PCの両ユーザーにストレスを与えない為にも
こういった細かい部分に配慮をする事が大切です。

マークアップエンジニア(の卵)のブログ

マークアップエンジニア(の卵)のブログ始めます。どうぞよろしくお願いします。

2日に1回は更新しようと思ってます。
3日に1回更新はだめ、毎日更新しようかと思ってますが業務が入ることもあるのでその辺は・・。

123

※写真はイメージです。実物と鼻の数、目の数などは同一です。