メニューをカッコ良くできるかな


09/03/05 AM 9時ごろ  ・コメント(0)

ちょっと、ページを格好良くできればと思い、CSSをいじっていました。
縦型と横型を作っていたので、メモメモ・・・・。 とりあえず画像は使わずにシンプル作成。

もっとキレイに書けたら良いんですが、僕の中ではこのあたりが精一杯・・・。
paddingwidthで、枠の大きさを調整できます。
書き終わったら、top_linkのは、float(回り込み)をしているので、<br class="clear" />で、回り込みを解除。 やっぱりCSSは難しい・・・・。

1. 横並びのリストを使ってみました。

MovableType

ul.top_link { 
  margin: 0.1em 0;
  padding: 0; 
}
ul.top_link li {
  list-style-type: none;
  float: left; 
  padding: 0;
  margin: .1em 0;
}
ul.top_link li a {
  display:block;
  font-weight: 800;
  font-family:Arial, Helvetica, sans-serif;
  font-size: 12px;
  color: #000;
  padding: .4em .8em;
  margin-bottom: 2em;
  background: #FFF;
  border: solid 1px #CCC;
  border-left: solid 6px #CCC;
}

ul.top_link li a { text-decoration: none; }
ul.top_link li a:visited { color: #000; }
ul.top_link li a:hover {
  text-decoration: none;
  color: #FFF;
  background: #333;
  border-left: solid 6px #cc0033;
}

2. 縦並びで、マウスを置いた時にふせんを貼ってる様にしてみました。

MovableType
ul.side_link { 
  margin: 0.1em 0;
  padding: 0; 
}
ul.side_link li {
  display:inline;
  list-style-type: none;
  padding: 0;
  margin: 0;
}
ul.side_link li a {
  text-align: right;
  display: block;
  width: 88px; 
  font-weight: 800;
  font-family:Arial, Helvetica, sans-serif;
  font-size: 12px;
  color: #000;
  padding: .4em 1.3em .4em 0;
  margin 0;
  border: solid 1px #CCC;
  border-left: solid 8px #008000;
}

ul.side_link li a:hover {
  background: #e5f9ff;
  width: 78px; 
  color: #000;
  border: solid 1px #CCC;
  border-left: solid 18px #0066FF;
}


ul.side_link li a { text-decoration: none; }
ul.side_link li a:visited { color: #000; }

 お知らせ&関連エントリー

next.gif  [書籍] 経済は感情で動く( はじめての行動経済学)
back.gif  [第1期] 浪花おふくろファンドさん

おすすめ投資入門Book
あたりまえだけど誰も教えてくれない お金のルール はじめての積立て投資1年生 月1万円からコツコツはじめて増やせるしくみがわかる本 (アスカビジネス) お金の教室—二十歳の君に贈る「マネー運用論」 30代からはじめる投資信託選びでいちばん知りたいこと 半値になっても儲かる「つみたて投資」 入社1年目の教科書 まぐれ—投資家はなぜ、運を実力と勘違いするのか


コメントお待ちしています♪


             

名前  : 

メールアドレスf  : (※表示されません。)

ホームページ  : 



Facebookでのコメントもお待ちしています




トラックバック

 URL:/1658
 ※ エントリーのリンクが確認できないと公開されませんのでご注意ください。


自己紹介

アイコン プロフィール
mail.gif  icon-twitter  icon-flickr  icon-flickr  feed  はてなブックマーク  icon-flickr  icon-twitter  blip  icon-facebook  Instagram

この日記のはてなブックマーク数

follow us in feedly

著書      監修
あたりまえだけど誰も教えてくれない お金のルール はじめての積立て投資1年生 月1万円からコツコツはじめて増やせるしくみがわかる本 (アスカビジネス)



相互リンクさんです。

おかげ様で、たくさんの優良サイトとリンクを結ばせて頂きました。
ぜひ、訪れてみてください!

リンクをランダムで表示しています。

アイコン ほかにも必読サイトございます


最近の記事とコメント

 

メデイア掲載履歴
[掲載] 中日新聞に掲載されまし
[出版] 確定拠出年金活用ガイド
[掲載] 中日新聞に掲載されまし
ネットマネー6月号に掲載して頂き
「日経ヴェリタス」に年末NISA
無事、セゾン投信セミナー終了♪
モーニングスターの「NISA本命
ネットマネー8月号に掲載して頂き
Gainerに掲載して頂きました
ネットマネー6月号に掲載して頂き
12/27の読売新聞に掲載されま
「日経ヴェリタス」に掲載されまし
日経新聞に取材された内容が掲載さ
ダイヤモンドZaiで本を5名様に
かえるとフッシーの「誰も教えてく
インベストライフ 2012年7月
ネットマネー8月号に掲載して頂き
[出版] あたりまえだけど誰も教
[書籍] はじめての積立て投資1
セゾン投信「投資の達人からの応援
ひふみ投信セミナーを終えての感想
ひふみ投信:大阪セミナーのまとめ
BLOGOS financeさん
日経新聞の夕刊に掲載されました
[書籍] ベスト投資信託ガイド

当サイトのおすすめ記事

カスタム検索

 ■ 海外ETFのまとめ
 ■ 投資書籍の評価一覧
 ■ タグ:読書
 ■ タグ:企業分析
 ■ タグ:企業価値