気ままにWeb制作しんこうちゅー » Web制作における雑多な知識その5

Web制作における雑多な知識その5

Web制作

CSS内のコメントアウト(機能しなくなる)
/*
.mado_so {
border: 2px solid #FF33FF;
padding: 5px 8px;
background-color: #FFCCFF;
font-weight: bold;
font-size:140%;
}
*/

<!--角丸テーブル-->
.rc-box-out{
  border: 3px #f47 solid;
  /*fx*/
  -moz-border-radius: 12px;
  /* chrome */
  -webkit-border-radius: 12px;
  /* ie9 */
  border-radius: 12px;
  padding : 10px 20px;

 /* text-indent:1em*/
  margin-top: 0.5em;
  margin-bottom: 1em;
  background-color:#fffaff;
}
.rc-box-in{
  border: 3px #e80 solid;
  /*fx*/
  -moz-border-radius: 12px;
  /* chrome */
  -webkit-border-radius: 12px;
  /* ie9 */
  border-radius: 12px;
  padding : 10px 20px;

 /* text-indent:1em*/
  margin-top: 0.5em;
  margin-bottom: 1em;
  background-color:#ff9;
}

      <div class="rc-box-in">
      ☆ポイント☆
        <ul>
        <li>あいうえお。</li>
        <li>かきくけこ。</li>
        <li>さしすせそ。</li>
        </ul>
      </div>

・書き方

<p class="picbox-c" style="align:center">
↑なぜ効かない?
<p class="picbox-c" align="center">
↑こう書けば効く

<div class="119-box-in01"> 頭に数字は× 
<div class="min-box-in01"> これなら○


・改行しても一文字分あける例
↓
<div style="margin-left:20px">
  <p style="text-indent:-1em">
  ※これは<br />
    テストです。</p>
</div>
<p style="text-indent:0em"> 0でも効果アリ
<p style="text-indent:-1em">

例2
↓
<p style="text-indent:-1em;margin-left:20px">※これも</p>
<p style="margin-left:20px">テストです。</p>


・ページ全体の中央寄せページの中味を全てセンタリングしたい場合。
たとえば
<body>
  <div id="main>
    ここに800pxのブログを表示したい場合
  </div>
</body>

body {
text-align:center;
}
#main{
margin:0 auto;
width:800px;
}
Share on Facebook
このエントリーをはてなブックマークに追加
はてなブックマーク - Web制作における雑多な知識その5
Post to Google Buzz
Bookmark this on Yahoo Bookmark
Bookmark this on Livedoor Clip
Share on FriendFeed
[`grow` not found]

« »

コメントは停止中です。

安心・確実の合宿免許なら【免許いちばん!!】