14日目 割烹芸人の解析
開発ステップ3 対象解析
他者のサービスを利用するサービスの場合は仕様解析を怠ると死にます（問い合わせ的に）
14日目
まずは活動報告の仕様を調べます。
以前、割烹芸人のテンプレートでも調べましたがもう少し詳しく調べます。
なお非公式です。（個人で調べたものです）変更される恐れもあります。
使用できるタグ（抜け漏れ多分あり）
#基本はdiv, span, pでstyle装飾
div
span
p
#使用できるstyleは限定
color
background-color
background-image
backgraound-repeat
font-style
font-variant
font-weight
font-size
line-height
text-align
letter-spacing
word-spacing
width
height
margin
padding
float
clear
#リスト
ul
ol
li
#属性
list-style-image
list-style-type
#リンク
a
#属性 targetは不可 （クッションページがあるため）
href
#表の作成
table
tr
th
td
bgcolor
#属性
table-layout
border-collapse
border-spacing
caption
#見出し
h2-h6
#なろうのcssの影響あり
#他
strong
em
hr
q
i
small
br
sup
sub
code
pre
var
dfn
dl
dt
dd
title
abbr
blockquote
cite
#画像
img
#属性
src
alt
width
height
#HTML5では非推奨 ただ文字数削減には有効
b
s
u
center
#fontタグはスマホで上手く動かない場合があるので非推奨
font
小説家になろうではPCとモバイルで画面設定を変えているのでそれぞれ分けて説明。
<div id="container">
<div id="contents">
<div id="main">
<div id="blogbg"><div id="blogview">
<p id="blogtitle">xxxxx</p>
<p id="date">xxxxx</p>
<p id="ex">
まず全体がcontainerでくくられる。その中にcontents、でmainでblogdgそしてblogview記事自体はpのexで指定。
見る必要があるのはblogbgとex
blogbgのスタイル(base)
width:570px;
padding:15px;
background:#fefefe;
margin: 0px;
text-align: left;
font-family: 'Noto Sans Japanese', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
font-size: 12px;
color: #333333;
基本サイズは12pxでpaddingが両サイドに15 px入っているので実質540pxの横幅。
exのスタイル
padding: 20px 10px;
font-size: 120%;
line-height: 170%;
color: #444444;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
基本サイズから1.2倍になって、paddingが10px入るので520pxがPCの幅。
ただし、この設定は打ち消せる。直下にdivでブロックを指定してやればよい。
font-size:1.2em;
line-height: 1.7;
color: #444444;
というかこれバグみたい。どうやらブロック要素が入った時点で<p id="ex">が閉じる
例えば<h2>や<div>、<hr>といったブロック要素を入れた時点でそこで閉じて、exで定義したスタイルが消える。よく途中からフォントが小さくなっているの見るけど、どうやらそのせい。
HTML5のルールではpタグの中にブロック要素を入れ込むことが禁止されているのでこうなっている。
なぜ、HTMLを書けるようにしておいて、pタグでくくったのかはよくわからないけど、
なので、最初にdivでスタイルを再定義するのが無難。
ここでpadding, marginを0に設定しておくと限界まで横幅を使えていい感じ。
CSS(初期値、Classで使えそうなものだけ抜き出し)
ol,ul{
list-style:none;
}
img {
vertical-align:bottom;
border-width: 0px;
border-style: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
address,caption,cite,code,dfn,em,strong,th,ver{
font-style:normal;
}
dl {_height: 1%;}
a {
text-decoration: none;
color: #3366aa;
}
a:visited {
color:#885577;
}
a:hover {
text-decoration: none;
color: #339933;
}
ul:after,dl:after,.clr {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
h1 {
margin: 10px 0px;
width: 650px;
font-size:120%;
}
h1 .mini{
margin: 0px 0px 0px 5px;
font-size:90%;
font-weight:normal;
}
.upper {
padding: 10px 10px 5px 0px;
text-align:right;
clear: both;
}
.link_box {
margin: 0px 0px 0px 0px;
border: 1px solid #aaaaaa;
background: #fdfdfd;
}
.link_box h3{
background: #F3F3F3;
color: #666666;
margin: 0px 0px 5px 0px;
padding: 5px 5px 5px 5px;
font-size:100%;
}
.link_box ul{
margin: 10px 0px 10px 5px;
}
.link_box li{
margin: 0px 5px 10px 10px;
font-size: 110%;
}
.link_box li.second{
margin: 0px 0px 0px 20px;
}
.link_box li a {
padding: 3px 5px 3px 15px;
display: block;
position: relative;
}
.link_box li a:after {
content:"";
display:block;
width:0;
height:0;
border-style: solid;
border-width: 5px 0 5px 8.7px;
border-color: transparent transparent transparent #bbb;
position:absolute;
left: 0;
top:0;
bottom:0;
margin:auto;
}
.link_box li a:hover::after {
border-color: transparent transparent transparent #e66;
}
.sideNav {
margin-bottom:5px;
background: #cccccc;
padding:2px;
}
ul.nav li{
font-size: 110%;
border: 1px solid #cccccc;
font-family: 'Lucida Grande','Hiragino Kaku Gothic ProN',Meiryo,sans-serif;
line-height:36px;
}
ul.nav a {
padding-left: 10px;
color: #006699;
display: block;
background: #f9f9f9;
}
ul.nav a:hover {
color: #333333;
background: #eeeeee;
}
.info_message_nothin {
margin: 0px 0px 10px 0px;
padding: 20px 0px 20px 0px;
text-align: center;
font-size: 120%;
color: #666666;
border-top: 1px dotted #888888;
border-bottom: 1px dotted #888888;
background: #f9f9f9;
}
.novellist_toptable {
margin: 5px 0px 0px 0px;
padding-bottom: 5px;
border-bottom: 1px dotted #999999;
}
.novellist_toptable table{
table-layout : fixed;
}
dl.profile {
margin: 0px 0px 10px 0px;
border: 1px solid #cccccc;
border-top: 0px;
}
dl.profile dt{
padding: 5px 0px 5px 10px;
width: 97px;
line-height: 180%;
border-top: 1px solid #cccccc;
float: left;
}
dl.profile dd{
padding: 5px 10px 5px 10px;
width: 450px;
font-size: 110%;
line-height: 180%;
border-top: 1px solid #cccccc;
border-left: 1px solid #cccccc;
float: left;
}
dl.profile dd img {
max-width: 430px;
}
dl.profile .attention {
font-size: 90%;
}
.bloglist {
margin: 0px 0px 5px 0px;
padding: 10px;
background: #fdfdfd;
}
.bloglist p.title{
padding: 0px 5px 5px 5px;
font-size: 110%;
border-bottom: 1px solid #999999;
}
.bloglist p.ex{
padding: 10px;
line-height:170%;
color: #666666;
}
.bloglist p.info{
margin: 0px 5px 0px 5px;
padding: 5px 3px 0px 3px;
color: #666666;
border-top: 1px dotted #666666;
}
.comment_view{
margin: 5px 5px 5px 5px;
padding-bottom:5px;
border: 1px solid #cccccc;
background:#ffffff;
}
.comment_bun {
margin: 10px 20px 5px 20px;
font-size:110%;
line-height:170%;
text-align: left;
}
.comment_info {
padding: 5px 8px 5px 5px;
text-align: right;
}
.comment_delete {
padding: 5px 10px 5px 5px;
text-align: right;
background: url(../../../view/images/u_bg.gif) ;
}
.comment_delete a{
color: #3366aa;
}
.comment_idou{
padding: 3px 5px;
}
.comment_idou a:hover{
color: #0066aa;
text-decoration:underline;
}
.comment_idou:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.blogcomment_l {
width:140px;
float: left;
text-align: left;
}
.blogcomment_r {
width:140px;
text-align: right;
float: right;
}
.a_line {
margin: 5px 0px 0px 0px;
text-align: right;
clear: both;
}
h2 {
margin: 0px 0px 5px 0px;
padding: 5px;
font-size: 115%;
color: #333333;
border-top: 1px dotted #003366;
border-bottom: 1px dotted #003366;
background: #eef3f6;
}
h3 {
margin: 0px 0px 5px 0px;
padding: 5px;
color: #555555;
background: #f3f3f3;
}
h3 .allnovel {
margin-left: 10px;
font-size: 90%;
font-weight: normal;
color: #666666;
}
h2 .allcount {
margin-left: 10px;
font-size: 95%;
font-weight: normal;
color: #333333;
}
.attention {
color: #cc3333;
}
.gray {
color: #aaaaaa;
}
.pager_kazu{
margin: 0px 0px 3px 0px;
text-align: right;
color: #666666;
font-size: 95%;
}
.pager_idou{
margin: 0px 0px 5px 0px;
font-size: 110%;
text-align: center;
color: #333333;
font-weight: bold;
}
.pager_idou a{
margin: 0px 3px;
padding: 0px 5px;
color: #333333;
font-weight: normal;
}
.pager_idou a:hover{
color: #0066aa;
}
.pager_idou:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.space5{
margin: 0px 5px;
color: #444444;
}
.marginright{
margin-right: 5px;
}
.marginleft{
margin-left: 5px;
}
.letter_limit {
color: #666666;
line-height: 170%;
}
.button {
margin: 5px;
padding: 2px 5px 2px 5px;
font-weight: bold;
text-align: center;
font-size: 120%;
color: #666666;
border-top: 1px solid #aaaacc;
border-left: 1px solid #aaaacc;
border-right: 1px solid #6666aa;
border-bottom: 1px solid #6666aa;
background:#eeeeee;
}
.button:hover {
color: #334466;
cursor: pointer;
background: #ddeeee;
}
.info_message_error {
margin: 0px 0px 5px 0px;
padding: 20px 10px 20px 10px;
text-align: center;
font-size: 120%;
color: #dd0000;
line-height:180%;
border-top: 1px dotted #990000;
border-bottom: 1px dotted #990000;
background: #fdfafa;
}
.info_message_error p{
font-weight:bold;
color: #333333;
}
.error_comment {
margin: 10px 0px 0px 0px;
text-align:center;
font-size: 110%;
}
.form_mes {
margin: 0px 2px 10px 2px;
padding: 10px 20px;
line-height: 170%;
background: #fafdfd;
border-top: 1px dotted #66aaaa;
border-bottom: 1px dotted #66aaaa;
}
.input_title_mb {
padding: 5px;
background: #eef6f6;
border: 1px solid #aacccc;
font-weight: bold;
color: #555555;
}
.mes_mb {
margin: 0px 0px 10px 0px;
padding: 10px 20px;
border: 1px solid #aacccc;
background: #fefeff;
border-top: none;
font-size: 110%;
}
.center_box{
text-align:center;
}
p.description {
margin: 0 0 5px 5px;
}
.attention_suspended {
margin:15px 0;
}
.scraper_koukoku {
margin: 50px auto 0px auto;
width:160px;
text-align:center;
}
PCはこんな感じかな、これとモバイルで共通なクラスを利用できれば使えるかな。
基本的な仕様 （モバイル）
小説家になろうでは最初に端末がモバイルかPCか判断して読み込むCSSを変えてます。画面幅で変えているわけではない。しかもクラス名が変わる。
なお、タブレットはPCとしてカウント。スマホモバイルが該当。
画面幅で変わらないので横幅はモバイルに依存。こんなことも可能。
こんな感じにPCより大きくすることも可能。これ豆知識。この仕様マジ鬼畜ですね（割烹書く側としては）
両方で見栄えをよくするためには絶対値指定はできる限り避ける方向でいかないとだめなよう。（px指定はやばい）320px-1000pxくらいまで幅が変わる可能性があるので、あちらを立てればこちらが立たず状態になる。
ブログエリアはこんな感じ。
<div class="blog_textarea">
囲みはこれだけ。PCであった何重ものタグはどこへ行ったんだという感じですね。
なお、PCであったバグはなくなって、ちゃんと閉じる。div要素にしているからですね。
なんでスマホはDiv要素にしているのだろうか。PC版もしてほしい。
なのでスマホではレイアウトは崩れない。
blog_textareaのスタイル。
margin: 10px 0px 0px 0px;
padding: 10px;
color: #555555;
font-size: 90%;
line-height: 180%;
border-top: 1px solid #dddddd;
border-bottom: 1px solid #dddddd;
微妙にPCと設定が違う。
まぁ統一したいなら最初にdivを追加するのが無難。
CSS(初期値、Classで使えそうなものだけ抜き出し)
p {
margin: 5px 0px 10px 0px;
line-height: 150%;
}
img {
border-width: 0px;
border-style: none;
}
a {
text-decoration: none;
color: #00aa77;
}
a:visited {
color:#885577;
}
table {
border-collapse: collapse;
border-spacing: 0px;
}
li {
text-decoration: none;
list-style: none;
}
hr {
border: 1px solid #333333;
clear:both;
}
h1 {
margin: 0px;
padding: 0px;
font-size: 112%;
line-height: 160%;
font-weight:bold;
text-align: right;
}
h3.accordion_head {
margin: 7px 0px 5px 0px;
font-size: 85%;
color: #776633;
}
h3.yomou_title {
margin: 10px 0px 5px 10px;
font-size: 120%;
color: #776633;
}
h2 {
padding: 5px 0px 5px 30px;
font-size: 100%;
font-weight: bold;
line-height: 170%;
color: #663300;
}
.clr { clear:both; }
.top_button_a {
margin: 5px 5px 0px 0px;
padding: 10px 0px 13px 0px;
width: 53px;
float: right;
text-align: center;
-moz-border-radius:5px / 5px;
-webkit-border-radius:5px / 5px;
-o-border-radius:5px / 5px;
-ms-border-radius:5px / 5px;
border-radius:5px / 5px;
border:1px solid #66ccaa;
border-top:1px solid #aaddcc;
border-bottom:1px solid #669988;
background: #ccf0f0;
background: -moz-linear-gradient(#fafdfd,#aaeeee,#ccf0f0);
background: -webkit-gradient(linear, left top, left bottom, from(#fafdfd),color-stop(0.3, #aaeeee), to(#ccf0f0));
}
.top_button_a a{
font-size: 70%;
color: #333333;
font-weight:bold;
}
.top_button_m a{
font-size: 70%;
color: #333333;
font-weight:bold;
}
.icon_y {
margin: 5px 5px 0px 0px;
padding: 2px 0px 5px 0px;
width: 53px;
float: right;
text-align: center;
-moz-border-radius:5px / 5px;
-webkit-border-radius:5px / 5px;
-o-border-radius:5px / 5px;
-ms-border-radius:5px / 5px;
border:1px solid #ddd099;
border-top:1px solid #f3f066;
border-bottom:1px solid #aaaa99;
background: -moz-linear-gradient(#ffffff,#ffff99,#ffff66);
background: -webkit-gradient(linear, left top, left bottom, from(#ffffff),color-stop(0.3, #ffff99), to(#ffff66));
}
.icon_y a{
font-size: 70%;
color: #333333;
font-weight:bold;
}
ul.menu li {
margin: 0px;
font-size: 78%;
font-weight: bold;
float: left;
}
ul.menu a {
padding: 5px 10px;
color: #666666;
font-weight:bold;
display: block;
line-height:30px;
}
.menu:after {
content: "";
clear: both;
height: 0;
display: block;
visibility: hidden;
}
.attention{
color: #dd0000;
}
.input_attention{
color: #ff0000;
}
.opentab {
margin: 5px;
padding: 10px 5px 10px 5px;
background: url(/view/images/smp_opentab.gif) no-repeat right center;
}
.section {
margin: 10px 0px 35px 0px;
}
.section:after {
content: "";
clear: both;
height: 0;
display: block;
visibility: hidden;
}
.section_line {
font-size: 90%;
line-height: 150%;
border-top: 1px solid #dddddd;
border-bottom: 1px solid #aaaaaa;
}
.section_line2 {
font-size: 90%;
line-height: 150%;
border-bottom: 1px solid #aaaaaa;
}
.in_box {
margin: 10px;
font-size: 95%;
line-height: 150%;
}
.margin_box {
margin: 10px;
}
.margin_box2 {
margin: 5px 10px 5px 10px;
}
.margin_box_f {
margin: 10px;
font-size: 85%;
}
.center_box {
margin: 10px 0px 10px 0px;
padding: 0px;
text-align: center;
}
.smp_sidespace{
background: #ffffff;
line-height: 150%;
margin: 0px 10px;
padding: 0;
}
.button_box {
margin: 25px 0px 10px 0px;
padding: 0px;
text-align: center;
}
.list_normal {
margin: 20px 0px 0px 0px;
padding: 10px 10px 0px 10px;
border-top: 1px dotted #aacccc;
clear: both;
}
.list_normal li{
margin: 0px 0px 5px 0px;
padding: 0px 0px 0px 15px;
font-size:85%;
line-height: 35px;
background: url(../images/smp_arrow.gif) no-repeat left center;
}
.down {
margin: 5px 10px 5px 0px;
font-size:85%;
text-align:right;
clear: both;
}
.upper {
margin: 30px 10px 10px 0px;
font-size:85%;
text-align:right;
clear: both;
}
ul.list_g li {
margin: 0px;
padding: 0px;
font-size: 95%;
color: #000000;
display: block;
list-style: none;
line-height: 180%;
}
ul.list_g a {
color: #000000;
background: #ffffff;
display: block;
}
.dummy{
display:none;
}
.marginright{
margin-right: 15px;
}
.marginleft{
margin-left: 15px;
}
.marginleft25{
margin-left: 25px;
}
.button_log {
margin: 5px auto 5px auto;
padding: 5px 0px 5px 0px;
width:200px;
text-align: center;
font-size:120%;
font-weight:bold;
font-family: monospace;
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
color: #666;
-moz-border-radius:5px / 5px;
-webkit-border-radius:5px / 5px;
-o-border-radius:5px / 5px;
-ms-border-radius:5px / 5px;
border:1px solid #aabbaa;
background: -moz-linear-gradient(#ffffff,#ddeedd);
background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#ddeedd));
}
.button_useradd {
margin: 5px auto 5px auto;
padding: 5px 10px 5px 10px;
width:200px;
text-align: center;
font-size:110%;
font-weight:bold;
font-family: monospace;
color: #666;
-moz-border-radius:5px / 5px;
-webkit-border-radius:5px / 5px;
-o-border-radius:5px / 5px;
-ms-border-radius:5px / 5px;
border:1px solid #ddbb88;
background: -moz-linear-gradient(#ffffff,#ffff99,#ffff66);
background: -webkit-gradient(linear, left top, left bottom, from(#ffffff),color-stop(0.3, #ffff99), to(#ffff66));
}
.button_caution {
margin: 5px auto 5px auto;
padding: 5px 0px 5px 0px;
width:200px;
text-align: center;
font-size:110%;
font-weight:bold;
font-family: monospace;
color: #333;
-moz-border-radius:5px / 5px;
-webkit-border-radius:5px / 5px;
-o-border-radius:5px / 5px;
-ms-border-radius:5px / 5px;
border:1px solid #dd6666;
background: -moz-linear-gradient(#ffeeee,#ffaaaa,#cc5555);
background: -webkit-gradient(linear, left top, left bottom, from(#ffeeee),color-stop(0.3, #ffaaaa), to(#cc5555));
}
.button_go {
margin: 5px auto 5px auto;
padding: 5px 0px 5px 0px;
width:200px;
text-align: center;
font-size:110%;
font-weight:bold;
font-family: monospace;
color: #666;
-moz-border-radius:5px / 5px;
-webkit-border-radius:5px / 5px;
-o-border-radius:5px / 5px;
-ms-border-radius:5px / 5px;
border:1px solid #aabbaa;
background: -moz-linear-gradient(#ffffff,#ccddee);
background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#ccddee));
}
.bb {
font-weight: bold;
font-size: 105%;
}
.koukoku{
margin: 10px auto 10px auto;
text-align:center;
width:320px;
height:60px;
}
.koukoku_rectangle{
margin: 20px auto 20px auto;
text-align:center;
width:320px;
}
.koukoku_text{
margin: 10px 5px;
padding: 5px;
border-radius:5px / 5px;
border:1px solid #bbdddd;
}
.koukoku100{
margin:15px auto 20px auto;
text-align: center;
width:320px;
}
.mini_attention {
font-size: 80%;
color: #dd0000;
}
.clr_after:after {
content: "";
clear: both;
height: 0;
display: block;
visibility: hidden;
}
.opentab h3{background: url(/view/images/smp_opentab.gif) no-repeat right center #e6f0f6;
}
.headnav_level1 li {
margin: 0;
padding: 10px 0;
box-sizing: border-box;
width : -webkit-calc((100% - 110px) / 3) ;
width : calc((100% - 110px) / 3) ;
float: left;
text-align: center;
border-right:1px solid #b6bfb9;
border-bottom:2px solid #d6ecd6;
background: -webkit-linear-gradient(top, #d8f8d9, #ffffff);
background: linear-gradient(#d8f8d9, #ffffff);
}
.headnav_level1 a {
color:#666;
display: block;
}
.headnav_level1 span{
color:#666;
display: block;
}
li.fav_open,li.fav_close {
width: 110px;
}
li.other_open,li.other_close {
border-right:none;
}
.headnav_open span {
position: relative;
}
.headnav_open span:after {
content:"";
display:block;
width:5px;
height:5px;
border-bottom: #666 1px solid;
border-right: #666 1px solid;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
position:absolute;
right: 10px;
top:0;
bottom:0;
margin:auto;
}
li.headnav_close {
background: -webkit-linear-gradient(top, #ffffff, #caf7ca);
background: linear-gradient(#ffffff, #caf7ca);
display: none;
}
.headnav_close span {
position: relative;
}
.headnav_close span:after {
content:"";
display:block;
width:5px;
height:5px;
border-top: #666 1px solid;
border-right: #666 1px solid;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
position:absolute;
right: 10px;
top:6px;
margin:auto;
}
.headnav_level2 {
padding:10px;
display:none;
}
.headnav_level2 li {
margin: 0 0 10px 0;
width: 50%;
text-align: left;
display: block;
float:left;
box-sizing: border-box;
}
.headnav_level2 a {
padding: 5px 5px 5px 15px;
display: block;
position: relative;
}
.headnav_level2 a:after {
content:"";
display:block;
width:0;
height:0;
border-style: solid;
border-width: 5px 0 5px 8.7px;
border-color: transparent transparent transparent #bbb;
position:absolute;
left: 0;
top:0;
bottom:0;
margin:auto;
}
.prf_list {
margin: 0px 10px 0px 10px;
padding: 10px 0px 10px 0px;
font-size:90%;
border-bottom:1px solid #ddddee;
}
.prf_selfintroduction {
padding: 10px 10px 15px 10px;
line-height:150%;
font-size:90%;
border-bottom:1px solid #ddddee;
}
a.more {
display:block;
}
.prf_sitename {
margin: 5px 0px 3px 0px;
font-size:130%;
font-weight:bold;
color: #00aa77;
}
.prf_list img {
margin: 5px 0;
max-width: 100%;
}
.prf_siteurl {
margin: 5px 0px 5px 0px;
font-size:100%;
color: #00aa77;
word-break: break-all;
}
.novel_list {
margin: 5px 10px 0px 10px;
padding: 5px 0px 5px 0px;
line-height:130%;
border-bottom:1px dotted #aaaaaa;
word-break: break-all;
}
.novel_type {
width:45px;
float:left;
font-size: 85%;
}
.novel_genre {
width:200px;
font-size: 85%;
float:left;
}
.novel_title {
padding: 3px 0px 2px 0px;
font-size: 110%;
clear: both;
}
.date {
font-size: 80%;
color: #666666;
clear: both;
}
.series_no {
float:left;
}
.series_cnt {
font-size: 90%;
padding-left: 70px;
}
.novel_list span.hyoka_date {
color: #999999;
line-height: 120%;
font-size: 82%;
}
h2 {
clear: both;
padding: 5px 5px 5px 15px;
font-size: 85%;
font-weight: bold;
color:#ffffff;
background: #333333;
border-bottom:1px solid #aabbbb;
}
h2.mytop {
color:#666666;
clear: both;
background: #e6f0f6;
}
h2 a {
font-size: 95%;
}
h2 a:visited {
color: #00aa77;
}
h3 {
margin: 0px 0px 5px 0px;
padding: 5px 5px 5px 10px;
font-size: 85%;
font-weight: bold;
color:#666666;
background: #e6f0f6;
clear: both;
border-bottom:1px solid #aabfbb;
}
h3 a {
font-size: 95%;
}
.a_line {
padding: 10px 10px 10px 0px;
text-align: right;
font-size: 80%;
clear: both;
}
.page_bar {
margin:10px 0px 0px 0px;
padding: 0px 5px 10px 5px;
font-size:90%;
text-align: center;
border-bottom: 3px solid #99bbcc;
}
.page_bar a {
margin: 0px 10px 0px 0px;
padding: 5px 5px 5px 5px;
}
.crumb {
padding: 10px 5px 5px 10px;
font-size:80%;
background: #f3f3ee;
border-bottom: 1px solid #ccddee;
}
.a_line {
margin: 15px 0px 0px 10px;
text-align: left;
font-size: 90%;
clear: both;
}
.novel_ex {
margin: 5px 0px 5px 0px;
font-size: 85%;
line-height:150%;
color:#666;
}
.novel_point {
margin: 5px 0;
display: flex;
font-size: 85%;
line-height: 1.5;
color:#666;
}
.novel_info {
margin: 10px 0px 5px 0px;
font-size: 85%;
line-height:150%;
clear: both;
}
.novel_key {
margin: 0px 10px 0px 0px;
}
.novel_key span{
margin: 5px 5px 0px 0px;
display:inline-block;
}
.blog_title {
padding: 10px 10px 5px 10px;
font-size: 110%;
}
.blog_date {
margin: 0px 0px 0px 10px;
font-size: 80%;
color:#999999;
}
.novel_list span.blog_date {
margin: 0px;
}
.blog_textarea {
margin: 10px 0px 0px 0px;
padding: 10px;
color:#555555;
font-size: 90%;
line-height:180%;
border-top:1px solid #dddddd;
border-bottom:1px solid #dddddd;
}
.blog_textarea img {
max-width:100%;
height:auto;
}
.my_blog_l {
margin: 10px 10px 10px 10px;
width: 120px;
float: left;
font-size: 80%;
text-align: left;
}
.my_blog_r {
margin: 10px 10px 10px 10px;
width: 120px;
float: right;
font-size: 80%;
text-align: right;
}
.blog_name {
font-size: 85%;
}
.comment_delete {
width: 60px;
font-size: 80%;
text-align: right;
float: right;
}
.comment_date {
width: 200px;
font-size: 80%;
color:#999999;
float: left;
}
.gray {
color: #aaaaaa;
}
.dummy{
display:none;
}
.opentab {
margin: 10px 0px 0px 0px;
padding: 5px 0px 5px 0px;
height: auto;
line-height: 100%;
font-size: 80%;
background: url(/view/images/smp_opentab.gif) no-repeat right center #f0f6f6;
}
.koukoku_footer {
margin: 30px auto 10px auto;
width:320px;
text-align:center;
}
.koukoku_rectangle {
margin: 20px auto 0px auto;
text-align:center;
width:300px;
}
.novel_list{
overflow: hidden; word-break: break-all; letter-spacing: 0px;
margin: 5px 5px 5px 5px;
padding: 5px;
}
p.description {
margin: 5px 0 0 10px;
font-size:85%;
}
.margin_box2 {
margin: 20px;
padding-bottom:10px;
line-height: 150%;
font-size:95%;
}
.margin_box2 table {
margin: 10px 0 0 0;
width:100%;
box-sizing: border-box;
}
.margin_box2 table th,.margin_box2 table td {
border:1px solid #999;
padding:5px;
box-sizing: border-box;
text-align:left;
}
.margin_box2 table th {
width:70px;
background: #eef6f6;
}
.attention_suspended {
margin:10px;
}
雑感
設定されているclassを使いたい場合はPCとモバイルが違うことを理解する。
またスタイルが変更される恐れがあることを理解して使う。
使う場合は複数のclassをしているすること。
なお、プレビュー画面では読み込んでいるcssが違うので、本番環境で見え方が変わる（なんなの……。プレビューとはいったい。まぁクラス使う変態さんなんか想定していないということでしょうね）
影響されないためにはがっちりスタイルをインラインで定義させること。
また絶対値指定はNG、なるべくemか%で指定すること。そうじゃないとPCとモバイルでずれる。
これらを総合すると、割烹エディターではClass指定はしない方が無難。
運営側で変わることもあるので、それに依存するのはサービス的にまずい。
なのですべてインラインに埋め込むようにする。
なお、プレビューではなろうのCSSを埋め込めば似たような画面が作れるのであとで適用されているスタイルを抜き出してCSSファイルを作ることにする。
