LogoMark.png

HTML/Tips のバックアップ(No.1)


HTML/Tips

HTMLHTML/TagsHTML/SampleHTML/Tips



Googleの検索フォームを設置したい

for属性を使います。for属性はフォームパーツと要素を関連付けるために用いられる属性で、主に label 要素に用いられます。

以下の例では、label要素に for属性をつけることで、同じ内容のid属性を持つ要素と関連付けています。そのままコピペするだけで、あなたのページにGoogle検索ボタンをつけることができます。

<form action="http://www.google.com/search" method="get">
  <label for="key">Google: </label>
  <input id="key" type="search" name="q">
  <input type="submit">
</form>


SNSのシェアボタンを設置したい

以下のように、aタグで簡単に設置できます。Twitter などのリンク文字部分を imgタグで画像に変更するなど、ボタンの仕様も簡単に変更可能です。


画像の部分領域にリンクを設定するには

地図画像等で、地図上の特定の範囲にリンクを設定したい場合、map タグと area タグを使うことで、HTMLのみで実装可能です。

ページ内に別ページを埋め込んでメニューで切り替えたい

iframe でコンテンツを受け入れるエリアを作っておいて、リンクのターゲットでその場所を指定することで実現可能です。

きれいなフォントで表示させたい

Webで表示される文字は、基本的には閲覧者のPC環境に依存します。Macで作っているときはきれいに見えても、Windowsで見ると残念な状態になる…というのは、閲覧環境のフォントが異なるからです。特にユーザーがブラウザの設定で、テキストデータの表示に使うフォントをマニュアルで指定している場合は、作り手の意図は反映されない・・というのがふつうです。

作り手の意図通りの見た目で表示させるひとつの方法としては、WebFontsを使う・・という発想があります。ただし、日本語の場合、漢字・ひらがな・カタカナ・英数と多くの文字種を含むので、フォントデータ自体が重く(1MBを超える)、閲覧者に通信上の負担をかけてしまうという問題があります。アルファベットのみのWebフォントを使って、メニューや見出し部分のみ英文表記・・などとすれば、見た目はそれなりにきれいで、しかも軽い・・というものが実現できるでしょう。Webフォントの使い方については、以下のページにまとめていますので、ご覧下さい。

また、以前からある簡単・確実な手段として、文字を「画像」としてつくる(つまり、xxx.gif などとしてつくる)…という方法があります。ただし、変更の度に画像を作り直すという手間がかかることや、サーチエンジンでは画像上の文字は拾ってもらえないという問題もあり、自身で管理運営するサイトの場合はあまりお勧めできません。
 Web制作会社にとっては、このボタン画像制作は課金項目でもあり、現在でもビジュアル重視のサイトでは、よく見かけます。



メニュー(ナビ)を別ファイルにできないか?

この要望の発生率は下がってきました。そろそろ不要かと・・

かつては、frameタグを使ってメニューとコンテンツを分離する方法もありましたが、ナビの無い正体不明のページが検索でかかってしまうなど、様々な理由で非推奨となり、実際HTML5ではframeタグは削除されました。

しかし、全ページに同じメニュー部分を記述するのはどうも…
メニューだけ能率的に分離する方法はないのか? という方は…

SSIのサンプル fileSSI_Sample.zip
・当然ですが、サーバーにアップしないと動作確認はできません。
・また、アップ先のサーバが SSI に対応している必要があります。
・メインのファイルの拡張子は「shtml」とする必要があります。
 > index.shtml

I.E.で見るとHTML5のレイアウトが崩れる

この問題の発生率は下がってきました。そろそろ不要かと・・

独自路線色の強かった少し前のI.E.(InternetExplorer)ではHTML5への対応も不完全で、他の標準ブラウザのような動作が期待できません。Googleからそれを解消するスクリプトが提供されていますので、お試し下さい。