CSS3 – list-style-type~マーカー

概要

ul、olの様々なマーカーを設定する。

書式

list-style-type: [マーカースタイル];

none
  • list
disc
  • list
circle
  • list
square
  • list
decimal
  • list
decimal-leading-zero
  • list
lower-roman
  • list
upper-roman;
  • list
lower-latin
  • list
upper-latin
  • list
lower-alpha
  • list
upper-alpha
  • list
lower-greek
  • list
cjk-ideographic
  • list
hiragana
  • list
katakana
  • list
hiragana-iroha
  • list
katakana-iroha
  • list

動作確認

ul

list-style-type: none;

  • ガンダム
  • ガンキャノン
  • ガンタンク

list-style-type: disc;

  • ガンダム
  • ガンキャノン
  • ガンタンク

list-style-type: circle;

  • ガンダム
  • ガンキャノン
  • ガンタンク

list-style-type: square;

  • ガンダム
  • ガンキャノン
  • ガンタンク

ol

list-style-type: decimal;

  1. ガンダム
  2. ガンキャノン
  3. ガンタンク

list-style-type: decimal-leading-zero;

  1. ガンダム
  2. ガンキャノン
  3. ガンタンク

list-style-type: lower-roman;

  1. ガンダム
  2. ガンキャノン
  3. ガンタンク

list-style-type: upper-roman;

  1. ガンダム
  2. ガンキャノン
  3. ガンタンク

list-style-type: lower-latin;

  1. ガンダム
  2. ガンキャノン
  3. ガンタンク

list-style-type: upper-latin;

  1. ガンダム
  2. ガンキャノン
  3. ガンタンク

list-style-type: lower-alpha;

  1. ガンダム
  2. ガンキャノン
  3. ガンタンク

list-style-type: upper-alpha;

  1. ガンダム
  2. ガンキャノン
  3. ガンタンク

list-style-type: lower-greek;

  1. ガンダム
  2. ガンキャノン
  3. ガンタンク

list-style-type: cjk-ideographic;

  1. ガンダム
  2. ガンキャノン
  3. ガンタンク

list-style-type: hiragana;

  1. ガンダム
  2. ガンキャノン
  3. ガンタンク

list-style-type: katakana;

  1. ガンダム
  2. ガンキャノン
  3. ガンタンク

list-style-type: hiragana-iroha;

  1. ガンダム
  2. ガンキャノン
  3. ガンタンク

list-style-type: katakana-iroha;

  1. ガンダム
  2. ガンキャノン
  3. ガンタンク

CSS3 – marginとpadding

概要

marginでボックス要素の外側の余白、paddingでボックス要素の内側の余白を設定する。

以下の例は、p要素にmargin=40pxとpadding=20pxを設定していて、親のbody要素からp要素の外側まで40px、p要素の外側からその内容まで20pxの余白がとられている。

ゴーシュは町の活動写真館でセロを弾く係りでした。けれどもあんまり上手でないという評判でした。上手でないどころではなく実は仲間の楽手のなかではいちばん下手でしたから、いつでも楽長にいじめられるのでした。

書式

margin、paddingはボックス要素の外と内に対する余白で、上下左右の余白量に対する指定の仕方は双方に共通する。

1つのmargin/paddingでまとめて指定

margin/padding [上下左右]
上下左右全ての余白を同じ値で設定。
margin/padding [上下] [左右]
上と下、左と右に共通する余白を指定。
margin/padding [上] [左右] [下]
上、左右共通、下の余白を設定
margin/padding [上] [右] [下] [左]
上、右、下、左の余白をそれぞれ設定。上から時計回り。

4つの辺のいずれかの余白を個別に設定

margin/paddingに以下を続けて、それぞれの余白を個別に設定。

  • -top 上
  • -bottom 下
  • -left 左
  • -right 右

たとえばpadding-left: 20px;は左内側の余白を20pxで指定。

 

Tips – CSSで同じ要素に共通する文字列を付加する

概要

HTMLで同じタグやクラスの先頭や末尾に共通の文字列を表示させる方法。

たとえばh1要素の先頭に必ず”●”をつけたいときなど。

CSSの書式

[セレクター]:before {content: [文字列];}
[セレクター]:after {content: [文字列];}

動作確認

以下はh1要素の前後に共通の文字列を付加するように指定したCSSを、HTMLのヘッダー部分に書いた例。

これのページを表示させると、h1要素は全てセンタリングされ、先頭に"<<"、末尾に">>"の文字列が付加され、すべてのタグに繰り返し文字を打つ必要がない。

スタイルで記述する場合、&lt;などのエンティティ-で書く必要はない。

 

CSS3 – text-decoration

概要

コンテナーのテキストの下線・上線・取り消し線の種類・スタイル・色を指定する。blinkも指定できるが殆どのブラウザーで機能しない。

書式

text-decoration [種類](, [スタイル])(, [色])

text-decoration-line [種類]
text-decoration-style [スタイル]
text-decoration-color [色]

種類

none
テキストに対する線の装飾を無効にする。アンカー要素でデフォルト指定されている下線も表示されなくなる。
underline
下線(テキストの下)
overline
上線(テキストの上)
line-through
取り消し線(テキストの縦中央)

style

solid
実線。
dotted
点線。
dasshed
破線。
double
二重線。
wavy
波線。

動作確認

線の種類

noneを指定

underlineを指定

overlineを指定

line-throughを指定

線のスタイル

underline solidを指定

underline dottedを指定

underline dashedを指定

underline doubleを指定

underline wavyを指定

アンカー要素の下線を消す

通常のアンカー要素

アンカー要素にnoneを指定

CSS3 – border

概要

コンテナーのボーダーのスタイル、太さ、色を指定する。

書式

以下の書式で上下左右全てのボーダーのスタイル・太さ・色を一括指定。

border: [スタイル] [太さ] [色] 値の順番は任意

以下の書式はスタイル/太さ/色のいずれかを全てのボーダーに対して一括指定。

border-style: [スタイル]
border-width: [太さ]
border-color: [色]

以下の書式は上/下/左/右のいずれかのボーダーに対してスタイル・太さ・色を一括指定。

border-top: [スタイル] [太さ] [色]
border-bottm: [スタイル] [太さ] [色]
border-left: [スタイル] [太さ] [色]
border-right: [スタイル] [太さ] [色]

また上記4つそれぞれについてスタイル、太さ、色のみを個別に指定可能。border-topを例にとると以下の通り。

border-top-style: [スタイル]
border-top-width: [太さ]
border-top-color: [色]

スタイル

none
非表示で太さも0になる。他のボーダーと重なる場合、他方のボーダーの値が優先される。
hidden
非表示で太さも0になる。他のボーダーと重なる場合、この値が優先されて非表示になる。
solid
実線。
dotted
点線。
dasshed
破線。
double
二重線。指定した線の太さの中で二重線になるため、1本の線は細くなる。
groove
立体的に窪んだ線(ノミなどで掘り込んだような線)。
ridge
立体的に盛り上がって線(土手のような線)。
inset
ブロック全体が窪んだように見える線。
outset
ブロック全体が盛り上がったように見える線。

動作確認

指定方法

一括指定

周囲全てのボーダーのスタイル・太さ・色を一括指定する場合、値の順番は任意。

solid 1px blue;

border: 3px solid red;

個別ボーダーの指定

border-top: solid 3px red;

border-bottom: solid 3px red;

border-left: solid 3px red;

border-right: solid 3px red;

線のスタイル

solid 2px

dotted 2px

dashed 2px

double 4px

groove 8px

ridge 8px

inset 8px

inset 8px

noneとhiddenの効果

以下は表のセルの罫線が重なるようにしている。

  • cccのセルのボーダースタイルはnoneなので、aaaのセルのボーダーは表示され、他のボーダーは表示されない
  • dddのセルのボーダースタイルはhiddenなので、bbbのセルのボーダーは表示されず、他のボーダーも表示されない

aaa bbb
ccc ddd

CSS3 – text-align

概要

ブロックコンテナ内の行のそろえ方を指定する。

大きく分けると、以下の4つ。

  1. 絶対的な揃え位置を指定
  2. 文章を書く方向を基準に揃え位置を指定
  3. ジャスティフィケーション(両端均等割付)
  4. 親要素の指定の継承

書式

text-align: 値指定;

デフォルトの値はstart。

left/center/right
ブロックコンテナ内の各行を左/中央/右にそろえる。
start/end
テキストを書く方向の始端/終端にそろえる。文を左から右へ書く場合はleft/right、右から左へ書く場合はright/leftと等価。
justify/justify-all
両端に均等割り付けする。日本語の場合は作用しない。justify-allは最後の行も強制的に均等割り付けとなっているが、ほとんどのブラウザで実装されていない。
match-parent
親要素の値を継承するとされているが、動作未確認。

動作確認

left/center/right

ブロックコンテナーの各行が、左/中央/右に揃えられている。1行がブラウザの幅を超える場合、最後の行が左/中央/右に揃えられる。

text-align: left;は左寄せ

text-align: center;はセンタリング

text-align: right;は右寄せ

text-alignのデフォルトはleft

ゴーシュは町の活動写真館でセロを弾く係りでした。けれどもあんまり上手でないという評判でした。上手でないどころではなく実は仲間の楽手のなかではいちばん下手でしたから、いつでも楽長にいじめられるのでした。

start/end

左から右に書く場合

左から右に書かれる場合、end指定がrightと同じ効果になっている。

ゴーシュは町の活動写真館でセロを弾く係りでした。けれどもあんまり上手でないという評判でした。上手でないどころではなく実は仲間の楽手のなかではいちばん下手でしたから、いつでも楽長にいじめられるのでした。

ゴーシュは町の活動写真館でセロを弾く係りでした。けれどもあんまり上手でないという評判でした。上手でないどころではなく実は仲間の楽手のなかではいちばん下手でしたから、いつでも楽長にいじめられるのでした。

右から左に各場合

右から左に書く場合には、startはright、endはleftと等価。

右から左に書いてstart指定

右から左に書いてend指定

justify

ジャスティフィケーション(両端均等割付)は、ワードとスペースで構成された文章を、行ごとに両端に均等割付する。

以下の1つ目の分はデフォルト値(start)、2つ目の分はjustfyを指定している。ブラウザーの幅を変えるとジャスティフィケーションの様子がわかる。3つ目で日本語にjustifyを指定しているが、効果はない。

ONCE upon a time, many years ago—when our grandfathers were little children—there was a doctor; and his name was Dolittle—John Dolittle, M.D. “M.D.” means that he was a proper doctor and knew a whole lot.

ONCE upon a time, many years ago—when our grandfathers were little children—there was a doctor; and his name was Dolittle—John Dolittle, M.D. “M.D.” means that he was a proper doctor and knew a whole lot.

ゴーシュは 町の活動写真館で セロを弾く係りでした。 けれども あんまり上手でない という評判でした。 上手でないどころではなく 実は仲間の楽手のなかでは いちばん下手でしたから、 いつでも 楽長にいじめられるのでした。

justify-all

ブラウザーの幅を変化させてもジャスティフィケーションの効果は観られず、無指定の場合と同じ。

ONCE upon a time, many years ago—when our grandfathers were little children—there was a doctor; and his name was Dolittle—John Dolittle, M.D. “M.D.” means that he was a proper doctor and knew a whole lot.

 

CSS3 – color/background-color

概要

colorは前景色、background-colorは背景色を指定する。

書式

color: 色指定;

background-color: 色指定;

色指定にいくつかの方法がある。

カラーネーム
red, grayなど特定の色に対応したキーワードで設定。
16進コード(6桁)
#RRGGBBの6桁で指定する。2桁1バイトごとにR, G, Bに対応。
16進コード(3桁)
#RGBの3桁で指定する。#RGBという指定は#RRGGBBと各色を繰り返した値に相当する。
rgb(r, g, b)/rgb(r, g, b, a)
3つの引数はそれぞれ0~255の整数で、R, G, Bに対応。4つ目の引数がある場合は透過度を表し、実数で指定する。
hsl(h, s, l)/hsl(h, s, l, a)
色相(Hue)、彩度(Saturation)、輝度(Lightness)を実数で指定する。4つ目の引数がある場合は透過度を表し、実数で指定する。

 

CSS3 – 基本色

基本の16色とカラーネーム、カラーコードは以下の通り。

カラーネーム カラーコード
black #000000
aqua #00FFFF
blue #0000FF
fuchsia #FF00FF
gray #808080
green #008000
lime #00FF00
maroon #800000
navy #000080
olive #808000
purple #800080
red #FF0000
silver #C0C0C0
teal #008080

 

HTML5 – a~アンカー

書式

<a href="href属性" target="target属性">...</a>

属性

href属性

リンク先のURL、アンカーリンク(ページ内リンク)を組み合わせて指定する。

target属性

_self 現在のページでリンク先を開く(デフォルト)
_blank 新しいページ/タブでリンク先を開く

Ruby – ファイル操作

要点

  • Fileクラスを使うことで、開いたファイルをオブジェクトとして扱える
  • Fileはopenメソッドで開き、closeメソッドで閉じる
  • openメソッドで開いたファイルオブジェクトに対して、行単位の読み込みなどの処理を行う

ファイルのオープン/クローズ

ファイルのオープンにはFile#openメソッドを使う。第1引数でファイルのパス、第2引数でファイルを開くモードを文字列で指定。

変数 = File.open("ファイルへのパス", "モード")

モード指定の例は以下の通り。

"r" 読込 デフォルト
"w" 書込 ファイルが存在している場合は内容を空にする
"a" 追加 ファイルが存在している場合は末尾に追加する
"r+" 読書 ポインターはファイルの先頭にセット
"w+" 読書 ファイルが存在している場合は内容を空にする
"a+" 読書 読込位置は先頭、書き込み位置は末尾にセット

ファイルのクローズにはcloseメソッドを使う。

ファイルオブジェクトの変数.close

以下はファイル名を指定してファイルを開き、何もせずにクローズする例。

以下の構文は、ファイルのクローズを明示しなくても完結する。

ただしこれには注意が必要。このブロックの中で定義した変数でファイルの内容を読み込むと、ブロックの外ではその変数は使えない(ブロック内スコープ)。

ブロック内で読んだ内容を外で参照するためには、ブロック外で変数が定義されている必要がある。

ファイルの読み込み

一括読込

ファイルの読み込みは、ファイルオブジェクトのreadメソッドを使う。

行ごとの読み込み

Fileオブジェクトのeach_lineメソッドを使うと、行単位で読み込んでくれる。

行番号

Fileオブジェクトのlinenoプロパティーは、現在読んでいる位置の行番号を持っている。

ファイルの書き込み

ファイルの書き込みはopenの第2引数で"w"を指定する。ファイルが存在すればその内容が空にされ、ファイルが存在しなければ新たに作られる。