Skip to content

sora / mci-retympa

Go to a project
Commit 839952ca by o.kimura
Options

初回コミット

parents
Inline Side-by-side
Showing with 464 additions and 0 deletions
common.css 0 → 100644
@charset "UTF-8";
/* ***********************************************************
* Stylesheet : Common
* Since: 2015-07-29 MedicalTribune
* Last Modified: 2017-07-04 MedicalTribune
* このCSSはレスポンシブウェブデザインに対応しています。
* タブレット・スマートフォン専用の表示をしない場合は、
* PC表示用CSSのみ記述してください。
* ********************************************************* */
/********************************************************** *
common (編集NG)
********************************************************** */
html,
body,
p,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
ol,
dl,
dt,
dd,
li,
table,
th,
td,
form {
margin: 0px;
padding: 0px;
}
* {
font-size: 100%;
}
body {
margin: 0px;
padding: 0px;
}
a img {
border: none;
}
a {
color: #0066FF;
text-decoration: underline;
}
a:hover {
color: #0066FF;
}
a:visited {
color: #551A8B;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0em 0px 0.5em 0px;
}
p,
ul,
ol,
dl {
margin: 0px 0px 1em 0px;
line-height: 1.4;
}
ul,
ol {
padding: 0px 0px 0px 30px;
}
dt {
font-weight: bold;
}
dd {
margin: 0px 0px 0.5em 1.0em;
}
table {
border-collapse: collapse;
border-spacing: 0px;
margin: 0px 0px 1em 0px;
}
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;
}
/********************************************************** *
Layout (編集NG)
********************************************************** */
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: none;
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: none;
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%;
}
}
@media screen and (max-width:480px) {}
/********************************************************** *
【クライアント側_編集エリア】
鑑賞を防ぐため、
<div id="dt_xxx">で付与したユニークなIDを必ず接頭詞に持ってきてください。
記述例）
#dt_xxx .content{~~~~~~}
#dt_xxx h1{~~~~~~}
********************************************************** */
/*PC表示用CSSを記述*/
@media screen and (max-width:960px) {
/*タブレット表示用CSSを記述*/
}
@media screen and (max-width:480px) {
/*スマホ表示用CSSを記述*/
}
index.html 0 → 100644
<!DOCTYPE html>
<html lang="ja">
<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>
<link rel="stylesheet" href="./common.css" type="text/css" />
</head>
<body>
<header id="header">
<div id="header_inner">
<p>Header / Don't touch</p>
</div>
</header>
<div id="contents" class="clf">
<div id="contents_main">
<article>
<!--///////ここから！編集エリア///////-->
<!-- （1）干渉を防ぐために、id="dt_xxx"を必ずユニークなIDに書き換えてください。例。dt_medicaltribune-->
<div id="dt_xxx" class="dt_area">
<!--///////　▼編集しないでください　///////-->
<h1>ディテーリングコンテンツ用レイアウト</h1>
<h2>CSSは、common.cssに記述してください</h2>
<p>レスポンシブ対応とするため、&lt;div class="detailing_area"&gt;内にwidth:100%;で作成してください。画像については、ディスプレイサイズに応じて可変できるものとし、幅を1000px程度確保したものをご用意ください。</p>
<!--///////　△編集しないでください。ココマデ　///////-->
<h2>ヘッダー画像</h2>
<p>ヘッダー画像のように幅100%でフィットさせるには、imgタグをdivで囲み、class="dt_img"を付与してください。</p>
<div class="dt_img">
<img src="files/img_header.png" alt="" />
</div>
<h2>H2見出し</h2>
<p>Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>. Aliquam mauris erat, sodales quis rutrum eu, tincidunt eu leo. Ut aliquam nulla sit amet libero faucibus tincidunt. Ut et urna purus. Mauris eros nibh, sollicitudin sit amet posuere sed, faucibus id odio. Quisque vitae urna augue. Cras est nisl, iaculis in dignissim nec, facilisis id ipsum. Duis non enim consectetur urna fringilla congue. Nunc nec ipsum orci. Suspendisse vehicula lectus ut sem ornare ut aliquet nibh placerat. Nam eros sem, commodo id auctor egestas, tempor eleifend lorem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed at felis venenatis nulla pharetra gravida at eu lacus. Vivamus tristique risus non tortor cursus aliquam. Proin quis tortor at nisi vulputate pharetra. Maecenas placerat nisi in nunc ultrices a suscipit diam cursus. Nunc aliquam ultricies dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eu ultricies lorem. Nulla luctus adipiscing feugiat.</p>
<h2>レスポンシブ対応画像</h2>
<p>レスポンシブイメージとして使いたい場合は、imgタグをdivで囲み、class="figure"を付与してください。</p>
<div class="figure">
<img src="files/img_beach.jpg" width="600" height="400" alt="" />
<span>画像キャプション</span>
</div>
<h3>H3見出し</h3>
<p>Aenean tempor dictum dui et varius. <em>Maecenas bibendum dui eu ipsum convallis sed</em> iaculis ante semper. Suspendisse vel lorem quis dui vulputate adipiscing at non sem. Aenean quis turpis non lorem placerat adipiscing. Duis accumsan lobortis eros at convallis. Nunc sapien nunc, bibendum facilisis molestie sed, posuere eget quam. Mauris pulvinar tincidunt vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultricies posuere molestie. Donec enim turpis, elementum a mattis vitae, malesuada sed velit. Integer non ipsum vitae nulla malesuada commodo eget vitae nulla. Sed et ligula tortor. Mauris quis facilisis ante. Maecenas id purus augue, nec laoreet magna. Fusce eu nisi dui, et placerat eros. Mauris risus tellus, volutpat in elementum sit amet, ullamcorper auctor leo. Fusce imperdiet tellus vitae libero dapibus non molestie massa rutrum. Aliquam et felis id arcu tempor pharetra. Sed ipsum eros, faucibus facilisis viverra ut, dictum non tellus. </p>
<div class="figure">
<img src="files/img_beach.jpg" width="600" height="400" alt="" />
<span>画像キャプション</span>
</div>
<h3>H3見出し</h3>
<p>テーブルはこちら</p>
<table>
<caption>
table caption
<details>
<summary>sample table</summary>
</details>
</caption>
<tr>
<th scope="row">header A</th>
<td>data A-1</td>
<td>data A-2</td>
<td>data A-3</td>
</tr>
<tr>
<th scope="row">header B</th>
<td>data B-1</td>
<td>data B-2</td>
<td>data B-3</td>
</tr>
<tr>
<th scope="row">header C</th>
<td>data C-1</td>
<td>data C-2</td>
<td>data C-3</td>
</tr>
</table>
<!-- InstanceEndEditable -->
<div class="more">
<!-- InstanceBeginEditable name="EditRegion_More" -->
<h3>Lorem ipsum</h3>
<p>Duis sit amet porta enim. Integer fermentum tincidunt tellus, laoreet ultrices arcu dignissim sit amet. Nullam sem massa, dictum in gravida sed, cursus eu lacus. Fusce non nisi quis ante tincidunt sagittis eget eu ligula. Phasellus varius turpis at dui luctus ullamcorper. Maecenas tincidunt, ipsum non tristique imperdiet, lacus neque elementum magna, non euismod dui erat congue sapien. Praesent congue hendrerit suscipit. Pellentesque erat tortor, interdum eu congue in, congue in mi. Curabitur ullamcorper lacinia dolor at convallis. In risus urna, convallis ac commodo id, bibendum nec mi. Phasellus lacus arcu, ultricies quis elementum non, pretium ut orci. Phasellus posuere congue consequat. Integer posuere volutpat leo eget posuere. Phasellus eget odio quis tortor gravida mollis a quis purus. Suspendisse et euismod metus. Donec nisi nulla, rutrum a interdum a, aliquam sed libero. Nullam condimentum elementum ipsum. Duis ut orci ut ligula dignissim pretium.</p>
<ul>
<li>list A</li>
<li>list B</li>
<li>list C</li>
</ul>
<h4>Lorem ipsum</h4>
<p>In pharetra odio id diam elementum facilisis. Phasellus sit amet est nec neque bibendum viverra eget vel sapien. Aenean et metus ut urna lobortis imperdiet. Pellentesque quis leo sodales ligula malesuada ullamcorper eu nec tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla elementum elit eu turpis tristique rhoncus. Suspendisse malesuada feugiat suscipit. Pellentesque non tempus est. Maecenas dictum risus ac tortor convallis nec molestie nisl tristique. Nunc ac pellentesque magna. Integer ut feugiat nibh. Cras lacinia libero quis ante viverra non sollicitudin odio consequat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam dapibus dolor eget erat aliquet id mollis nisl cursus. Sed eleifend hendrerit accumsan. Curabitur ac mauris ut nisl pharetra dapibus nec semper nulla. Sed rhoncus, tortor in pulvinar aliquam, nisi metus fermentum lorem, blandit varius lectus nisi sed ipsum.</p>
<ol>
<li>list 1</li>
<li>list 2</li>
<li>list 3</li>
</ol>
<h5>Lorem ipsum</h5>
<p>Morbi tincidunt pharetra lectus, eu pretium risus varius eget. Nam sed fringilla lectus. Cras sit amet velit nulla. Pellentesque placerat molestie tellus, vel vestibulum libero laoreet nec. Cras ultricies aliquet mauris. Proin gravida, diam sit amet elementum ornare, neque nibh gravida est, sit amet aliquam arcu nisi nec elit. Aenean malesuada justo sit amet eros posuere nec commodo orci convallis. Sed justo dolor, pellentesque at ornare ut, tempus nec lectus. Mauris at lorem vitae enim ultrices lobortis. Curabitur pharetra velit molestie orci lacinia eget viverra elit interdum. Sed turpis tortor, adipiscing eget euismod vel, elementum sed leo. Sed leo eros, pharetra ac gravida id, lacinia sit amet enim. Nunc eget felis mauris. Phasellus porta neque erat, quis imperdiet orci. Donec dui orci, luctus ac fermentum et, tempor a est. Aliquam dictum varius justo. </p>
<dl>
<dt>definition term A</dt>
<dd>definition description A</dd>
<dt>definition term B</dt>
<dd>definition description B</dd>
<dt>definition term C</dt>
<dd>definition description C</dd>
</dl>
</div>
<!-- // .dt_area --></div>
<!--///////ここまで！編集エリア///////-->
</article>
</div>
<div id="contents_sub">
<img src="files/img_banner.png" alt="" />
<div class="contents_sub_inner">
<h2>SideBar / Don't touch</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam mauris erat, sodales quis rutrum eu, tincidunt eu leo. Ut aliquam nulla sit amet libero faucibus tincidunt. Ut et urna purus. Mauris eros nibh, sollicitudin sit amet posuere sed, faucibus id odio. Quisque vitae urna augue. Cras est nisl, iaculis in dignissim nec, facilisis id ipsum. Duis non enim consectetur urna fringilla congue. Nunc nec ipsum orci. Suspendisse vehicula lectus ut sem ornare ut aliquet nibh placerat. Nam eros sem, commodo id auctor egestas, tempor eleifend lorem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed at felis venenatis nulla pharetra gravida at eu lacus. Vivamus tristique risus non tortor cursus aliquam. Proin quis tortor at nisi vulputate pharetra. Maecenas placerat nisi in nunc ultrices a suscipit diam cursus. Nunc aliquam ultricies dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eu ultricies lorem. Nulla luctus adipiscing feugiat.</p>
</div>
</div>
</div>
<hr class="doc_separate" />
<footer id="footer">
<div id="footer_inner">
<p>Footer / Don't touch</p>
</div>
</footer>
</body>
</html>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment