yukiusagiさんのページ

記事レイアウトのらくがき帳

　過去に作ったhtmlアイテムを保管しています。
　自分用覚え書きですが、記事をデザインする参考にでもしていただけたら幸いです。

見出しのレイアウト

「見出しの」と書いてますが段落の<p>〜</p>やグループの<div></div>、テーブルの<table></table>など、どれについてもstyle設定の基本は同じ。

• 緑色の下線を消したい　　　　　：style="border: none;"
• 箇条書きの緑色の点を消したい　：style="background-image: none;"
• 緑色の点を別のお絵カキコに差し替えたい：
  　　　　　style="background: url(/oekaki/お絵カキコの番号.png) no-repeat 5px;"
• 背景に色をつけたい　　　　　　：style="background: 色名;"
• 文字を中央揃え・右揃えにしたい：style="text-align: center;" or "text-align: right;"
• フォントサイズを変えたい　　　：style="font-size: 大きさ（3, 5pt, smal, 120%など）;"
• 周囲のラインを設定したい　　　：style="border: 設定したい要素;"
• 周囲との隙間を空けたい　　　　：style="margin: 大きさ（1px, 1emなど）;"
• 枠の中に隙間を空けたい　　　　：style="padding: 大きさ（1px, 1emなど）;"
• border、margin、paddingを４辺別々に設定したい：
  　　　　　border-top, border-right, border-bottom, border-leftといったように後ろに方向を書く

過去に作ったもの

ゆきうさぎ

<h2 style="background: url(/oekaki/69449.png) no-repeat 5px; text-indent: 35px; padding: 2px; border-bottom: solid 1px green;">ゆきうさぎ</h2>

遊☆戯☆王

<h2 style="background: url(/oekaki/56689.png) no-repeat 5px; border-bottom: 3px solid #4b3724; border-right: 3px solid #5d5027; border-top: 3px solid #e2cd8d; border-left: 3px solid #cab872; padding: 2px; color: #ffffff; text-indent: 35px;">遊☆戯☆王</h2>

yukiusagiのユーザ記事

<h2 style="background: none; text-indent: 5px; padding: 2px; border-bottom: solid 2px #454791; border-left: solid 10px #454791;">yukiusagiのユーザ記事</h2>

ミスドカラー

<h2 style="border-left: 10px solid red; border-bottom: medium none; padding: 5px; background-color: #eab714; text-indent: 10px; font-size: 120%; margin-top: 30px; margin-bottom: 20px; background-image: none;">ミスドカラー</h2>

ピンク

<h2 style="border-bottom: 2px solid #ff00ff; border-top: 2px solid #ff00ff; border-right: 2px solid #ff00ff; border-left: 15px solid #ff00ff; padding: 2px; background-image: none; background-color: #fac6f1; margin-top: 10px; text-indent: 5px; font-size: 14pt;">ピンク</h2>

中央表示（画像無し）

<h2 style="padding: 5px; text-align: center; background-color: #333333; border-bottom: none; background-image: none; color: #feebfb;">中央表示（画像無し）</h2>

偽見出しの作り方

見出しじゃない（<h2>等を使わない）けど見た目は見出しにしか見えない偽見出し。
上のメニューに表示させたくないけど見出しっぽくしたい時に便利。

divを使用しています。

<div style="border-bottom: 1px solid #99cc00; font-size: 15pt; margin-bottom: 5px;">
<img style="margin-right: 5px; margin-top: 10px;" src="/oekaki/17003.png" height="16" width="16" />
    <span style="color: #424242;"><b>divを使用しています</b></span>
 </div>

pを使用しています。

<p style="border-bottom: 1px solid #99cc00; font-size: 15pt; margin-bottom: 5px; margin-left: 0px;"> <img style="margin-right: 5px; margin-top: 10px;" src="/oekaki/17003.png" height="16" width="16" />
    <span style="color: #424242;"><b>pを使用しています。</b></span>
</p>

スペース削減用枠

スペース縮小に便利なアイテム。

<div style="border: 1px solid gray; padding: 0em; overflow: auto; margin-left: 10px; margin-bottom: 20px; height: 80px; width: 520px;">
    スペース縮小に便利なアイテム。
</div>

その他の枠

飾り枠。<div>を二重に重ねて、内側の<div>の枠線を破線にしています。

<div style="border: 2px solid #454791; margin: 5px; padding: 5px; background-color: #e2e2f2;">
    <div style="border: dashed 1px #454791; padding: 10px;">
        【 ここに文章 】
    </div>
</div>

角丸枠。幅の違う<div>を重ね、「overflow: hidden;」ではみ出た部分を表示しないように設定しています。

<div>
    <div style="margin: 0 5px; height: 1px; overflow: hidden; background-color: #fefe7b;"></div>
    <div style="margin: 0 3px; height: 1px; overflow: hidden; background-color: #fefe7b;"></div>
    <div style="margin: 0 2px; height: 1px; overflow: hidden; background-color: #fefe7b;"></div>
    <div style="margin: 0 1px; height: 2px; overflow: hidden; background-color: #fefe7b;"></div>
</div>
<div style="padding: 5px; background-color: #fefe7b;">
    【 ここに文章 】
</div>
<div>
    <div style="margin: 0 1px; height: 2px; overflow: hidden; background-color: #fefe7b;"></div>
    <div style="margin: 0 2px; height: 1px; overflow: hidden; background-color: #fefe7b;"></div>
    <div style="margin: 0 3px; height: 1px; overflow: hidden; background-color: #fefe7b;"></div>
    <div style="margin: 0 5px; height: 1px; overflow: hidden; background-color: #fefe7b;"></div>
</div>

 

（主に見た目的に）こだわりのある記事一覧

あくまでも「当時の自分がんばった」ってだけです。どんどん変えちゃってください。
どう変わっていくかが楽しみでもあります。

• 屍鬼
• ATOKたん
• お絵カキコ =ドーナツ祭り=
• カーリング
• 髙橋大輔
• 都道府県キャラ萌え萌え化計画
• 長野県
• バンクーバーオリンピック
• ブラックマジシャンガール
• 遊戯王OCGカードリスト
• 遊戯王関連項目の一覧