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

バックアップ一覧
差分を表示
現在との差分を表示
ソースを表示
HTML/Tips へ行く。
- 1 (2021-09-25 (土) 11:14:36)

HTML/Tips

Googleの検索フォームを設置したい
SNSのシェアボタンを設置したい
画像の部分領域にリンクを設定するには
ページ内に別ページを埋め込んでメニューで切り替えたい
きれいなフォントで表示させたい
メニュー(ナビ)を別ファイルにできないか？
I.E.で見るとHTML5のレイアウトが崩れる

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タグで画像に変更するなど、ボタンの仕様も簡単に変更可能です。

Twitter

<a href="http://twitter.com/share?url=http://（ページのURL ）">Twitter</a>

Facebook

<a href="https://www.facebook.com/sharer/sharer.php?u=http://（ページのURL ）">Facebook</a>

LINE

<a href="https://social-plugins.line.me/lineit/share?http://（ページのURL ）">LINE</a>

参考：ブランドロゴのダウンロード
- Twitter：https://about.twitter.com/ja/company/brand-resources.html
- Facebook：https://ja.facebookbrand.com/
- LINE：https://line.me/ja/logo

↑

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

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

HTML

<img src="map.gif" usemap="#sample">
<map name="sample">
  <area shape="rect" coords="20,10,120,80" href="01.html">
  <area shape="circle" coords="200,100,40" href="02.html">
  <area shape="poly" coords="400,100,500,100,500,200,400,100" href="03.html" >
  <area shape="default" href="00.html">
</map>

要点は以下のとおり

地図画像を置く img タグに usemap="#[任意の名前]"を定義
map タグでそれを特定した上で、各 area を地図画像内の座標で指定
area タグの href でリンク先を定義できます

shapeの意味は以下のとおり

shape = "rect"：矩形　x1, y1, x2, y2　※左上と右下
shape = "circle"：円　cx, cy, r　※中心と半径
shape = "poly"：多角形　x1, y1, x2, y2, x3, y3, ・・・

↑

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

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

a タグ（呼び出し側）に target = "infoWindow" を記載
iframe タグ（受け入れ場所）に name = "infoWindow" を明記
DEMO：https://koichi-inoue.github.io/iframe/

index.html
https://github.com/koichi-inoue/iframe/blob/master/index.html

読み込まれる html
https://github.com/koichi-inoue/iframe/blob/master/info01.html

↑

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

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

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

WebFonts

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

↑

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

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

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

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

SSIを使う
SSI は「Server Side Include」の略で、HTMLファイルの中に特殊な記述を行うことで、サーバ側でインクルード処理（コードを挿入）をしてもらうという発想です。
```
 
```
上の記述例では、サーバー側でコメント部分をnav.htmlに置き換えて配信します。

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

PHPを使う
PHPはサーバー内で動作して、HTMLを吐くプログラムです。これを使えば、HTMLをサーバー側で動的に変更することができるので、あらゆる操作が可能になります。
・PHP

↑

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

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

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

html5shivの導入
IE8以前のブラウザにHTML5のタグを認識させるためのライブラリです。
Download > http://code.google.com/p/html5shiv/
- 1) ダウンロード・解凍して html5shiv.js を見つけて下さい。
- 2) ファイルを適当な場所に置いて下さい
  　（ここではドキュメントルートにjsフォルダを作って置きます）。
- 3) HTMLの<head>内に以下のコードを記述して下さい。
```

```
  HTMLの記述としては、単なる注釈扱いになりますが、IEのみが以下のように解釈します。
  「もしもIEのバージョンがv9未満だったならば、スクリプトを読み込め」という意味です。

IE9.jsの導入
IE6,7,8 を ie9 に近づけるためのライブラリをリンク導入します。
以下のソースコードをHTML内に書くだけです。
```

```
この情報のオリジナルは以下にあります。最新の情報を使って下さい。
http://code.google.com/p/ie7-js/

以下、比較してみて下さい
- 普通にHTML5で作ったもの
- 上2つを実装したもの
  当然ですが、IE8以前のブラウザでないとこの2つの違いは確認できません。