ホームページ作成/Webサイトのユーザビリティ

コピーさせたい文字列をコピーしやすくする(3ページ目)

閲覧者に何らかの長い文字列をコピーさせたい場合、文字列をそのまま掲載するよりも、もっとコピーしやすい形で掲載してみましょう。閲覧者に操作させずに自動で範囲選択させれば、過不足無くコピーさせられます。

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

フォームを装飾する

スタイルシートを活用することで、横幅を細かく調整したり、文字色や文字サイズなどを自由に指定できます。

■横幅:

<input type="text" size="15" value="文字列" onfocus="this.select();" style="width: 200px;">

上記は、widthプロパティの値に「200px」を指定しているので、以下のように横幅が200ピクセルになります。

■文字サイズ:

<input type="text" size="15" value="文字列" onfocus="this.select();" style="width: 200px; font-size: 150%;">

上記は、font-sizeプロパティの値に「150%」を指定しているので、1.5倍の大きさで表示されます。

■文字色:

<input type="text" size="15" value="文字列" onfocus="this.select();" style="width: 200px; font-size: 150%; color: red;">

上記は、colorプロパティの値に「red」を指定しているので、赤色で表示されます。

補足

今回ご紹介した方法は、コピーさせたい文字列がものすごく長くなる場合でも、短いスペースに収められるメリットもあります。 ただし、表示スペースよりも文字列の方が長い場合は、印刷すると文字列の一部分(実際に見えている範囲)しか印刷されないデメリットもあります。

PC上でコピーすることだけが目的の文字列にのみ利用するか、もしくは文字列全体が確実に見えるほど横幅を広くするなどして使う方が良いでしょう。

おわりに

今回は、ページの閲覧者に何らかの長い文字列をコピーさせたい場合に便利なフォームの使い方をご紹介いたしました。 何かコピーさせたい文字列がある場合には、お試し下さい。

【関連記事】

【編集部おすすめの購入サイト】
楽天市場でホームページ作成関連の書籍を見るAmazon でホームページ作成の参考書を見る
  • 前のページへ
  • 1
  • 2
  • 3
※記事内容は執筆時点のものです。最新の内容をご確認ください。
※OSやアプリ、ソフトのバージョンによっては画面表示、操作方法が異なる可能性があります。

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

    All About公式SNS
    日々の生活や仕事を楽しむための情報を毎日お届けします。
    公式SNS一覧
    © All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます