フォーラムスタイル記事

序文

C-takeさんからの[[include :scp-jp-sandbox2:inc:addspecialcss]]で簡単にページにフォーラムスタイルで記事を書くのが可能になりました。だが、ウェブデザイナーとしてもっと完璧なスタイルを求めるのは相当不思議なものではないはずです。だから分析してみました。

難解Wikidot構文への紹介

記事の中にフォーラムを！

コード

.fake-link {
color: #b01;
text-decoration: none;
background: transparent;
cursor:pointer;
}
 
.fake-link:hover {
text-decoration: underline;
background-color: transparent;
cursor:pointer;
}
 
.dummyDescription{
line-height: 0em;
border: 1px solid #CCC;
margin: 1em 4em;
padding: 0.5em;
background-color: #F5F5F5;
overflow: hidden;
height: 100%;
border-radius: 10px;
box-shadow: 0 1px 5px rgba(0,0,0,.15),
inset 0 1px 0 rgba(255,255,255,.8),
inset 0 10px 5px rgba(255,255,255,.25),
inset 0 -15px 30px rgba(0,0,0,.1)
}
 
.dummyOptions{
text-align: right;
margin: 0.2em 4em;
color: #b01;
}
 
.dummySummaySentence{
padding:0.5em 0em 1em 0em;
}
 
.dummySummaySentence:before{
content:"サマリー";
display:block;
color: #777;
font-size: 87%;
bottom:0em;
}
 
.dummyHead{
display:block;
color: #777;
font-size: 87%;
}
 
div.DummyNew-post {
    text-align: left;
    margin: 20px 0;
}
div.DummyNew-post .fake-link{
    border: 1px solid #999;
    background-color: #F7F7F7;
    padding: 5px 10px;
    font-size: 100%;
    font-weight: bold;
}
 
.DummyForumTitle{
padding-top: 0.5em; /* Firefox bug? ←I don't know :-P*/
font-size: 200%;
color: #901;
padding: 0;
font-weight: normal;
}
 
.DummyForumTitle p{
padding-top: 0.5em;
display:block;
padding:0px 0px 1px 0px;
margin:0;
border-bottom: 1px #999 solid;
 
}
 
.DummyForumTitle h2{
padding-top: 0.5em; /* Firefox bug? ←I don't know :-P*/
font-size: 100%;
color: #901;
display:block;
padding:0px 0px 1px 0px;
border-bottom: 1px #999 solid;
font-weight: normal;
}
 
.DummyForumTitle ul{
display:block;
padding:0em;
border-color: #bbb;
font-size:50%;
}
 
.DummyForumTitle ul li{
cursor:pointer;
color: #b01;
display:inline;
background: transparent;
padding:0;
 
}
 
.DummyForumTitle ul li:hover{
text-decoration: underline;
background-color: transparent;
cursor:pointer;
 
}
 
.DummyForumTitle ul li:after {
    content:" » ";
color:#000;
text-decoration:none;
}
 
.DummyForumTitle ul li:after {
    content:" » ";
color:#000;
text-decoration:none;
}
 
.DummyForumTitle ul li:after:hover {
text-decoration:none;
}
 
.DummyForumTitle ul li:last-child{
text-decoration:none;
color:#000;
cursor:auto;
}
 
.DummyForumTitle ul li:last-child:hover {
text-decoration:none;
color:#000;
}
 
.DummyForumTitle ul li:last-child:after {
    content : none ;
}
 
.post-container .dummyOptions{
margin: 0.2em 0em;
}
 
.post-container .dummyOptions .fake-link{
margin:0; padding:0;
color: #77A;
}
 
.DummyStatistics{
margin: 0.5em 0;
padding: 0 0.5em;
font-size: 87%;
color: #666;
text-align: right;
float: right;
line-height: 1.5em;
}
 
.Dummytitle{
font-weight: bold;
font-size: 1.2em;
}
 
.dummyPostHead{
line-height: 0em;
padding: 0.5em 1em;
background-color: #eee;
background: linear-gradient(to right, #eee, #eeecec);
box-shadow: inset 2px 3px 6px rgba(0,0,0,.15);
border-radius: 5px 5px 0 0;
}
 
.dummyPostHead p{
margin:0;
padding:0;
}
.dummyContent{
 
}
 
.dummyContent:after{
    content: "返信 オプション";
    display:block;
    font-weight:bold;
    color: #77A;
    text-align:right;
    padding: 10px 0 10px 0;
}
 
/*隠し機能*/
.CustomTabR .yui-navset{
    display: -webkit-inline-flex;
    display: inline-flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    vertical-align: top;
    width:100%;
    border-left:none;
}
 
.CustomTabR .yui-navset ul {
   border-bottom:none;
    padding:0;
    border-right:solid #333 2px;
}
 
.CustomTabR .yui-navset ul li{
    display: block;
}
.CustomTabR .yui-navset .yui-nav li{
margin:0;
}
 
.CustomTabR .yui-navset ul li.select{
    display: block;
    margin:0;
    border-radius:0;
}
 
.CustomTabR  .yui-content{
        background-color:#F6F6F6;
        display:inline-block;
        border:solid #000 1px;
}
 
.CustomTabR  .yui-content div{
    width:100%;
    border:none;
    background-color:transparent;
}
 
.CustomTabRJ .yui-navset{
    display: -webkit-inline-flex;
    display: inline-flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    vertical-align: top;
    width:100%;
}
 
.CustomTabRJ .yui-navset ul {
   border-bottom:none;
display:block;
width:2.5em;
border-right:solid #333 2px;
    padding:0;
    margin:0;
}
 
.CustomTabRJ .yui-navset .yui-nav li{
    display: block;
width:100%;
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
text-orientation: upright; 
margin:0;
}
 
.CustomTabRJ .yui-navset ul li.select{
    display: block;
    margin:0;
    border-radius:0;
}
 
.CustomTabRJ  .yui-content{
    border:solid #333 1px;
    display:block;
width:calc(100% - 2.5em);
}
 
.CustomTabRJ  .yui-content div{
    width:98%;
    border:none;
    background-color:transparent;
        padding: 0px 5px 0px 10px;
}
 
@media all and (-ms-high-contrast:none) {
.CustomTabRJ .yui-navset .yui-nav li {
width:100%;
height:8em;
overflow-y:hidden;
}
.CustomTabRJ .yui-navset ul li em{
width:100%;
height:8em;
    overflow:hidden;
}
.CustomTabRJ .yui-navset ul {
    overflow:hidden;
}
}
 
_:-ms-lang(x), .CustomTabRJ .yui-navset ul li{
width:100%;
height:8em;
    overflow:hidden;
 
}
 
_:-ms-lang(x), .CustomTabRJ .yui-navset ul li em{
width:100%;
height:8em;
    overflow:hidden;
}
 
_:-ms-lang(x), .CustomTabRJ .yui-navset ul {
    overflow:hidden;
}
 
.CustomTabRJC .yui-navset{
    display: -webkit-inline-flex;
    display: inline-flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    vertical-align: top;
    width:100%;
}
 
.CustomTabRJC .yui-navset ul {
   border:none;
display:block;
width:2.5em;
    padding:0;
    margin:0;
    position:relative;
    background-color:#333;
 
}
 
.CustomTabRJC .yui-navset .yui-nav li{
    display: block;
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
text-orientation: upright; 
margin:0;
padding:0;
width:100%;
 
}
 
.CustomTabRJC .yui-nav li a{
color:#333;
display:block;
    border:none !important;
    padding:0;
    margin:0;
}
 
.CustomTabRJC .yui-nav li a em{
        background-color:#DADADA;
display:block;
color:#333;
width:100%;
-moz-box-shadow: -3px 0px 2px 0px rgba(0,0,0,0.4) inset;
-webkit-box-shadow: -3px 0px 2px 0px rgba(0,0,0,0.4) inset;
-o-box-shadow: -3px 0px 2px 0px rgba(0,0,0,0.4) inset;
-ms-box-shadow: -3px 0px 2px 0px rgba(0,0,0,0.4) inset;
}
 
.CustomTabRJC .yui-navset ul li.select{
    border-radius:0 !important;
    border-right:none !important;
z-index:1000;
}
 
.CustomTabRJC .yui-nav li.selected a{
 
        background-color:#F6F6F6;
    border:none !important;
    /*background:*/
}
 
.CustomTabRJC .yui-nav li.selected a em{
        background-color:#F6F6F6;
z-index:1000;
position:static;
width:100%;
color:#333;
overflow-y:hidden;
border-left:solid #000 1px;
border-bottom:solid #000 1px;
    -moz-box-shadow: none;
-webkit-box-shadow: none;
-o-box-shadow: none;
-ms-box-shadow: none;
}
.CustomTabRJC .yui-nav li.selected a em:after{
        content:" ";
        background-color:#F6F6F6;
display:block;
height:100%;
width:3px;
position:absolute;
right:-1px;
top:0px;
z-index:1000;
border-top:solid #000 1px;
 
}
 
.CustomTabRJC  .yui-content{
    border:none;
    background-color:#F6F6F6;
    width:calc(100% - 2.5em);
    border:solid #333 1px;
    margin:0;
}
 
.CustomTabRJC  .yui-content div{
    width:98%;
    padding: 0px 5px 0px 10px;
    border:none;
    background-color:transparent;
}
 
@media all and (-ms-high-contrast:none) {
.CustomTabRJC .yui-navset .yui-nav li {
width:100%;
height:8em;
overflow-y:hidden;
}
.CustomTabRJC .yui-navset ul li em{
width:100%;
height:8em;
overflow-y:hidden;
}
 
}
 
_:-ms-lang(x), .CustomTabRJC .yui-navset ul li{
width:100%;
height:8em;
overflow-y:hidden;
}
 
_:-ms-lang(x), .CustomTabRJC .yui-navset ul li em{
width:100%;
height:8em;
overflow-y:hidden;
}

---

[[Module comments]]