- ベストアンサー
添付のような形で10×10ピクセルを使用しL型画像を透過で作りたいので
添付のような形で10×10ピクセルを使用しL型画像を透過で作りたいのですが ご存知方いますか。<img src="img/spacer.gif">imgタグで使用したいと考えています。 もしくはL型に透過画像を作成したいのですが、ご存知の方いますか。
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (2)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
質問の意味がわからないのですが、 ＞<img src="img/spacer.gif"> そもそも、画像でそのような配置をすること自体、HTML的には不可、非推奨です。 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから 余白制御のために画像を用いる。 ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Style Sheets in HTML documents (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 )］より 単純に下記の様な事をしたいのでは？ <body> <div> <h1>サンプル</h1> <p>ブラウザの横幅を変更しても、内容が左右真中に表示されています</p> <div> <p class="test">こんな感じです。幅60％、ウィンドウ幅によって最小500px、最大800px内で変化する。</p> <div id="memo"> <h2>メモ</h2> <p> ここに書いた記事は右上に表示される。 </p> </div> </html> 以下HTML全文 ★Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html ) ★W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input ) で検証済み <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> <title>サンプル</title> <meta http-equiv="Content-Style-Type" content="text/css"> <link rev="made" href="mailto:hoge@hoge.com" title="send a mail" > <link rel="START" href="../index.html"> <style type="text/css"> <!-- html,body{ margin:0px;padding:0px;background-color:rgb(200,200,200); } body>div{ width:60%;min-width:500px;max-width:800px;margin-left:auto; margin-right:auto;background-color:white;padding:10px; border:none;position:relative; background-image:url() /* 背景画像のURLを()内に */ } p{text-indent:1em;margin:0.5em 1em;} body>div>p{padding-right:120px;} #memo{font-size:0.8em;position:absolute; right:0px;top:0px;width:20%;min-width:100px; border-color:gray; /* 枠線の色 */ border-width:0px 0px 10px 10px; /* 幅 上,右,下,左 */ border-style:solid; /* 枠線のスタイル outset,insetとか */ } body>div>p + p{padding-right:1em;} #memo h2{ margin:0.2em; } --> </style> </head> <body> <div> <h1>サンプル</h1> <p>ブラウザの横幅を変更しても、内容が左右真中に表示されています</p> <p class="test">こんな感じです。幅60％、ウィンドウ幅によって最小500px、最大800px内で変化する。</p> <div id="memo"> <h2>メモ</h2> <p> ここに書いた記事は右上に表示される。 </p> </div> </div> </body> </html>
お礼
ありがとうございます。イメージ的にはこんなかんじだったのですが、メモの内容を長くすると画像の上にいってしまうので、想像とは違いましたが、でも色々な方法があるなと感心しました。ありがとうございます。
- 藤田 朋郎（@hujitomo）
- ベストアンサー率54% (39/71)
＞もしくはL型に透過画像を作成したいのですが、ご存知の方いますか。 「L型に透過画像を作成」というのがどういう意味なのかいまいちよく解りませんが、とにかくアルファチャンネル情報を持つ画像ファイルを作るのならば、フォトショップに代表されるような、いわゆる「フォトレタッチソフト」を使いましょう。フォトレタッチソフトがあなたの PC にインストールされてなかったとしても、ネットでさがせばフリーのソフトも結構あります。 ちなみに、質問の前半部分は意味が全く理解できませんでした（添付画像を見てもわからなかった…） 次からはもう少し解りやすい言葉（日本語とか）で質問してくれると助かります。
補足
L型の透過画像をサイトで使用したいのですが、色枠があり中が透明なのは出来るのですが、すべてを透過したL型画像を作成したいと思っています。その為に10×10ピクセルを使用しタグを使い長方形にするのではなくL型に形が作れるようであれば、その方法のタグがいいのですが、不可能ならL型の透過画像でもいいということです。
お礼
やはりCSSを使った方がはやそうですね。今回、CSSで背景をいれ、写真の部分をさけて文字を入れ込みたかったので、記載したくない部分に<img src="img/spacer.gif">を入れ内容を記載しました。ただ、文字を避けたい部分がL型だったのでL型に透過が出来れば、簡単かと思い投稿しました。 皆さんの意見を聞く限りL型は出来ないように思いましたので、CSSでやろうかと思います。でも今回色々な方法があるなと関心しました。ありがとうございます。