かなり質問文を読み返して、不足している情報や単語の誤用を置き換えてみると、下のようなことがやりたいのかなと思えてきましたが。
●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等を利用するべきですが、質問の内容、書き方から理解できないだろうと判断して、古い方法ばかりを選びましたが。
投稿日時 - 2010-03-20 11:45:14
お礼
やはりCSSを使った方がはやそうですね。今回、CSSで背景をいれ、写真の部分をさけて文字を入れ込みたかったので、記載したくない部分に<img src="img/spacer.gif">を入れ内容を記載しました。ただ、文字を避けたい部分がL型だったのでL型に透過が出来れば、簡単かと思い投稿しました。
皆さんの意見を聞く限りL型は出来ないように思いましたので、CSSでやろうかと思います。でも今回色々な方法があるなと関心しました。ありがとうございます。
投稿日時 - 2010-03-22 16:23:25
4人が「このQ&Aが役に立った」と投票しています
ベストアンサー以外の回答（2件中 1～2件目)
質問の意味がわからないのですが、
＞<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>
投稿日時 - 2010-03-20 10:08:37
お礼
ありがとうございます。イメージ的にはこんなかんじだったのですが、メモの内容を長くすると画像の上にいってしまうので、想像とは違いましたが、でも色々な方法があるなと感心しました。ありがとうございます。
投稿日時 - 2010-03-22 16:17:25
＞もしくはL型に透過画像を作成したいのですが、ご存知の方いますか。
「L型に透過画像を作成」というのがどういう意味なのかいまいちよく解りませんが、とにかくアルファチャンネル情報を持つ画像ファイルを作るのならば、フォトショップに代表されるような、いわゆる「フォトレタッチソフト」を使いましょう。フォトレタッチソフトがあなたの PC にインストールされてなかったとしても、ネットでさがせばフリーのソフトも結構あります。
ちなみに、質問の前半部分は意味が全く理解できませんでした（添付画像を見てもわからなかった…）
次からはもう少し解りやすい言葉（日本語とか）で質問してくれると助かります。
投稿日時 - 2010-03-20 02:15:50
補足
L型の透過画像をサイトで使用したいのですが、色枠があり中が透明なのは出来るのですが、すべてを透過したL型画像を作成したいと思っています。その為に10×10ピクセルを使用しタグを使い長方形にするのではなくL型に形が作れるようであれば、その方法のタグがいいのですが、不可能ならL型の透過画像でもいいということです。
投稿日時 - 2010-03-20 08:20:07
