|
|
|
HOME > HTML & CSSパーツ > CSS box(ボックス)サンプル > boxを横に並べたサンプル1 |
|
boxを横に並べたサンプル1 |
|
|
|
|
|
|
|
|
|
ボックスを横に並べたサンプルの紹介です。 |
|
画像素材に説明の文章を記入するパターンのもっともポピュラーなレイアウトのサンプルです。 |
|
シンプルですので、ホームページの配置したい場所に、簡単に配置できます。 |
|
下記サンプルをコピーしてご利用下さい。 |
|
ボックスを横に並べたサンプル |
|
|
|
|
 こちらはボックスを横に並べたサンプルです。
ボックスは置きたい場所に簡単に設置できるので便利です。
写真の横に文字が回り込む設定をしています。
このように文字が写真の横に回り込んで表示されます。
下記にHTMLとCSSの記載例を紹介していますので
コピーしてご利用下さい。
 floatでボックスを横に並べています。
テーブルより記述が少ないので便利です。
位置の指定をすることで、好きなところに配置できます。
このボックスはfloatを使って横に並べています。
|
|
|
|
|
設置方法 |
|
|
|
|
|
|
 HTMLの記載例 |
|
|
CSSの記載例 |
|
<body>と</body>の間の、設置したい場所に |
|
|
HTML内の</head>の直前に下記を記入して下さい。 |
|
下記を記入して下さい。 |
|
|
外部スタイルシートへ記入してもOKです。 |
|
<div class="box1">
<p><img src="img/1.jpg" width="120" height="90"
border="0">こちらに説明を書きます</p></div>
<div class="box2">
<p><img src="img/2.jpg" width="120" height="90"
border="0">こちらに説明を書きます
</p></div>
|
|
|
<style type = "text/css">
<!--
.box1 {
width: 300px;
height: 200px;
border: 1px solid #999999;/*枠の色*/
background-color: #ffffff;/*ボックス内の色*/
padding:10px;/*ボックスの内側にスペース*/
margin-right:20px;
float: left;
}
.box1 p img{
float:left;
margin-right:5px; /*写真の左にスペースを空ける*/
}
.box2 {
width: 300px;
height: 200px;
border: 1px solid #999999;/*枠の色*/
background-color: #ffffff;/*ボックス内の色*/
padding:10px;
float: left;
}
.box2 p img{
float:left;
margin-right:5px; /*写真の左にスペースを空ける*/
}
-->
</style>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
HOME
