BOXの表示が崩れた | 質問掲示板 | 独学!未経験からWebデザイナーになる!!

div.section2 {
width: 50%; /* ボックスの幅 */
position: absolute;
top: 0;
background-color: #ffffff; /* ボックスの背景色 */
border: 1px #c0c0c0 solid; /* ボックスの境界線 */
font-size: 90%; /* ボックスの文字サイズ */
}

position: absolute;
top: 0

position: absolute;

position: relative;

position: relative;

<div class="section2">
<h4>内容</h4>
<ol>
<li>合成
<ol><li>1</li>
<li>2</li></ol></li>
<li>加工<ol><li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>その他</li></ol></li>
</ol></div>

1. 合成
　　　 1. 1
　　　 2. 2
2. 加工
　　　 1. 1
　　　 2. 2
　　　 3. 3
　　　 4. 4
　　　 5. 5
　　　 6. その他

@charset "Shift_JIS";

/* 一括で全ての要素の余白をゼロに指定 */
* {
padding: 0;
margin: 0;
}

a:link {
color: #6633ff;
text-decoration: underline;
}

a:visited {
color: #6633ff;
text-decoration: underline;
}

a:hover {
color: #ff0000;
text-decoration: underline;
}

/* ---------------------------------------- フォントスタイル フォントサイズ */
body {
font-size: 0.9em;
text-align: center;
background-color:＃F4F5F7;
font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
padding: 0;
margin: 0;
}

/* ---------------------------------------- レイアウトに関する指定 */

#wrapper {
text-align: left;
margin: 1em auto 0;
width: 95%;
border: 1px solid #cccccc;
}

#header{
padding: 0px 20px 10px;
border-bottom: 1px solid #cccccc;
background: url(logo.jpg) no-repeat right bottom; /* 背景ロゴ */
}

#container {
float: right;
width: 100%;
margin-left: -200px;
}

#contents {
margin-left: 200px;
padding: 1.5em 10px 10em 20px;
border-left: 1px solid #cccccc;
}

#sidebar {
float: left;
width: 180px;
padding: 1em 10px 0em;
}

#footer {
clear: both;
padding: 0.5em 0 1em;
border-top: 1px solid #cccccc;
}

/* ---------------------------------------- #header内の指定 */

/* -- 見出しレベル1 -- */
h1 {
text-align: right;
font-size: 1em;
font-weight: normal;
}

/* -- 企業名 ショップ名 サイト名 -- */
.logo {
font-size: 1.8em;
margin-bottom: 0.5em;
}

.logo a {
text-decoration: none;
background-color: #ffffff;
color: #6666cc ;
}

.logo a:hover {
text-decoration: none;
background-color: #ffffff;
color: #663399;
}

/* -- 概要 -- */
.description { }

/* ---------------------------------------- #dropmenuの指定 */
#dropmenu{

list-style-type: none;

width: 100%;

height: 35px;

margin: 0px auto 2px;

padding: 0;

background: #9999ff;

border-bottom: 2px solid #6666cc;

border-radius: 3px 3px 0 0;

}

#dropmenu li{

position: relative;

width: 10%;

float: left;

margin: 0;

padding: 0;

text-align: center;

}

#dropmenu li a{

display: block;

margin: 0;

padding: 15px 0 11px;
color: #fff;

font-size: 14px;

font-weight: bold;

line-height: 1;

text-decoration: none;

}

#dropmenu li:hover > a{

background: #ededfc ;

color: #6666cc;

}

#dropmenu > li:hover > a{

border-radius: 3px 3px 0 0;

}

#dropmenu li ul{

list-style: none;

position: absolute;
top: 100%;

left: 0;

margin: 0;

padding: 0;

border-radius: 0 0 3px 3px;

}

#dropmenu li ul li{

overflow: hidden;

width: 150%;

height: 0;
color: #fff;

-moz-transition: .2s;

-webkit-transition: .2s;

-o-transition: .2s;

-ms-transition: .2s;

transition: .2s;

}

#dropmenu li ul li a{

padding: 13px 15px;

background: #9999ff;

text-align: left;

font-size: 12px;

font-weight: normal;

}

#dropmenu li:hover ul li{

overflow: visible;

height: 38px;

border-top: 1px solid #6666ff;

border-bottom: 1px solid #6666ff;

}

#dropmenu li:hover ul li:first-child{

border-top: 0;

}

#dropmenu li:hover ul li:last-child{

border-bottom: 0;

}

#dropmenu li:hover ul li:last-child a{

border-radius: 0 0 3px 3px;

}


/* ---------------------------------------- #contents内の指定 */

/* -- 見出し -- */
/* -- h2 -- */
div.ribbon_bf{
width: 40px;
height: 70px;
background: #6666cc;
margin-left: 5px;
margin-bottom: 0px;
margin-bottom: 0;
}

h2{
width: 50%;
height: 30px;
padding: 10px;
background: white;
box-shadow:0 0 5px #fff, 0 0 5px #ccc, 0 0 1px #aaa;
-webkit-box-shadow:0 0 5px #fff, 0 0 5px #ccc, 0 0 1px #aaa;
-moz-box-shadow:0 0 5px #fff, 0 0 5px #ccc, 0 0 1px #aaa;/*-- 見出し影 -- */
border-radius: 6px;color:black;/*-- 文字色 -- */
font-size: 16pt;
padding-left: 50px;
margin-top: -50px;/*-- リボン上長さ -- */
margin-bottom: 0px;
}

div.ribbon_md{
width: 15px;
height: 15px;
background: #ffcc00;/*-- リボンのピン -- */
border-radius: 45px;
margin-top: -32px;
margin-left: 18px;
margin-bottom: 20px;
}
div.ribbon_af{
width: 0px;
height: 10px;
border-left: 20px solid #6666cc;
border-right: 20px solid #6666cc;
border-bottom: 15px solid transparent;
background: white; /*-- リボン下側の背景色 -- */
margin-top: 20px;
margin-left: 5px;
margin-bottom: 30px;
}
/* -- ここまでh2専用 -- */

h3 {
font-size: 1.2em;
margin-bottom: 3px 0px 15px;
width: 50%; /* 見出しエリアの幅 */
padding: 5px 0 5px 5px;
border-left: 7px solid #6666cc;
border-bottom: 1px solid #c0c0c0;
background: #eaedf7;
}

/* -- h4はリストに使用 -- */

/* -- ここからh5専用 -- */
h5 {
font-size: 1.2em;
position: relative;
padding: 5px 5px 5px 42px;
background: #7373e6;
color:#F4F5F7;
width: 50%; /* 見出しエリアの幅 */
margin-left: -33px;
line-height: 1.3;
z-index:-1;
}

h5:before {
position: absolute;
content: '';
left: -2px;
top: -2px;
border: none;
border-left: solid 40px white;
border-bottom: solid 79px transparent;
z-index:-2
}

/* -- ここまでh5専用 -- */

/* -- h6専用 -- */

h6 {
font-size: 1em;
padding: 0.5em;/*文字周りの余白*/
color: #6666cc;/*文字色*/
width: 50%; /* 見出しエリアの幅 */
border-left: solid 8px #6666cc;/*左線（実線 太さ 色）*/
border-bottom: solid 1px #6666cc;
}
/* -- ここまでh6専用 -- */

/* -- 画像-- */
img{
margin: 2px 10px 2px 0px; /*［上］［右］ [下］［左］ を指定*/
}

img.ex{
margin: 2px 10px 2px 0px; /*［上］［右］ [下］［左］ を指定*/
float: left;
}

.backimg {
border-style:none;
width: 100%;
}

/* -- 注意書き -- */
.note {
background-color: #eaedf7;
border: 1px solid #6666cc;
position: relative;
padding: 1em 0em 1em 3.5em;
}
.note:before {
content: url(image/point.png);
position: relative ;
margin-left : -3em ;
margin-top : -5em ;
}
/* -- 文字 -- */

ol,ul.{ display:inline-block;
margin: 0 0 0 0.5em;
padding: 0;
}


ol,ul.side{ display:inline-block;
margin: 0 0 0 0.5em;
padding: 0;
}

p.clear{
clear: both;
}

p.right{
text-align: right;
}

/* -- 注意書き2 -- */
.note2 {
background-color: #eaedf7;
border: 1px solid #6666cc;
position: relative;
float: left;
padding: 1em 0em 1em 3.5em;
}
.note2:before {
content: url(image/point.png);
position: relative ;
margin-left : -3em ;
margin-top : -5em ;
}
/* -- 文字 -- */

/* -- 文字 -- */
#contents p {
line-height: 1.6em;
margin-left : 0.5em ;
margin-bottom: 0em;
}

#contents li {
line-height: 1.6em;
margin-left : 1.5em ;
margin-bottom: 0em;
}

/* -- パン屑リスト -- */
#contents .topic-path {
line-height: 1em;
margin-bottom: 2em;
}

/* -- 凡例 -- */
.box {
width: 60%;
position: relative;
margin: 2em 0;
padding: 25px 10px 7px;
border: solid 2px #ccccff;
}
.box .box-title {
position: absolute;
display: inline-block;
top: -2px;
left: -2px;
padding: 0 9px;
height: 25px;
line-height: 25px;
vertical-align: middle;
font-size: 17px;
background: #9999ff;
color: #ffffff;
font-weight: bold;
}
.box p {
margin: 0;
padding: 0;
}

img {
border:1px solid #333; /*外枠の色*/
padding:5px; /*余白*/
background-color:#ffffff; /*余白部分の色 */
}

/* https://saruwakakun.com/html-css/reference/box より*/

/* --- 罫線スタイル0 --- */
hr.separator {
height: 2px;
border: none;
border-top: 1px #949494 dotted; /* 境界線 */
}


/* --- 罫線スタイル1 --- */
hr.separator1 {
height: 2px;
border: none;
border-top: 2px #9999ff dotted; /* 境界線 */
}

/* --- 罫線スタイル2 --- */
hr.separator2 {
height: 2px;
border: none;
border-top: 2px #9999ff dashed; /* 境界線 */
}

/* ---------------------------------------- #sidebar内の指定 */

/* -- カテゴリタイトル -- */
.sidetitle {
text-decoration: none;
display: block;
width: 151px;
padding: 0.5em 1em 0.5em 1em;
background-color: #7A7ACC;
color: #F7F7DE;
border:none;
}
.sidetitle:before {/*疑似要素*/
font-family: FontAwesome;
content: "\f05a";/*アイコンの種類*/
color: #fff;/*アイコン色*/
font-size: 1.1em ;
bottom : -0.16em ;
margin-right : 0.3em ;
}


/* -- カテゴリタイトル2 -- */
.sidetitle2 {
text-decoration: none;
display: block;
width: 151px;
padding: 0.5em 1em 0.5em 1em;
background-color: #7A7ACC;
color: #F7F7DE;
border:none;
}
.sidetitle2:before {/*疑似要素*/
font-family: FontAwesome;
content: "\f14c";/*アイコンの種類*/
color: #fff;/*アイコン色*/
font-size: 1.1em ;
bottom : -0.16em ;
margin-right : 0.3em ;
}


/* -- リスト -- */
.localnavi {
list-style-type: none!important; /* ulの中黒を消す。 */
margin-bottom: 2em;
}

.localnavi li { display: inline;
}

.localnavi li a {
text-decoration: none;
display: block;
width: 174px;
padding: 0.5em 0px 0.5em 5px;
background-color: none;
color: black;
border-bottom: 1px solid #cccccc;
}
.localnavi li a:before {/*疑似要素*/
font-family: FontAwesome;
content: "\f138";/*アイコンの種類*/
color: #9999ff;/*アイコン色*/
font-size: 1.1em ;
bottom : -0.16em ;
margin-right : 0.3em ;
}

.localnavi a:hover {
text-decoration: none;
background-color: #eaedf7;
color: black;
border-bottom: 1px solid #9999ff;
}

/* ---------------------------------------- #sidebarここまで */

/* ---------------------------------------- #footer内の指定 */
#footer p { text-align: center; }

/* 以下 CSSデザインサンプルクレジット部分 */
#cds{ display: none; }

/* --- ▼フッタ内の設定開始 --- */

/* --- フッタ --- */
#footer {
padding: 15px 0 20px; /* フッタのパディング（上、左右、下） */
background-color: #f9f9f9; /* フッタの背景色 */
border-top: 1px #c0c0c0 solid; /* フッタの上境界線 */
}

/* --- フッタメニュー --- */
#footer ul.nl {
margin: 0 0 10px; /* フッタメニューのマージン（上、左右、下） */
padding: 0;
list-style-type: none;
text-align: center;
}
/* --- メニュー項目 --- */
#footer ul.nl li {
padding: 0 4px 0 8px; /* 項目のパディング（上右下左） */
background: url(../image/menu_line.gif) no-repeat left; /* 項目の背景（区切り線） */
display: inline;
}
/* 最初の項目 */
#footer ul.nl li.first {
background-image: none; /* 区切り線なし */
}
/* ガイドメニュー */
#footer ul.guide {
margin: 0 0 15px; /* ガイドメニューのマージン（上書き） */
}

/* --- アドレス・コピーライト --- */
#footer address {
font-style: normal;
text-align: center;
line-height: 140%; /* 行の高さ */
}

/* --- ▲フッタ内の設定終了 --- */

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta name="Description" content="ス">
<meta name="Keywords" content="ス">
<title>Skye：見出し</title>
<link rel="stylesheet" href="base.css" type="text/css" media="screen,tv">
<link rel="stylesheet" href="box.css" type="text/css" media="screen,tv">
<link rel="stylesheet" href="icon-order.css" type="text/css" media="screen,tv">
<link rel="stylesheet" href="print.css" type="text/css" media="print" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
</head>
<body>
<div id="wrapper">
<div id="header">
<!-- 見出し -->
<h1></h1>
<!-- タイトル -->
<p class="logo"><a href="main.html">マニュアル</a></p>
<!-- 概要 -->
<p class="description">*** まとめ ***</p>
</div><!-- / header end -->

<!-- ドロップメニュー -->
<ul id="dropmenu">
<li><a href="main.html">Home</a>
<ul>
<li><a href="ready.html">準備</a></li>
<li><a href="regist.html">登録</a></li>
</ul>
</li>
<li><a href="order.html">手順</a>
<ul>
<li><a href="order-s.html">1</a></li>
<li><a href="order-jb.html">2</a></li>
</ul>
</li>
<li><a href="order.html">2手順</a>
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="order-pl.html">3</a></li>
</ul>
</li>
<li><a href="#">3手順</a>
<ul>
<li><a href="#">図</a></li>
<li><a href="#">用</a></li>
<li><a href="#">2用</a></li>
<li><a href="#">シール</a></li>
<li><a href="#">詳細図</a></li>
</ul>
</li>
<li><a href="#">部品</a>
<ul>
<li><a href="#">1</a></li>
<li><a href="#">仮</a></li>
<li><a href="#">2</a></li>
<li><a href="#">金物</a></li>
<li><a href="#">3</a></li>
<li><a href="#">仮2</a></li>
<li><a href="#">4</a></li>
</ul>
</li>
<li><a href="#">簡易手引き</a>
<ul>
<li><a href="order-pl.html">1</a></li>
<li><a href="#">方法</a></li>
<li><a href="#">一覧</a></li>
<li><a href="#">2一覧</a></li>
<li><a href="#">印刷</a></li>
</ul>
</li>
<li><a href="link.html">リンク</a>
<ul>
<li><a href="">システム</a></li>
<li><a href="">検索</a></li>
<li><a href="">出力</a></li>
<li><a href="">0</a></li>
</ul>

</li>

<li><a href="other.html">その他</a>
<ul>
<li><a href="glossary.html">用語集</a></li>
<li><a href="folder.html">構成</a></li>

<li><a href="#">Excel 関数一覧</a></li>
</ul>
</li>

</ul>

<div id="container">
<div id="contents">
<!-- パン屑リスト -->
<p class="topic-path"><a href="main.html">Home</a> &gt; 見出し</p>

<!-- コンテンツ ここから -->
<div class="ribbon_bf"></div><h2>
見出し</h2><div class="ribbon_md"></div><div class="ribbon_af"></div>
<p>ここでは、内容説明の方法を説明する。</p>
<p></p>
<p></p>
<div class="section2">
<h4>内容</h4>
<ol>
<li>合成
<ol><li>1</li>
<li>2</li></ol></li>
<li>加工<ol><li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>その他</li></ol></li>
</ol></div>
<p>


<hr class="separator">

<div class="heading">
<h3>初めに</h3>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>



<h3><span class="edit">図</span></h3>
<p></p>
<p></p>
<p></p>
<p></p>

</div>

<!-- コンテンツ ここまで -->
</div><!-- / contents end -->
</div><!-- / container end -->

<!-- サイドバー ここから -->
<div id="sidebar">
<p class="sidetitle">*** 目次 ***</p>
<ul class="localnavi">
<li><a href="#">初めに</a></li>

</ul>

<p class="sidetitle">*** カテゴリ ***</p>
<ul class="localnavi">
<li><a href="#">*** リンク ***</a></li>
<li><a href="#">*** リンク ***</a></li>
<li><a href="#">*** リンク ***</a></li>
<li><a href="#">*** リンク ***</a></li>
<li><a href="#">*** リンク ***</a></li>
</ul>
</div><!-- サイドバー ここまで -->
<div id="footer">

<ul class="nl">
<li class="first"><a href="main.html">ホーム</a></li>
<li><a href="order.html">方法</a></li>
<li><a href="guide.html">手引き</a></li>
<li><a href="glossary.html">用語集</a></li>
<li><a href="delivery.html">納期一覧</a></li>
<li><a href="map.html">サイトマップ</a></li>

</ul>

<!-- コピーライト -->
<p>Copyright &copy; *** 著作権表記 ***. All Rights Reserved.</p>
<p id="cds">CSS Template <a href="http://www.css-designsample.com/">CSSデザインサンプル</a></p>
</div><!-- / footer end -->
</div><!-- / wrapper end -->
</body>
</html>

ol,ul.side{ display:inline-block;
margin: 0 0 0 0.5em;
padding: 0;
}

ol,ul.{ display:inline-block;
margin: 0 0 0 0.5em;
padding: 0;
}

<p><img src="14.jpg" alt="Photo" class="ex"><br>
<ol>
<li>名</li>
<li>合計</li>
<li>（定型）</li>
<li>日</li>
<li>数</li>
<li>印</li>
</ol></p>
<p class="clear">。</p>

ol ol {
display: block;
}

<p><img src="14.jpg" alt="Photo" class="ex"><br>
<ol class="hoge">
<li>名</li>

.hoge {
padding-left: 100px;
}

img.ex{
margin: 2px 10px 2px 0px; /*［上］［右］ [下］［左］ を指定*/
float: left;
}