HTML

[PR]

×
[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。
リストタグで縦レイアウトのナビをつくる
リストの奇妙なインデント

リストを使うと自動的にインデントされる。便利といえば便利だし親切なのだが、作成したdivからはみ出るぐらいインデントされると溜め息をつきたくなる。
授業でmarginに負の値をいれて（ネガティブマージンってやつですか？）対応していた記憶があるのだが、なかなか気持ち悪い。リストへのヘイトがどんどん増えていく。

ulに色々指定してあげよう

ナビゲーション用にdivを作ってあって、なおかつそこにリストしか入らない場合に以下のように位置調整できることがわかった。他の条件下でどうなるかは未検証だからホショウはできない。
取り敢えず、ulタグをガッチリ指定で固めてあげる方法である。
1. ボックス > Width等を指定。
  どのぐらいの高さになるか分からない場合はWidthだけ入れておく。
2. paddingを上下左右全て指定。
  0なら0で全部指定してやる。上と左を0にすればビタッとdivの内側についてくれる。
3. marginは0で。
  別段marginは指定しない。
今回はdivの幅がリストの幅より大きかったが、多分divの幅とリストの幅が同じでもいけると思う。
あの余計なインデントはpaddingだった…ということなのだろうか。よくわからない。解決すればいい。終わりよければ全てよいのだ。
この記事をシェアする：ツイート
PR
- HTML
- 2014/02/17 04:32
- 0
ボックスシャドウを使う

コリスさんの記事
[CSS]box-shadowを使って、紙がふわりと浮かんだようなエフェクトをつけるスタイルシートのまとめ
HTMLクイックリファレンス
box-shadow …… ボックスに影をつける

以上のページを参照すれば、新しめのブラウザであればボックスシャドウを付けることができる。
また、どの順番でどんな要素を指定するか把握できれば思い通りに弄れるはず。

少しやってみて思ったのは、水平・垂直方向をそれぞれ０に指定したとき、垂直方向はボックスのやや上気味に設定されているような気がした。
なので、上下左右均一にシャドウが出るようにしたい場合は僅かに垂直方向の値を正に入れて下げてあげると良い塩梅になると思う。

この記事をシェアする：ツイート
- HTML
- 2014/02/17 04:10
- 0
リストタグによるナビゲーション作成

リストタグのメモにて、見出しタグを併用して作ることのメモをしたが、よくよく考えたらクラス指定でどうにかできそうだ。

<ul>
<li class="section">大カテゴリ</li>
<li class="sub">小カテゴリ</li>
<li class="sub">小カテゴリ</li>
</ul>

こんな具合である。
卒業研究でやったときはclassを指定しなおすのが億劫なぐらい進めていたので実行しなかったが…

この記事をシェアする：ツイート
- HTML
- 2014/02/16 14:39
- 0
リストタグのメモ

リストタグの基本

　<ul>
　<li></li>
　<li></li>
　</ul>

これで階層のないリストが作成できる。

多階層のリストタグ

　<ul>
　 <li>
　　 <ul>
　　 <li></li>
　　 <li></li>
　　</ul>
　 </li>
　</ul>

ってやると、１つ目の<li>で括ったリストが１つ目の階層を作って、その中の<ul><li>で、１つ目の階層の中のリストを作ることができる。
ただしCSSでの装飾等が面倒になる場合があるので、

　<h○></h○>
　　<ul>
　　<li></li>
　　<li></li>
　　</ul>
　<h○></h○>
　　<ul>
　　<li></li>
　　<li></li>
　　</ul>

このように見出しタグを併用するとまとまるかもしれない。

この記事をシェアする：ツイート
- HTML
- 2014/02/14 17:22
- 0