アプリ版：「スタンプのみでお礼する」機能のリリースについて

添付のような形で10×10ピクセルを使用しL型画像を透過で作りたいので

解決済

  • 質問者：adw_zion
  • 質問日時：
  • 回答数：3件

添付のような形で10×10ピクセルを使用しL型画像を透過で作りたいのですが
ご存知方いますか。<img src="img/spacer.gif">imgタグで使用したいと考えています。
もしくはL型に透過画像を作成したいのですが、ご存知の方いますか。

「添付のような形で10×10ピクセルを使用」の質問画像
通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (3件)

No.3ベストアンサー

  • 回答者： BellBell
  • 回答日時：

かなり質問文を読み返して、不足している情報や単語の誤用を置き換えてみると、下のようなことがやりたいのかなと思えてきましたが。



●1行目
　2行目

いちぎょうめ
　にぎょうめ

見出し記号を先頭に置いて、2行目以降は文字の先頭に揃えたいとか。
あるいは逆段落のような形で、文頭を目立させたいとか。

適当ですが、以下のようなものはどうでしょう？

<ol>
<li>1-1行目<br />1-2行目<br />1-3行目</li>
<li>2-1行目<br />2-2行目<br />2-3行目</li>
</ol>

<table>
<tr><td width="10px" align="right">●</td><td>1-1行目</td></tr>
<tr><td></td><td align="left">1-2行目</td></tr>
<tr><td></td><td align="left">1-3行目</td></tr>
<tr><td width="10px" align="right">●</td><td>2-1行目</td></tr>
<tr><td></td><td align="left">2-2行目</td></tr>
<tr><td></td><td align="left">2-3行目</td></tr>
</table>

もしくは10×10pxの透明GIFを用意しておいて
<img src="img/spacer.gif">●1-1行目<br />
<img src="img/spacer.gif"><img src="img/spacer.gif">1-2行目<br />
<img src="img/spacer.gif"><img src="img/spacer.gif">1-3行目<br />
<img src="img/spacer.gif">●2-1行目<br />
<img src="img/spacer.gif"><img src="img/spacer.gif">2-2行目<br />
<img src="img/spacer.gif"><img src="img/spacer.gif">2-3行目<br />

本当は、CSS等を利用するべきですが、質問の内容、書き方から理解できないだろうと判断して、古い方法ばかりを選びましたが。
    • good
    • 0
    • 件
通報する
この回答へのお礼

やはりCSSを使った方がはやそうですね。今回、CSSで背景をいれ、写真の部分をさけて文字を入れ込みたかったので、記載したくない部分に<img src="img/spacer.gif">を入れ内容を記載しました。ただ、文字を避けたい部分がL型だったのでL型に透過が出来れば、簡単かと思い投稿しました。
皆さんの意見を聞く限りL型は出来ないように思いましたので、CSSでやろうかと思います。でも今回色々な方法があるなと関心しました。ありがとうございます。

通報する
お礼日時：2010/03/22 16:23

No.2

  • 回答者： ORUKA1951
  • 回答日時：

質問の意味がわからないのですが、


＞<img src="img/spacer.gif">
そもそも、画像でそのような配置をすること自体、HTML的には不可、非推奨です。
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
余白制御のために画像を用いる。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Style Sheets in HTML documents (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )］より

単純に下記の様な事をしたいのでは？
<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. … )
★W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_ … )
で検証済み
<!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>
「添付のような形で10×10ピクセルを使用」の回答画像2
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございます。イメージ的にはこんなかんじだったのですが、メモの内容を長くすると画像の上にいってしまうので、想像とは違いましたが、でも色々な方法があるなと感心しました。ありがとうございます。

通報する
お礼日時：2010/03/22 16:17

No.1

  • 回答者： hujitomo
  • 回答日時：

＞もしくはL型に透過画像を作成したいのですが、ご存知の方いますか。



「L型に透過画像を作成」というのがどういう意味なのかいまいちよく解りませんが、とにかくアルファチャンネル情報を持つ画像ファイルを作るのならば、フォトショップに代表されるような、いわゆる「フォトレタッチソフト」を使いましょう。フォトレタッチソフトがあなたの PC にインストールされてなかったとしても、ネットでさがせばフリーのソフトも結構あります。

ちなみに、質問の前半部分は意味が全く理解できませんでした（添付画像を見てもわからなかった…）
次からはもう少し解りやすい言葉（日本語とか）で質問してくれると助かります。

この回答への補足

L型の透過画像をサイトで使用したいのですが、色枠があり中が透明なのは出来るのですが、すべてを透過したL型画像を作成したいと思っています。その為に10×10ピクセルを使用しタグを使い長方形にするのではなくL型に形が作れるようであれば、その方法のタグがいいのですが、不可能ならL型の透過画像でもいいということです。

補足日時：2010/03/20 08:20
通報する
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

関連するカテゴリからQ&Aを探す

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報