dポイントプレゼントキャンペーン実施中！

css で box の四隅に文字をいれるにはどうすればよいでしょうか。

解決済

  • 質問者：t-okura
  • 質問日時：
  • 回答数：1件

css で box の四隅に文字をいれるにはどうすればよいでしょうか。

<div id="box">
<div id="lt">左上隅</div><div id="rt">右上隅</div>
<div id="lb">左下隅</div><div id="rb">右下隅</div>
</div>

#box { width:400px; height: 400px; }
#lt { ??? }
...

通報する

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

質問の本文を隠す

A 回答 (1件)

No.1ベストアンサー

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

たとえば、その４つが文書構造上リストとしいマークアップされているとして


★スタイルシートを理解しないブラウザや携帯電話は単純なリストとして表示。
★IE6以前は隣接セレクタを解釈できないので、classで設定するほうが良いでしょう。
★下記サンプルは、ソースを見やすくするため、タブを全角スペース２個で置換してあるので、元に戻してテストすること。

<!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">
　　<style type="text/css">
<!--
　　ul#menue{
　　　　display:block;
　　　　position:relative;
　　　　width:400px;
　　　　height:400px;
　　　　border: solid 1px red;
　　　　padding:0px;
　　　　margin-left:auto;
　　　　margin-right:auto;
　　　　background-color: rgb(200,200,200);
　　　　display:block;
　　}
　　ul#menue li{
　　　　display:block;
　　　　margin:0px;
　　　　padding:0px;
　　　　position:absolute;
　　　　width:400px;
　　　　top:0px;
　　　　left:0px;
　　　　text-align: left;
　　}
　　ul#menue li+li{
　　　　right:0px;
　　　　text-align: right;
　　}
　　ul#menue li+li+li{
　　　　top: auto;
　　　　bottom:0px;
　　　　left:0px;
　　　　text-align: left;
　　}
　　ul#menue li+li+li+li{
　　　　right:0px;
　　　　text-align: right;
　　}
　　-->
　　</style>
　　<link rel="START" href="../index.html">
</head>
<body>
　　<h1>サンプル</h1>
　　<ul id="menue">
　　　　<li>会社概要(左上)</li>
　　　　<li>製品案内(右上)</li>
　　　　<li>マニュアル(左下)</li>
　　　　<li>連絡先・・・ちょっと長い・・・(右下)</li>
　　</ul>
　　<ul>
　　　　<li>項目１</li>
　　　　<li>項目２</li>
　　　　<li>項目３</li>
　　　　<li>項目４</li>
　　</ul>
</body>
</html>
    • good
    • 0
    • 件
通報する
この回答へのお礼

うまくいきました。ありがとうございます。

position: absolute で left, right, top, bottom を
0 にすればよかったのですね。

通報する
お礼日時：2010/01/20 20:12

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

Q質問する（無料）

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

Q質問する（無料）

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

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

おすすめ情報