[操作手順]
→Dreamweaverのデザインビューに原稿をコピー＆ペーストする
→すべてのHTML特殊文字がエスケープされてペーストされます
[確認環境]
Windows 7 SP1 64bit
Dreamweaver CS3 9.0
「HTML/CSS」カテゴリーアーカイブ
HTML/CSSに関する記事です。
[HTML/CSS]datetime属性
日付、時刻、日時を示す属性です
|
1 |
datetime="2000-01-05" |
|
1 |
datetime="01:02:03+09:00" |
|
1 |
datetime="2000-11-15T23:12+09:00" |
|
1 |
datetime="2000-11-15T23:12:01+09:00" |
|
1 |
datetime="2000-10-31T23:12:01Z" |
[HTML/CSS]メール送信用のリンクを張る方法（mailto:）
クリックすると、メールソフトを呼び出すことができます
|
1 |
メールアドレス：<a href="mailto:dammy@dammy.com">dammy@dammy.com</a> |
メールアドレス：dammy@dammy.com
※上記のメールアドレスはダミーです
※送信しないようお願いします
[HTML/CSS]電話発信用のリンクを張る方法（tel:）
クリックすると、スマホやSkypeなどの通話アプリがインストールされているPCにて、通話を開始することができます
|
1 |
電話番号：<a href="tel:0120000000">0120-000-000</a> |
電話番号：0120-000-000
※上記の電話番号はダミーです
※発信しないようお願いします
[HTML/CSS]スマホが自動で電話番号リンクを貼るのを防ぐ方法
スマホのブラウザは、ページ中に連続した数字があると、自動で電話番号リンク化してしまいます。
以下のコードをヘッダーに追加するとおせっかい機能をOFFにできます。
|
1 2 3 |
<head> <meta name="format-detection" content="telephone=no"> </head> |
[確認環境]
iPhone 4
iOS 7.0.6(11B651)
[HTML/CSS]ul/liリストで小さい黒丸（中黒点）を設置する
下記のように、小さい黒丸の画像をbackgroundで指定する
backgroundは画像配置の微調整ができるため使いやすい
|
1 2 3 |
background:url(../img/icon_dot.png) no-repeat 0px 18px; list-style:none; padding:10px 12px; |
下記のように、小さい黒丸の画像をlist-styleで指定する方法もあるが、
list-styleは画像配置の微調整ができないので使いにくい
|
1 |
list-style:url(../careerjet_search.html) outside; |
下記のリスト標準の黒丸は、サイズが大きすぎるため使えない
|
1 |
list-style:disc outside; |
[HTML/CSS]Googleマップを自分のWebサイトにカスタムサイズで埋め込む方法
※2015年8月12日現在の手順です
※Googleがメニューを更新した場合はこの通りの手順では進めません
[操作手順]
→Googleマップで「東京駅」を検索する
https://www.google.co.jp/maps/place/%E6%9D%B1%E4%BA%AC%E9%A7%85/
→キーワード入力窓の左にある、三本線アイコン（ハンバーガーアイコン）をクリックしてメニューを呼び出す
→「地図を共有または埋め込む」（クリップのようなアイコン）をクリックする
→「地図を埋め込む」をクリックする
→窓の左上より、「中 ▼マーク」をクリックして「カスタムサイズ ▼」へ変更する
→地図を埋め込む予定のスペースの縦横ピクセルサイズを入力する
→iframeのコードをコピーする
※以下「東京駅」「400x400px」の例です
|
1 |
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3240.8221076594486!2d139.766084!3d35.68138199999999!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188bfbd89f700b%3A0x443025838b0ce6c6!2z5p2x5Lqs6aeF77yI5p2x5Lqs77yJ!5e0!3m2!1sja!2sjp!4v1439376461429" width="400" height="400" frameborder="0" style="border:0" allowfullscreen></iframe> |
→iframeのコードを自分のWebサイトへ貼り付ける
[HTML/CSS]ブラウザの窓サイズによらず、フッターを常に最下部に表示するレイアウト
[要点]
・td 二つのテーブルでページ全体を覆う
・table width=”100%” height=”100%” border=”0″ cellspacing=”0″ cellpadding=”0″
・td valign=top にフッター以外を入れる
・td valign=bottom にフッターを入れる
テーブルで覆う前
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無題ドキュメント</title> </head> <body> <div id="header"></div> <div id="nav"></div> <div id="main"></div> <div id="footer"></div> </body> </html> |
テーブルで覆った後
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無題ドキュメント</title> </head> <body> <table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td valign=top> <div id="header"></div> <div id="nav"></div> <div id="main"></div> </td> </tr> <tr> <td valign=bottom> <div id="footer"></div> </td> </tr> </table> </body> </html> |
[HTML/CSS]テキストの折り返しを制御するCSSプロパティ
プロパティ white-space、値 normal、pre、nowrapを使います
要素に含まれる半角スペース、タブ文字、改行の扱いを指定して、折り返しを制御できます
※全角スペースは含まれないようです
[HTML/CSS]CSS、jQueryの読み込み順序の注意点
結論を先に書くと、*.cssを先に、*.jsを後に読み込むようにします
*.jsを先に、*.cssを後に読み込んだ場合、
例えば、jquery.customSelect.jsは正常に動かなくなります
Google Chrome環境のみで以下の不具合が発生します（IE11、Firefoxに問題は起きません）
セレクトボックスの幅が想定よりも長くなり、選択できる部分にズレが生じる（▼マークを押してもプルダウンできない状態）
F5を押して再読み込みすると直ることがある
*.cssを先に、*.jsを後に読み込むことで解決します。
[確認環境]
Windows 7 SP1 64bit
Firefox 38.0.5
Google Chrome 44.0
IE 11.0