カテゴリーアーカイブ: HTML

HTML：HTMLで並べた画像の余白を取り除く方法

Posted on by
返信

HTMLで画像を並べて表示しようとしたのですが、画像と画像の間に余白が入ってしまい、ぴったりくっつかないということがありました。

image_yohaku_1

その時のHTMLのソースコードは以下のように記述しています。

<img src="image_1.jpg" />
<img src="image_2.jpg" />

調べてみるとソースコード内で<img>タグを改行して記述していたり、半角のハイフンなどが入っていると画像の間に余白が入ってしまうようです。

なので、画像の間の余白を取り除く場合の解決策をメモします。

■ 並べた画像の余白を取り除く方法

ソース内で<img>タグの間に改行や空白を入れないで記述した場合、余白はできないので下記のように記述します。

<img src="image_1.jpg" /><img src="image_2.jpg" />

また、ソース内の記述を見やすくするために改行したり空白を入れたい場合があります。
その場合は画像に「float: left;」を指定し余白をなくします。

<img src="image_1.jpg" style="float: left;" />
<img src="image_2.jpg" style="float: left;" />

上記の方法を使用すると下記のように複数の画像がぴったりくっついて表示されます

image_yohaku_2

HTML：Googleマップを携帯サイトで表示する方法

Posted on by
返信

携帯（ガラケー）サイトでGoogleマップを表示した時の方法をメモします。

今まで携帯サイトで地図情報を表示する場合は、
地図画像を作成し表示するなどしていました。

Goolge Maps APIを使用すれば緯度・経度を指定し、
その他必要な情報を設定するだけでGoogleマップを出力してくれます。

■ Googleマップ画像　表示方法

下記のURLにアクセスすると、Googleマップ画像を出力してくれます。

http://maps.google.com/maps/api/staticmap?center=35.689487,139.691706&zoom=13&markers=35.689487,139.691706&size=200x200&sensor=false

表示したい情報（パラメーター情報）に書き換え、HTMLのimgタグで表示します。
HTMLに挿入するコードは以下のようになります。

<img src="http://maps.google.com/maps/api/staticmap?center=35.689487,139.691706&zoom=13&markers=35.689487,139.691706&size=200x200&sensor=false">
実際に出力したGoogleマップは下記のようになります。

■ パラメーターの説明

「center」
経度・緯度を指定します。

「zoom」
地図の拡大縮小サイズを指定します。

「markers」
マーカーの経度・緯度を指定します。
カラーやサイズなども指定可能です。

「size」
出力する画像サイズを指定します。

「sensor」
trueかfalseを指定します。
携帯サイトで表示する場合はfalseを指定します。

上記の方法でGoogleマップを携帯サイトで表示することができるので、
地図画像を作る必要がなくとても便利です。

HTML：WEBサイト内の文章・文字列をコピー禁止にする

Posted on by
返信

WEBサイトを作成する場合、ページの内容ごとに様々な文章を記載すると思います。
WEBサイト閲覧者はサイト内の文章を「右クリック→コピー」や「Ctrl+C」などで簡単にコピーすることができますが、サイト内で記載した独自の文章や文字列等をコピーされたくない場合があります。
今回はJavaScriptを使用して、HTMLに記載した文章・文字列等のコピーを禁止・不可にする対策方法をメモします。

コピー禁止したい文章や文字列を入れているタグに下記のコードを記載します。
記載したタグ内の文字をコピーすることができなくなります。

onCopy="return false;"

■ ページ全体をコピー禁止する場合

bodyタグに「onCopy=”return false;”」を追加します。

<body onCopy="return false;">コピー禁止</body>

■ 指定したタグをコピー禁止する場合

divタグ内の文字を禁止する場合、divタグに「onCopy=”return false;”」を追加します。

<div onCopy="return false;">コピー禁止</div>

■ コピー時にアラートを表示する場合

「onCopy」に「alert(‘出力文字列’);」を追加します。

<div onCopy="alert('コピー禁止'); return false;">コピー禁止</div>

しかし、上記の方法でコピー禁止にしても方法によってはコピーができてしまうので、あくまでも簡単にコピー禁止を対応した場合の処理です。

ちなみに右クリックを禁止したい場合は下記のコードを記載します。

 onContextmenu="return false;"

HTML：HTML5でIE8以下のバージョンに対応させる

Posted on by
返信

HTML5でページを作成するときにIEで表示が崩れてしまうことがあります。
IE8以下だとHTML5に対応していないので、正常に表示させる場合は下記のコードを記述する必要があります。
対応させるには「Google Code」で公開されている「html5shiv」スクリプトを使用します。

■ html5shiv

headタグ内に下記のコードを記述します。

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

※JavaScriptをオンにしている必要があります。
※上記のif文はIE9未満の場合という意味です。
※新要素のブロックにCSSを設定している場合はCSSの設定よりも先に指定しないとスタイルが反映されません。

上記の方法でも導入可能ですが、導入方法が変わったそうです。
html5shivダウンロードしたものをサーバにアップし読み込むようにします。
※Google Codeのリポジトリのhtml5shivがバージョンアップしているので、不具合が生じる場合あります。

html5shivのダウンロードページからzipファイルダウンロードし、指定の場所にhtml5shiv.jsをサーバにアップします。

ダウンロードフォルダ\dist\html5shiv.js

jsフォルダにアップした場合、下記のように設定します。

<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<![endif]-->

■ CSS

HTML5の新要素で、ブロックボックスとしてレンダリングさせる要素に「display: block」を指定します。

article, aside, figure, footer, header, hgroup, nav, section {
    display: block;
}

HTML：検索エンジンロボットの巡回を拒否する

Posted on by
返信

WEBサイトを作成していると管理画面など検索エンジンにクロールされないようにしたいページなどが存在します。
今回はhtmlのmetaタグで設定する方法とrobots.txtを使って制御する方法を記載します。

■ 検索ロボット（クローラー）

サーチエンジンの検索データベースを作成するために、世界中のWEBサイトの情報を自動的に回収するプログラムです。
GoogleやYahoo!などで検索した際に検索ロボットが収集した情報を出力しています。
クローラーがWEBサイトをクロール（巡回）することによって、より良い情報を検索結果に出力してくれます。

■ metaタグで設定する方法

HTMLのmetaタグに記述し、検索ロボットを制御します。
metaタグは設定したいページのheadタグ内に記述します。
NOINDEXなどの指定は大文字で設定します。

NOINDEX：検索エンジンにインデックスさせず、検索結果に表示させない。
NOFOLLOW：ページ内に存在するリンク先を巡回させない。

指定のページを検索エンジンに登録させない場合

<meta name="ROBOTS" content="NOINDEX">

ページ内のリンク先の巡回させない場合

<meta name="ROBOTS" content="NOFOLLOW">

両方を同時に設定する場合

<meta name="ROBOTS" content="NOINDEX,NOFOLLOW">

■ robots.txtで設定する方法

robots.txtを設置した場合、検索ロボットはrobots.txtにアクセスします。
robots.txtで巡回を拒否するように設定している場合はHTMLアクセスせずに帰っていきます。

【使用例】

User-Agent: *
Disallow: /

検索ロボットにWEBサイト全体を巡回させる場合

User-agent: *
Disallow:

※robots.txtを作成しない場合は、上記と同じ設定になります。

検索ロボットにWEBサイト全体を巡回させない場合

User-agent: *
Disallow: /

検索ロボットに特定のページへアクセスさせないようにする場合

User-agent: *
Disallow: /hoge/
Disallow: /hoge.html

検索ロボットを指定する場合（googleの検索ロボットを拒否）

User-agent: Googlebot
Disallow: /