ただし(仮)のメモ

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

ニートの方の動画を見た。

色々と思うことがありますね。
私もコレくらいの行動力がある人間になりたい。

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>で囲う方法だとどうも上手く動かない。
前回ブログにまとめるのはいい勉強になるとか書いたようなきがするけど、実際は時間の浪費が激しすぎて非効率的な気がしてきた…

CSSのお勉強(ボックスモデル)

ボックスモデルとは

1つ上のタグの文字

開始タグから終了タグ内に記述されている内容

1つ下のタグの文字

  • margin … 黒線と緑の枠の間
  • border … 緑の枠
  • padding … 緑の枠と文字の間

上図において上記のような場所ごとに管理することです(適当)。
また上下左右はそれぞれtop,bottom,left,rightとして別々の値を設定できます(上図は全て同じ値)。
ちなみに黒線は上下のタグのborder-bottomやborder-topです(marginとpaddingは0px)。

CSS記述例

p {
    margin: 10px; /*上下左右10pxに設定*/
    margin: 10px 20px; /*上下10px 左右20pxに設定*/
    padding: 10px 30px 20p; /*上10px 左右30px 下20px*/
    padding: 10px 20px 30px 40px; /*上10px 右20px 下30px 左40px*/
    border-style: solid; /*線の種類*/
    border-width: 3px; /*線の太さ*/
    border-color: #CCCCCC; /*線の色*/
    border: solid 3px #CCCCCC; /*同時に指定する方法*/
    margin-top: 10px; /*上のみ設定*/
    padding-left: 10px; /*左のみ設定*/
    border-bottom-style: solid; /*下のみ設定*/
    border-right-color: #3399FF; /*右のみ設定*/
}

borderの種類

下記のような種類があります。

none

solid

dotted

dashed

groove

ridge

inset

outset

よく見かける見出しとCSSコード

見出し1

p {
    border-style: solid;
    border-width: 0 0 1px 5px;
    border-color: #FF9900;
    padding: 5px 10px;
}

見出し2

p {
    border-left: solid 5px #FF9900;
    border-bottom:dotted 1px #999999;
    padding:5px 10px;
}

見出し3

p {
    border-style: solid;
    border-width: 3px 0;
    border-color: #FF9900;
    padding: 5px;
}

見出し4

p {
    border-left: solid 5px #FF99CC;
    background-color: #FFFFCC;
    padding: 5px 10px;
}

見出し5

p {
    border-bottom: solid 3px #FF9900;
    background-color: #FFFFCC;
    padding: 5px 10px;
}

見出し6

p {
    border: solid 1px #FF9900;
    background-color: #FFFFCC;
    padding: 5px 10px;
}

勉強した感想

毎回思いますけど習うより慣れろだなーと。
実は今回はほとんど教科書のコードを写しただけですけど、かなり苦戦しました。
思うように表示されなかったり、そもそも何も映らなかったり…w
でもその試行錯誤をしていく中で色々と得られるものがあるので、そういう意味でブログに勉強したことをまとめるのはよい勉強法なのかなと感じました。