「htmlのことはなんとなくはだいたい知ってるよ」というエンジニアが、初めて業務でhtmlコーディングをするときにわりとハマりやすい点。ぐぐってもあまり出てこないような細かいノウハウをまとめてみました。
ウインドウ余白を消したい
ブラウザによっては、ウインドウ枠のまわりに余白スペースが挿入されてしまって、ウインドウの端まで画像等を配置したいのに実現できない、なんてことがあります。これはbodyタグがデフォルトで余白を持っているのが原因です。<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
と記述するか、あるいはcssで
<body style="margin:0;padding:0;">
として、余計なマージンを消してしまいましょう。
formタグをいれると空行があいてしまう。
<form>タグを入れた箇所で、勝手に1行分の余計なスペースが入ってしまってレイアウトが崩れてしまうことがよくあります。 回避するには、<form style="margin:0;padding:0;">
として、CSSレベルでプリセットされているマージンやパディングを消してやると良いです。
テキストフォームとパスワードフォームの大きさ違い
ログインフォームなどをつくるときに、IDとパスワードを入れる欄を並べることがよくあります。このとき、<input type="text" size="20"><br> <input type="password" size="20"><br>
と書いてしまうと、IEで見るとなぜか両者の横幅が異なってしまいます。これはちょっとかっこわるい。
ので、下記のようにcssで横幅指定すると吉です。
<input type="text"style="width:100px;"><br> <input type="password" style="width:100px;"><br>
画像にはalt属性を
<img>タグにはalt属性を必須でつけるのが正しいhtmlコーディングです。けっこう忘れがち。＜自分
imgタグ画像と背景画像
画像を表示させるには、imgタグを使う方法と、他の要素の背景画像として指定する方法とがあります。どちらもブラウザでの見た目に違いはないですが、紙にプリントするとおおきく異なることがあります。ブラウザの設定によっては、imgタグで指定した画像は印刷されますが、背景画像として指定したものは印刷されません。
<a>タグを使いたいが、リンク先は指定したくない。
開発している最中によくありますが、テキストリンクを張りたいがまだリンク先urlが決まっていないときの話。<a>こちら</a>へ
という記述をすると、文字色が青くなったりアンダーラインがついたりといったいつものビジュアル変化がなにも起きず、開発していくのに都合のよろしくないことになったりします。
<a href="">こちら</a>へ
と書くとビジュアルはちゃんと変化しますが、リンク部分をクリックすると意図しないページへ遷移してしまってまた効率が悪かったり。
こんなとき、ジブンが良く使うのは次の2パターン。
<a href="#">こちら</a>へ
webデザイナーの人がよく使う手。リンク部分をクリックしてもページは遷移しません。
が、別のurlへアクセスすることになるので、クリックしたあとブラウザの「戻る」をするときは１回余計にクリックする必要アリ。
<a href="javasacsript:void(0);">こちら</a>へ
こうするとビジュアルもちゃんと変化して、クリックしてもなにも起きません。
| パーマリンク
このブログのフィード
