- ベストアンサー
リンク文字を好きな位置に表示したい
お忙しいところすいません。 ホームページ（トップページ）上において、リンク文字を好きな位置に表示したいのですがどのようにしたらうまく表示できますか？。 現在、以下のように記述していますが、これだと改行して表示するだけなので、ランダム配置させたいと思っています。 これは可能でしょうか？。 また、そのようなサンプルサイトがあれば教えていただきますでしょうか？。 よろしくお願いいたします。 ＜html記述＞ <div id="menu"> <a href="test1.html" title="トップ" class="moji1">トップ</a> <a href="test2.html" title="テスト" class="moji2">テスト</a> </div> ＜css記述＞ .moji1{ margin : 100px 10px 50px 60px; font-family : Arial,'ＭＳ Ｐゴシック',sans-serif; font-weight : bold; font-size : 48px; } .moji2{ margin : 50px 10px 80px 260px; font-family : Arial,'ＭＳ Ｐゴシック,sans-serif; font-weight : bold; font-size : 48px; }
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
質問内容が理解しづらいのですが、例です。 .moji1{ position : absolute; top : 100px; left : 100px font-family : Arial,'ＭＳ Ｐゴシック',sans-serif; font-weight : bold; font-size : 48px; } "top"・"left"をいじると、ページ上の好きな場所に配置できます。 的外れの回答だったら、すみません。
その他の回答 (1)
- auty
- ベストアンサー率58% (284/486)
・ 更新ボタンを押すと、メニューの左上端が (50,50) - (300,250) px の範囲を移動します。 以下のコードを参考にしてみてください。 ------------------------------------------------------------ <html> <head> <title>Webサイト</title> <style type="text/css"> <!-- #menu { position: absolute; top: 250px; left: 100px; background-color: #f0cc88; } .moji1 { position: relative; font-family: Arial, 'ＭＳ Ｐゴシック', sans-serif; font-weight: bold; font-size: 48px; } .moji2 { position: relative; margin: 50px 10px 80px 60px; font-family: Arial, 'ＭＳ Ｐゴシック', sans-serif; font-weight: bold; font-size: 48px; } --> </style> <script type="text/javascript"> var x0=50;y0=50; var x2=300,y2=250; window.onload = setLocation; function setLocation() { m1=document.getElementById("menu"); m1.style.left = ( x0 + Math.random() * (x2-x0) ) + "px"; m1.style.top = ( y0 + Math.random() * (y2-y0) ) + "px"; } </script> </head> <body> <div id="menu"> <a href="test1.html" title="トップ" class="moji1">トップ</a> <a href="test2.html" title="テスト" class="moji2">テスト</a> </div> abcabcabcabcabcabcabcabcabcabcabcabcabc </body> </html>
お礼
javaを使った例でもできるのですね。 感動です、私の考えどおりです。 auty様、質問後でのすばやい対応感謝いたします。 ありがとうございました、本当に感謝いたします！！！。
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/spn/images/related_qa/c205_1_thumbnail_img_sm.png)
お礼
確認させていただきました。。 そうです、この内容です！。 ちょっと個人的に説明足りなかったかと思いましたが、最善の回答をいただきました。 kura07様、感謝します！、ありがとうございました。