四角い角が丸い枠線内にコンテンツが入れる正しい方法

質問

角が丸く四角い枠線を作り、
その中に画像やコメントを入れたいと思っています。
イメージ的には添付ファイルのような感じです。

プログラムでその枠線を作れるなら背景画像を使わずに
画像とコメントをそれぞれhtmlに入力したいと思いましたが、
その方法はありますか？

自分がやった方法は、
画像とコメントの全てを枠線で囲い方が分からなかったので、
枠線と枠線の中に入れる画像をまとめた画像を1枚作り、
それを背景画像として表示させました。
コメントだけをhtmlに入力し、marginで位置を設定しました。
しかし、ページの下側に5000px以上の余白ができてしまいます。

背景画像を設定したときに、
コメントの配置位置をmarginで設定するのは間違いでしょうか。

回答No.3

tracer · ベストアンサー

私ならこう書きます。
あらかじめ、htmlのコメント部の要素ははpタグにし、imgタグにもidをつけてcssファイルで指定します。
なお、css内のインデント(タブ)は、便宜的に全角スペースにしているので、そのままコピペして使うなら、タブなどに置き換えてください。
文法などの詳細はGoogleなどでじっくり調べてみてください。

～　CSS　～

/********************
角丸にするボックス
*********************/
div#sample{
　/* Safari,Chrome */
　-webkit-border-bottom-right-radius: 20px;
　-webkit-border-bottom-left-radius: 20px;
　/* Firefox */
　-moz-border-radius-bottomright: 20px;
　-moz-border-radius-bottomleft: 20px;
　/* CSS3*/
　border-bottom-right-radius: 20px;
　border-bottom-left-radius: 20px;
}

　/********************
　コメント部
　*********************/
　div#sample p{
　　margin:0 0 0 0;
　　padding:0 0 0 0;
　　color: #333333;
　　font-size: 15px;
　}
　div#sample p#text1{
　　text-align: center;
　}
　div#sample p#text3{
　　font-size: 10px;
　}
　div#sample p#text4{
　　color: #444444;
　}
　div#sample p#text5{
　　font-weight: bold;
　}
　div#sample p#text5{
　　color: #444444;
　　font-weight: bold;
　　text-align: right;
　}

　/********************
　イメージ部
　*********************/
　div#sample img#img1{
　　margin: 5px 0 0 450px;
　}
　div#sample img#img2{
　　margin: -30px 0 0 250px;
　}
　div#sample img#img3{
　　margin: 10px 0 0 60px;
　}
　div#sample img#img4{
　　margin: 5px 0 0 0;
　}
　div#sample img#img5{
　　margin: -175px 0 0 250px;
　}
　div#sample img#img6{
　　margin: 0 0 0 500px;
　}

お礼

ちゃんとしたものを作ることができました。
有難うございました。

回答No.4

tracer

#3です。
角丸にする要素に指定する装飾の下りが抜けちゃいましたね。
そのまま足せばよいかと思います。

回答No.2

k_kota

そのやり方だと私の環境では多分レイアウトが崩れます。

HTMLの直打ちくらいしかしてませんが、
例えば3x3のテーブルを作って、真ん中以外の背景として枠を作るとかなら出来るなと思いました。柄が複雑だといまいちですけど。

他にも色々方法はありますけど、要件と作成環境に応じて選んでください。

あと、タイトルの日本語がなんか分かりにくいしなんか変じゃないですか。

「角が丸い四角の枠の中にコンテンツを入れる方法」ってことですよね。

お礼

アドバイス有難うございます。

そういう方法もあるのですね。
参考にさせて頂きます。

あと、タイトルの日本語が少しおかしいですね。
今後気を付けます。

回答No.1

tracer

いろんな方法があります。
ただ、対応すべきブラウザはなんですか？
どういったレベルでホームページをつくられていますか？
それによって方法が変わります。

たとえば、対応ブラザを先進的なブラウザ(Chrome、Firefox、Opera、Safari)の新しめのバージョンに限定するなら、CSSのborder-radiusを使えば簡単にできます。CSSを詳しくご存じないようなので、手っ取り早くインラインで書いてみます。

<div style="border:1px solid #000;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;">
<p>コメント1</p>
<p>コメント2</p>
<p>コメント3</p>
<p>コメント4</p>
</div>

ただ、この方法だとIE8以下では丸くなりません。
IEに対応するには、本来のWEB制作的にはJavascriptで対応する場合が多いかもしれません。corner.jsとかが有名ですが、質問者さんが求める制作レベルとは異なるかもしれません。
他にも背景画像を使えるケースもありますが、冒頭で書いたとおり、対応ブラウザによってやり方が変わってくるかもしれませんよ。

お礼

アドバイス有難うございます。

補足

参考にして、自分でいろいろ調べて作り直してみました。
↓のような書き方でOK？

～～～　htmlコード　～～～

<div id="sample">
<div id="text1">あああああああああ</div>
<div id="text2">あああああああああああああああああ</div>
<img src="" width="50" height="44" style="margin: 5px 0 0 450px"/>
<img src="" width="60" height="54" style="margin: -30px 0 0 250px"/>
<div id="text3">いいいいいいいいい</div>
<img src="" width="200" height="34" style="margin: 10px 0 0 60px"/>
<div id="text4">あああああああああ</div>
<div id="text5">あああああああああああああああああ</div>
<img src="" width="330" height="99" style="margin: 5px 0 0 0"/>
<img src="" width="100" height="30" style="margin: -175px 0 0 250px"/>
<img src="" width="100" height="30" style="margin: 0 0 0 500px"/>
<div id="text6">ううううううううううううううううううううううううう</div>
</div>

～～～　cssコード　～～～

#sample{
/* CSS3 */
border-bottom-right-radius: 20px;
border-bottom-left-radius: 20px;

/* Safari,Chrome */
-webkit-border-bottom-right-radius: 20px;
-webkit-border-bottom-left-radius: 20px;

/* Firefox */
-moz-border-radius-bottomright: 20px;
-moz-border-radius-bottomleft: 20px;

/* 共通装飾 */
border:5px solid #000;
width:700px;
background-color: #ffffff;
margin: 0 0 0 50px;
padding: 30px;
}

#text1{
color: #333333;
text-align: center;
font-size: 15px;
}

#text2{
color: #333333;
font-size: 15px;
}

#text3{
color: #333333;
font-size: 10px;
}

#text4{
color: #444444;
font-size: 15px;
}

#text5{
color: #444444;
font-size: 15px;
font-weight: bold;
}

#text6{
color: #444444;
font-size: 15px;
font-weight: bold;
text-align: right;
}

～～～～～～～～～～～～～～～

よろしくお願い致します。