読者です 読者をやめる 読者になる 読者になる

ただし(仮)のメモ

平塚在住,無職,うつ病,孤独

CSSのお勉強(リスト、表)

listの装飾方法

以下の4種類があります。

ul li {
    list-style-type: none;  /*リスト記号*/
    list-style-image: url("ico_arrow.png"); /*リスト記号の画像*/
    list-style-position: outside; /*リスト記号の位置*/
    list-style: disc url("ico_arrow.png") inside;/*上記3つを同時指定*/
}

リスト記号の種類と表示

  • none
  • disc
  • circle
  • square
  • decimal
  • decimal-leading-zero
  • lower-roman
  • upper-roman
  • lower-alpha
  • upper-alpha
  • hiragana
  • katakana

リスト記号の画像と位置

  • 桃桃桃桃桃桃桃桃桃桃桃桃桃桃桃桃桃桃桃桃桃桃桃桃桃桃桃桃桃桃桃桃桃桃桃桃桃桃桃桃桃桃桃桃桃桃桃桃桃桃桃桃桃桃桃桃桃桃桃桃
  • 桃桃桃桃桃桃桃桃桃桃桃桃桃桃桃桃桃桃桃桃桃桃桃桃桃桃桃桃桃桃桃桃桃桃桃桃桃桃桃桃桃桃桃桃桃桃桃桃桃桃桃桃桃桃桃桃桃桃桃
上がinside設定、下がoutside設定、画像ははてなブログにアップしてURLは
コチラを利用して取得しました。
ブックマークレットとかいう物らしいのでちょっと調べてみたところ理解不能だったので考えるのをやめました(笑)

表の装飾方法

表は基本的にはボックスモデルで装飾すればOK。
罫線に関するプロパティは以下の通り。

table {
    border-collapse: collapse; /*隣接するセルの罫線を重ねて表示*/
    border-collapse: separate; /*隣接するセルの罫線を離して表示*/
    border-spacing: 10px;   /*separateの場合の罫線と罫線の幅の距離*/
}

その他、勉強したプロパティ

text-align … 文字の行揃えを指定 left,center,right,justifyを指定できる。
font-weight … 文字の太さを指定 normal,boldを指定できる。

勉強した感想

内容はともかくとしてはてなブログCSSを適応させる良い方法がイマイチ分からない。
いまはstyle=""の形式で書いているが、これだと見た目が非常に汚くなるのでミスが気が付きにくいけど、<style></style>で囲う方法だとどうも上手く動かない。
前回ブログにまとめるのはいい勉強になるとか書いたようなきがするけど、実際は時間の浪費が激しすぎて非効率的な気がしてきた…