トップ > インターネット > ホームページ作成・素材 > HTMLの基礎−タグを覚えてウェブページを作ろう!−

ホームページはHTMLタグの知識とテキストエディタさえあれば作成できます。またタグを理解していればサイトの細かい部分まで手が届きます。でも、わからない・・そんな方にお送りする初心者向けのHTMLタグ講座「HTMLの基礎」。

RSS


メルマガの登録・解除

登録した方には、メルマ!からオフィシャルメルマガ(無料)をお届けします。



HTMLの基礎 Vol.60 FAQ「画像に透かしを入れたい」

発行日:8/19

*――*――*――*――*――*――*――*――*――*――*――*――*――*――*

    HTMLの基礎 −タグを覚えてウェブページを作ろう!−

      2005/08/19(Fri) Vol.60       執筆:ykr
              http://ykr.main.jp/html/index.html

*――*――*――*――*――*――*――*――*――*――*――*――*――*――*

   ◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆   

    1.HTML・スタイルシートに関するFAQ

      「画像に透かしを入れたい」

   ◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆   


  前回募集した質問のお便りを何通か頂きました。どうもありがとうござ
  います。(時間がなく余りきちんとした返事を返す事ができていないの
  ですが・・申し訳ありません)

  で、以前より多かった「画像に透かしを入れるにはどうすればよいのか」
  という質問について、解説しようと思います。
  これを実現するにはスタイルシート(CSS)を使用します。

  それでは今回も最後までどうぞ宜しくお付き合いお願い致します。


  ※注意  HTMLのバージョンは4.01です。
       発刊時点で非推奨とされてるものも掲載しています。
       表示確認しているブラウザは、WinIE6、WinNN7、MacIE5.2
       MacNN7です。その他のブラウザでの表示は未確認ですので
       意図したとおりにならないことがあります。

       ここで言う「スタイルシート」とはCSS(カスケーディン
       グスタイルシート)の事を指しています。


━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━


1.画像に透かしの効果をつける


  通常の画像に透かしの効果をつけるには、スタイルシート(CSS)
  のフィルタという機能を使います。


  ▼フィルタとは?

  フィルタとは、IEが独自に拡張した機能のことで、フィルタを使用する
  ことにより、様々な効果を画像テキストなどに設定する事ができます。
  ただ、ブラウザなどによっては意図したとおりに表示できなかったり、プ
  ロパティの属性の設定方法なども異なったりするので、注意が必要です。

  難しそうに聞こえますが、基本的に他のCSSと同じように属性やその値
  を指定するだけで、対象とするものに視覚的な効果を設定する事ができま
  す。ただ、言葉だけではわかりづらいので、実際にソースを記述してみる
  事にします。

  ここでは個別のタグに設定する方法を説明します。
  (見やすくする為に最小限のタグだけで記述しています。通常は、記述し
  た方が良いものや必須のタグはきちんと記述しましょう。またタグは途中
  で改行させないようにして下さい。)

  このHTML文書の名前は「filter01.html」とします。
  このファイルは以下のURLから閲覧する事が可能です。
  (IEの機能です。他のブラウザをご利用の方には意図したとおりに見え
  ない可能性が高いです)

  http://ykr.main.jp/html/f/filter01.html


━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━


<html>
<head>
<title>フィルタの例(半透明のフィルタをかける)</title>
</head>

<body>
<h1>画像に半透明のフィルタをかける</h1>
<hr>
<h2>フィルタ適用時</h2>
<div style="width:300px;filter:alpha(opacity=0,finishopacity=100,style=1,startx=0,starty=0,finishx=300,finishy=300,enabled=true)">
<img src="filter-samp.jpg">
</div>
<hr>
<h2>フィルタなし</h2>
<div style="width:300px">
<img src="filter-samp.jpg">
</div>

</body>
</html>


━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━


  さて、記述できたらファイルを保存します。
  前回のファイルに追加したという方は、上書き保存か名前をつけて、新
  しく保存して下さい。拡張子は「.html」です。


----------------------------------------------------------------------


 ■<div style="width:300px;filter:alpha(opacity=0,finishopacity=100,style=1,startx=0,starty=0,finishx=300,finishy=300,enabled=true)">
  <img src="filter-samp.jpg">
  </div>


  上記の<div>内のスタイル属性にフィルタを設定しています。
  設定したフィルタの効果は、<div>内部に表示する画像「filter-samp.jpg」
  に適用されます。

  ではフィルタの部分だけ抜き出してみてみることにします。


  ▼filter:alpha(opacity=0,finishopacity=100,style=1,startx=0,starty=0,finishx=300,finishy=300,enabled=true)


  上記の filter:〜 はフィルタを使用するときに書かなくてはならない
  ものです。その後に続く


  ▼alpha(opacity=0,finishopacity=100,style=1,startx=0,starty=0,finishx=300,finishy=300,enabled=true)


  の部分が半透明の効果をつけるフィルタです。さらに詳しく見てみましょう。


  ▼alpha(xxx)


  alpha(xxx) の、xxx 部分にフィルタの効果を調節する様々な属性を
  指定します。それぞれの属性は「,(カンマ)」で区切って下さい。
  属性を以下にあげています。


  ▼opacity  スタート地点の不透明度(0〜100)
    
  ▼finishopacity  終了地点の不透明度(0〜100)
  
  ▼style   フィルタの種類(0〜3)
  
      1 扇状に半透明処理
      2 放射線状に半透明処理
      3 長方形に半透明処理
  
  ▼startx  スタート地点のX座標
  
  ▼starty  スタート地点のY座標
  
  ▼finishx  終了地点のX座標
  
  ▼finishy  終了地点のY座標
  
  ▼enabled  フィルタを実行するかどうか(true、false、又は1、0) 


  となります。この値を変更する事により、サンプルで示している以外の
  表現も可能となります。なお、<div>タグのフィルタの前に記述してある

  <div style="width:300px;filter:alpha(opacity=0,finishopacity=100,style=1,startx=0,starty=0,finishx=300,finishy=300,enabled=true)">
  <img src="filter-samp.jpg">
  </div>

  ですが、width:300px(横幅300ピクセル)を指定してあります。
  <div>や<span>にフィルタを指定する場合、サイズを指定しておかなけれ
  ばフィルタは適用されません。
  
  フィルタによって他にも様々な事を表現する事が可能ですが、必ずしも
  閲覧する人全てに同じように見えるものではない、という事に注意して
  使用するようにして下さい。


  又来週もFAQを募集します。掲載できるかはわかりませんが(返信も
  できない可能性が高いです。)わからない事・疑問等があれば、一番下
  のメールアドレス、又はホームページに設置してあるメールフォームか
  ら送って下さい。(できればメールマガジン宛、と題名などに記述して
  いただければ助かります。)

  よろしくお願い致します。


━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━


来週は・・・

   ◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆   

    1.FAQ

   ◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆   

(予告なく変更する事があります)


■ 雑記 ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■


  今回も最後まで付き合ってくださった方、お疲れ様でした。

  やりたい事が山ほどあります。が、実行できる時間がないのでもどかし
  い思いをしているのですが、思いついた事は少しすると、その時の思い
  が色褪せるのか、余りそのアイデアに魅力を感じなくなっていたりしま
  す。

  そういうわけで、最近は些細な事でもメモにとっておく事にしました。
  結構便利です。後から見ると何をしたかったのかが明確にわかります。
  実現できるかわからない事も沢山ありますが、もう少し自分のしたい事
  に時間を当てられるよう、なんとかしなければ・・と思っています。

  先程も書きましたが、また来週のメールマガジンでは質問を募集します。
  掲載できるかはわかりませんが(返信もできない可能性が高いです。)
  わからない事・疑問等があれば、この下のメールアドレス、又はホーム
  ページに設置してあるメールフォームから送って下さい。(できればメ
  ールマガジン宛、と題名などに記述していただければ助かります。)


  というわけで、次回のメルマガもどうぞ宜しくお願いいたします。


━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

■■■「HTMLの基礎」姉妹サイトです。よろしくお願いします。■■■■

■■■「全部まるごとスタイルシート」
■   http://ykr414.com/css/
■   スタイルシート辞典です。プロパティごと、または目的ごとに引
■   け、ブラウザの対応状況なども掲載しています。
■   HTMLに加える事で、より細かいレイアウトの指定が可能に。
■   コピーペーストするだけで利用できるテンプレートのページも。

■■■「コマンドプロンプトを使ってみよう!」
■   http://ykr414.com/dos/
■   コマンドプロンプトとは何かから始まり、バッチファイルの作成
■   法や、コマンド別・目的別に引けるコマンド辞典。
■   初心者でもわかるよう細かく説明。

■■■「伸び縮みマークアップ言語 XML」
■   http://ykr414.com/xml/
■   SGMLのサブセットであるXMLは、ネット上で扱うデータを
■   記述するためのデータフォーマットで、柔軟性のある言語構造を
■   持っており、プログラムで自在にデータを情報処理できます。そ
■   のXMLを実際に文書を作成しながら解説。随時追加更新。

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■


・MAKERS     http://ykr414.net/
         ダイエットグッズ、美味しいもの、かわいいもの
         セレクトショップ。ちょっと珍しいグッズ・便利な
         サービスなどの情報も掲載。
         コラムなどのコンテンツもあります。

・YKR GALLERY   http://ykr414.com/gallery/
         CG、また実際に描いた絵を紹介するギャラリー。
         趣味で運営の為かなり更新が遅め。
         ・・・というか時間がなくて全く更新してません(汗)


*――*――*――*――*――*――*――*――*――*――*――*――*――*――*
  Auther    YKR
  Mail     ykr414@yahoo.co.jp
  URL      http://ykr.main.jp/html/index.html
         http://ykr414.com/
  Copyright   (C)2004 ykr414. All rights reserved.
  Attention   掲載記事の無断転載を禁じます
*――*――*――*――*――*――*――*――*――*――*――*――*――*――*

最新の記事

ブックマークに登録する

TwitterでつぶやくLismeトピックスに追加するdel.icio.usに追加Buzzurlにブックマークニフティクリップに追加Yahoo!ブックマークに登録記事をEvernoteへクリップ
My Yahoo!に追加Add to Google

規約に同意してこのメルマガに登録/解除する

登録した方には、メルマ!からオフィシャルメルマガ(無料)をお届けします。


この記事へのコメント

コメントを書く


上の画像で表示されている文字を半角英数で入力してください。

※コメントの内容はこのページに公開されます。発行者さんだけが閲覧できるものではありません。
コメントの投稿時は投稿者規約への同意が必要です。

  1. コメントはありません。

このメルマガもおすすめ

  1. @(あっと)驚く!エクセル好きルアップ  

    最終発行日:
    2011/05/26
    読者数:
    4069人

    エクセル(Excel)の基礎から裏ワザまで... D-UP発行のマガジンは、1問1答の形式、詳細な解説付きで配信。さらに連動した懸賞サービスもあり、スキルとプレゼントを同時にゲット。映画情報もあるよ

  2. これ知ってます?Wordの小ワザ&便利ワザ

    最終発行日:
    2011/05/26
    読者数:
    4682人

    D-UPが送る、ほほー!っと納得ワード(Word)の小ワザ&便利ワザをクイズ形式で楽しく学んでいきます。知ってて損することはありません。あなたの文章にアクセントをつけてみませんか?懸賞のチャンスもWでお得。

  3. 全部フリーソフト!!

    最終発行日:
    2014/02/26
    読者数:
    4887人

    ネット上にはこんなに便利なソフトがいっぱい。仕事にも、遊びにも、あると絶対にお得で楽しいソフトを1つずつご紹介します。

  4. 高橋浩子の日本一“お気楽”なパソコンマガジン

    最終発行日:
    2017/02/25
    読者数:
    1131人

    「クスッと笑えてタメになる」をモットーとするテクニカルライター高橋浩子が魂を込めてお届けする週刊メルマガ。パソコン講座を中心に、便利ネタやおすすめサイトもご紹介。とにもかくにも、“お気楽”に楽しめる異色のエンターテイメントマガジンである。

  5. C#プログラミングレッスン

    最終発行日:
    2017/02/26
    読者数:
    971人

    C#での .NETプログラミングを易しく丁寧に解説するメールマガジンです。「C#プログラミング・レッスン」で、.NETプログラミングをマスターしましょう。

発行者プロフィール

過去の発行記事