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

Posted on 2013年5月17日 by raining

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

その時の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;" />

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

Vimeo：動画をサイト内に埋め込む方法

Posted on 2013年4月20日 by raining

返信

Vimeoにアップロードされた動画をサイト内に埋め込む方法をメモします。

基本的にはYouTubeと同じように埋め込みコードを取得し、
HTMLにコピーしたコードを貼り付けて設置します。

■ Vimeoの動画をサイトに埋め込む

埋め込みたい動画にある「SHARE」をクリックします。

クリック後、下記のような画面が表示されるので、
「Embed」のコードをコピーします。

コピーした埋め込みコードをHTMLに貼り付けると
サイト内にVimeoの動画を埋め込むことができます。

埋め込む動画のサイズなどを設定する場合は
「+ Show options」リンクをクリックします。

サイト内に埋め込む動画のカスタマイズをすることができます。

また、WordPressにVimeoの動画を埋め込みたい場合は、
埋め込みコードを書かなくても動画ページのURLをそのまま
記述するだけでサイト内に動画を埋め込むことができます。

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

Posted on 2013年3月7日 by raining

返信

携帯（ガラケー）サイトで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 2013年2月18日 by raining

返信

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;"

CSS：CSSでボックス内の英語文字列等を折り返しさせる

Posted on 2013年2月13日 by raining

HTMLの「table」タグや「div」タグなど、ボックス内で長い英語文字列やURL等を入れるとボックスからはみ出して表示されることがあります。
ボックスに指定した幅で文字列を折り返しさせるために、CSSを使用し英語等の文字列をボックス内で改行させます。
CSSは「word-break」、「word-wrap」を使用し、文字列の改行の仕方を指定します。

■ 「table」タグの場合

「table」タグでは「word-wrap: break-word;」を使用するとボックス幅が伸びてしまうので、「word-break: break-all;」を使用して折り返しさせます。

【CSS】

table {
    width: 300px;
}
table th {
    border: 1px solid #CCC;
    width: 50px;
}
table td {
    border: 1px solid #CCC;
    word-break: break-all;
}

【HTML】

<table>
    <th>URL</th>
    <td>http://raining.bear-life.com/test/aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
</table>

■ 「div」タグの場合

「div」タグでは「word-wrap: break-word;」と「word-break: break-all;」でどちらでも折り返しされますが、「word-wrap: break-word;」の方が単語の途中で折り返しするので「word-wrap: break-word;」を使用します。