画像差し替え・TOPエリア作成

common.css

@@ -302,12 +302,54 @@ article {
 
 ********************************************************** */
 
+/*PC表示用CSSを記述*/
+#dt_retympa .top_area {
+ width: 100%;
+ margin: 10px 0;
+ border: 2px solid #8bc886;
+ display: flex;
+ -webkit-justify-content: space-between;
+ justify-content: space-between;
+}
 
+#dt_retympa .top_area .upper_text {
+ position: absolute;
+ margin: 3px 0 0 72px;
+ font-weight: 600;
+}
 
-/*PC表示用CSSを記述*/
+#dt_retympa .top_area .under_text {
+ position: absolute;
+ margin: 68px 0 0 72px;
+ font-weight: 600;
+ border-top: 1px solid #8bc886;
+}
+
+#dt_retympa .top_area .under_text span {
+ font-size: 80%;
+ margin-left: 25px;
+}
 
+#dt_retympa .top_area .retympa_logo {
+ width: 400px;
+ height: 48px;
+ padding: 22px 0 0 15px;
+}
 
+#dt_retympa .top_area .retympa_right {
+ width: 260px;
+ height: auto;
+}
 
+#dt_retympa .top_area .supplement {
+ position: absolute;
+ margin: 100px 0 0 13px;
+ font-size: 70%;
+}
+
+#dt_retympa sup {
+ font-size: 50%;
+}
 
 @media screen and (max-width:960px) {
  /*タブレット表示用CSSを記述*/

common.min.css

+@charset "UTF-8";html,body,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,dt,dd,li,table,th,td,form{margin:0;padding:0}*{font-size:100%}body{margin:0;padding:0}a img{border:0}a{color:#06f;text-decoration:underline}a:hover{color:#06f}a:visited{color:#551a8b}h1,h2,h3,h4,h5,h6{margin:0 0 .5em 0}p,ul,ol,dl{margin:0 0 1em 0;line-height:1.4}ul,ol{padding:0 0 0 30px}dt{font-weight:bold}dd{margin:0 0 .5em 1.0}table{border-collapse:collapse;border-spacing:0;margin:0 0 1em 0}table th,table td{font-weight:normal;border:1px solid #666;text-align:left;padding:4px 6px;vertical-align:top}table th{background-color:#efefef}table caption{caption-side:top;text-align:left}.clf{min-height:1px}.clf:after{content:"";display:block;clear:both;height:1px;overflow:hidden}/*\*/* html .clf{height:1px;overflow:visible}/**/.doc_separate{display:none}body{font-size:100%;background-color:#fff;text-align:center}#header,#contents,#footer{width:1200px;margin:10px auto;text-align:left}@media screen and (max-width:960px){#header,#contents,#footer{width:100%;margin:0 auto 10px;text-align:left}}#header_inner{padding:10px;border:2px dashed #C00}article{width:100%;margin:0;padding:0}#footer_inner{padding:10px;border:2px dashed #C00}#contents_main{width:850px;margin:0 auto;background:0;border:2px dashed #C00;box-sizing:content-box}#contents_main .dt_area{width:90%;margin:0 5%}.dt_img{width:100%;margin:10px auto;padding:0;text-align:center}.dt_img img{width:100%;height:auto;margin:0 auto;padding:0;text-align:center}.figure{display:block;margin:20px auto;max-width:600px;text-align:right}.figure img{margin:0 auto;padding:0;text-align:center}.figure span{font-size:81.25%;text-align:right}.dt_area table{width:90%;margin:20px 5%}#contents_sub{display:none;float:right;width:300px;background:0;border:2px dashed #C00;box-sizing:content-box}#contents_sub .contents_sub_inner{padding:10px}@media screen and (max-width:960px){#contents_main{clear:both;width:100%;margin:0 auto}#contents_main .dt_area{clear:both;width:100%;margin:0 auto}#contents_sub{clear:both;width:100%;margin:0}.detailing_img img{width:100%;height:auto;max-width:670px;margin:10px auto;padding:0;text-align:center}.figure img{width:90%;height:auto;max-width:670px;margin:10px 5%;padding:0;text-align:center}.dt_area table{width:90%;margin:0 5%}}#dt_retympa .top_area{width:100%;margin:10px 0;border:2px solid #8bc886;display:flex;-webkit-justify-content:space-between;justify-content:space-between}#dt_retympa .top_area .upper_text{position:absolute;margin:3px 0 0 72px;font-weight:600}#dt_retympa .top_area .under_text{position:absolute;margin:68px 0 0 72px;font-weight:600;border-top:1px solid #8bc886}#dt_retympa .top_area .under_text span{font-size:80%;margin-left:25px}#dt_retympa .top_area .retympa_logo{width:400px;height:48px;padding:22px 0 0 15px}#dt_retympa .top_area .retympa_right{width:260px;height:auto}#dt_retympa .top_area .supplement{position:absolute;margin:100px 0 0 13px;font-size:70%}#dt_retympa sup{font-size:50%}
\ No newline at end of file

index.html

 <!DOCTYPE html>
 <html lang="ja">
-	<head>
+
+<head>
  <meta charset="UTF-8" />
  <title>ディテーリング入稿用HTML</title>
  <meta name="description" content="" />
  <meta name="keywords" content="" />
-		<script type="text/javascript">google.load('jquery','1');google.load('jqueryui','1');</script>
+ <script type="text/javascript">
+  google.load('jquery', '1');
+  google.load('jqueryui', '1');
+
+ </script>
  <link rel="stylesheet" href="./common.css" type="text/css" />
-	</head>
+</head>
+
 <body>
 
  <header id="header">
@@ -18,13 +24,21 @@
  <div id="contents" class="clf">
   <div id="contents_main">
 
-<article>
-<!--///////ここから！編集エリア///////-->
-
-<!-- （1）干渉を防ぐために、id="dt_xxx"を必ずユニークなIDに書き換えてください。例。dt_medicaltribune-->
-<div id="dt_xxx" class="dt_area">
+   <article>
+    <!--///////ここから！編集エリア///////-->
 
+    <!-- （1）干渉を防ぐために、id="dt_xxx"を必ずユニークなIDに書き換えてください。例。dt_medicaltribune-->
+    <div id="dt_retympa" class="dt_area">
 
+     <div class="top_area">
+      <span class="upper_text">鼓膜穿孔治療剤</span>
+      <img src="/files/logo.png" alt="" class="retympa_logo">
+      <img src="/files/main.png" alt="" class="retympa_right">
+      <span class="under_text">Retympa<sup>®</sup><span>トラフェルミン（遺伝子組み換え）製剤</span></span>
+      <div class="supplement">【禁忌（次の患者には投与しないこと）】<br>
+       1. 本剤の成分に対し過敏症の既往歴のある患者<br>
+       2. 耳内に悪性腫瘍のある患者又はその既往歴のある患者［本剤が細胞増殖促進作用を有するため］</div>
+     </div>
      <!--///////　▼編集しないでください　///////-->
      <h1>ディテーリングコンテンツ用レイアウト</h1>
      <h2>CSSは、common.cssに記述してください</h2>
@@ -120,9 +134,10 @@
      </div>
 
 
-<!-- // .dt_area --></div>
-<!--///////ここまで！編集エリア///////-->
-</article>
+     <!-- // .dt_area -->
+    </div>
+    <!--///////ここまで！編集エリア///////-->
+   </article>
 
   </div>
   <div id="contents_sub">
@@ -139,5 +154,6 @@
    <p>Footer / Don't touch</p>
   </div>
  </footer>
-	</body>
+</body>
+
 </html>