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

2020-11-30 / tau / コメントする

概要

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

動作確認

    <h1>ul</h1>
    <p>list-style-type: none;</p>
    <ul style="list-style-type: none">
      <li>ガンダム</li>
      <li>ガンキャノン</li>
      <li>ガンタンク</li>
    </ul>

    <p>list-style-type: disc;</p>
    <ul style="list-style-type: disc">
      <li>ガンダム</li>
      <li>ガンキャノン</li>
      <li>ガンタンク</li>
    </ul>

    <p>list-style-type: circle;</p>
    <ul style="list-style-type: circle">
      <li>ガンダム</li>
      <li>ガンキャノン</li>
      <li>ガンタンク</li>
    </ul>

    <p>list-style-type: square;</p>
    <ul style="list-style-type: square">
      <li>ガンダム</li>
      <li>ガンキャノン</li>
      <li>ガンタンク</li>
    </ul>

    <p>list-style-type: decimal;</p>
    <ol style="list-style-type: decimal">
      <li>ガンダム</li>
      <li>ガンキャノン</li>
      <li>ガンタンク</li>
    </ol>

    <p>list-style-type: decimal-leading-zero;</p>
    <ol style="list-style-type: decimal-leading-zero">
      <li>ガンダム</li>
      <li>ガンキャノン</li>
      <li>ガンタンク</li>
    </ol>

    <p>list-style-type: lower-roman;</p>
    <ol style="list-style-type: lower-roman">
      <li>ガンダム</li>
      <li>ガンキャノン</li>
      <li>ガンタンク</li>
    </ol>

    <p>list-style-type: upper-roman;</p>
    <ol style="list-style-type: upper-roman">
      <li>ガンダム</li>
      <li>ガンキャノン</li>
      <li>ガンタンク</li>
    </ol>

    <p>list-style-type: lower-latin;</p>
    <ol style="list-style-type: lower-latin">
      <li>ガンダム</li>
      <li>ガンキャノン</li>
      <li>ガンタンク</li>
    </ol>

    <p>list-style-type: upper-latin;</p>
    <ol style="list-style-type: upper-latin">
      <li>ガンダム</li>
      <li>ガンキャノン</li>
      <li>ガンタンク</li>
    </ol>

    <p>list-style-type: lower-alpha;</p>
    <ol style="list-style-type: lower-alpha">
      <li>ガンダム</li>
      <li>ガンキャノン</li>
      <li>ガンタンク</li>
    </ol>

    <p>list-style-type: upper-alpha;</p>
    <ol style="list-style-type: upper-alpha">
      <li>ガンダム</li>
      <li>ガンキャノン</li>
      <li>ガンタンク</li>
    </ol>

    <p>list-style-type: lower-greek;</p>
    <ol style="list-style-type: lower-greek">
      <li>ガンダム</li>
      <li>ガンキャノン</li>
      <li>ガンタンク</li>
    </ol>

    <p>list-style-type: cjk-ideographic;</p>
    <ol style="list-style-type: cjk-ideographic">
      <li>ガンダム</li>
      <li>ガンキャノン</li>
      <li>ガンタンク</li>
    </ol>

    <p>list-style-type: hiragana;</p>
    <ol style="list-style-type: hiragana">
      <li>ガンダム</li>
      <li>ガンキャノン</li>
      <li>ガンタンク</li>
    </ol>

    <p>list-style-type: katakana;</p>
    <ol style="list-style-type: katakana">
      <li>ガンダム</li>
      <li>ガンキャノン</li>
      <li>ガンタンク</li>
    </ol>

    <p>list-style-type: hiragana-iroha;</p>
    <ol style="list-style-type: hiragana-iroha">
      <li>ガンダム</li>
      <li>ガンキャノン</li>
      <li>ガンタンク</li>
    </ol>

    <p>list-style-type: katakana-iroha;</p>
    <ol style="list-style-type: katakana-iroha">
      <li>ガンダム</li>
      <li>ガンキャノン</li>
      <li>ガンタンク</li>
    </ol>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

list-style-type: none;

<li>ガンキャノン</li>

<li>ガンタンク</li>

</ul>

list-style-type: disc;

<li>ガンキャノン</li>

<li>ガンタンク</li>

</ul>

list-style-type: circle;

<li>ガンキャノン</li>

<li>ガンタンク</li>

</ul>

list-style-type: square;

<li>ガンキャノン</li>

<li>ガンタンク</li>

</ul>

list-style-type: decimal;

<li>ガンキャノン</li>

<li>ガンタンク</li>

</ol>

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

<li>ガンキャノン</li>

<li>ガンタンク</li>

</ol>

list-style-type: lower-roman;

<li>ガンキャノン</li>

<li>ガンタンク</li>

</ol>

list-style-type: upper-roman;

<li>ガンキャノン</li>

<li>ガンタンク</li>

</ol>

list-style-type: lower-latin;

<li>ガンキャノン</li>

<li>ガンタンク</li>

</ol>

list-style-type: upper-latin;

<li>ガンキャノン</li>

<li>ガンタンク</li>

</ol>

list-style-type: lower-alpha;

<li>ガンキャノン</li>

<li>ガンタンク</li>

</ol>

list-style-type: upper-alpha;

<li>ガンキャノン</li>

<li>ガンタンク</li>

</ol>

list-style-type: lower-greek;

<li>ガンキャノン</li>

<li>ガンタンク</li>

</ol>

list-style-type: cjk-ideographic;

<li>ガンキャノン</li>

<li>ガンタンク</li>

</ol>

list-style-type: hiragana;

<li>ガンキャノン</li>

<li>ガンタンク</li>

</ol>

list-style-type: katakana;

<li>ガンキャノン</li>

<li>ガンタンク</li>

</ol>

list-style-type: hiragana-iroha;

<li>ガンキャノン</li>

<li>ガンタンク</li>

</ol>

list-style-type: katakana-iroha;

<li>ガンキャノン</li>

<li>ガンタンク</li>

</ol>

ul

list-style-type: none;

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

list-style-type: disc;

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

list-style-type: circle;

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

list-style-type: square;

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

ol

list-style-type: decimal;

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

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

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

list-style-type: lower-roman;

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

list-style-type: upper-roman;

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

list-style-type: lower-latin;

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

list-style-type: upper-latin;

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

list-style-type: lower-alpha;

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

list-style-type: upper-alpha;

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

list-style-type: lower-greek;

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

list-style-type: cjk-ideographic;

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

list-style-type: hiragana;

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

list-style-type: katakana;

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

list-style-type: hiragana-iroha;

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

list-style-type: katakana-iroha;

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

CSS3 – marginとpadding

2020-11-30 / tau / コメントする

概要

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

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

　<p style="border: solid; margin: 40px; padding: 20px;">
　　ゴーシュは町の活動写真館でセロを弾く係りでした。
　　けれどもあんまり上手でないという評判でした。
　　上手でないどころではなく実は仲間の楽手のなかではいちばん下手でしたから、
　　いつでも楽長にいじめられるのでした。
　</p>

　　ゴーシュは町の活動写真館でセロを弾く係りでした。

　　けれどもあんまり上手でないという評判でした。

　　上手でないどころではなく実は仲間の楽手のなかではいちばん下手でしたから、

　　いつでも楽長にいじめられるのでした。

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

書式

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で同じ要素に共通する文字列を付加する

2020-11-30 / tau / コメントする

概要

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

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

CSSの書式

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

動作確認

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

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

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

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>Template by content</title>
    <style type="text/css">
      h1:before {content: "<<";}
      h1:after {content: ">>";}
      h1 {text-align: center;}
    </style>
  </head>
  <body>
    <h1>テスト</h1>
  </body>
</html>

<!DOCTYPE html>

<head>

<title>Template by content</title>

h1:before {content: "<<";}

h1:after {content: ">>";}

h1 {text-align: center;}

</style>

</head>

<body>

</body>

</html>

CSS3 – text-decoration

2020-11-30 / tau / コメントする

概要

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

書式

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

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

値

種類

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

style

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

動作確認

線の種類

    <p style="text-decoration: none;">noneを指定</p>
    <p style="text-decoration: underline;">underlineを指定</p>
    <p style="text-decoration: overline;">overlineを指定</p>
    <p style="text-decoration: line-through;">line-throughを指定</p>

noneを指定

underlineを指定

overlineを指定

line-throughを指定

noneを指定

underlineを指定

overlineを指定

line-throughを指定

線のスタイル

    <p style="text-decoration: underline solid;">underline solidを指定</p>
    <p style="text-decoration: underline dotted;">underline dottedを指定</p>
    <p style="text-decoration: underline dashed;">underline dashedを指定</p>
    <p style="text-decoration: underline double;">underline doubleを指定</p>
    <p style="text-decoration: underline wavy;">underline wavyを指定</p>

underline solidを指定

underline dottedを指定

underline dashedを指定

underline doubleを指定

underline wavyを指定

underline solidを指定

underline dottedを指定

underline dashedを指定

underline doubleを指定

underline wavyを指定

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

    <p><a href="#top">通常のアンカー要素</a></p>
    <p><a href="#top" style="text-decoration: none;">アンカー要素にnoneを指定</a></p>

1 2	<p><a href="#top">通常のアンカー要素</a></p> <p><a href="#top" style="text-decoration: none;">アンカー要素にnoneを指定</a></p>

通常のアンカー要素

アンカー要素にnoneを指定

CSS3 – border

2020-11-30 / tau / コメントする

概要

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

書式

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

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: ブロック全体が盛り上がったように見える線。

動作確認

指定方法

一括指定

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

    <p style="border: solid 3px blue;">solid 1px blue;</p>
    <p style="border: 3px solid red;">border: 3px solid red;</p>

1 2	<p style="border: solid 3px blue;">solid 1px blue;</p> <p style="border: 3px solid red;">border: 3px solid red;</p>

solid 1px blue;

border: 3px solid red;

個別ボーダーの指定

    <p style="border-top: solid 3px red;">border-top: solid 3px red;</p>
    <p style="border-bottom: solid 3px red;">border-bottom: solid 3px red;</p>
    <p style="border-left: solid 3px red;">border-left: solid 3px red;</p>
    <p style="border-right: solid 3px red;">border-right: solid 3px red;</p>

border-top: solid 3px red;

border-bottom: solid 3px red;

border-left: solid 3px red;

border-right: solid 3px red;

border-top: solid 3px red;

border-bottom: solid 3px red;

border-left: solid 3px red;

border-right: solid 3px red;

線のスタイル

    <p style="border: solid 2px">solid 2px</p>
    <p style="border: dotted 2px">dotted 2px</p>
    <p style="border: dashed 2px">dashed 2px</p>
    <p style="border: double 4px">double 4px</p>
    <p style="border: groove 8px">groove 8px</p>
    <p style="border: ridge 8px">ridge 8px</p>
    <p style="border: inset 8px">inset 8px</p>
    <p style="border: outset 8px">inset 8px</p>

solid 2px

dotted 2px

dashed 2px

double 4px

groove 8px

ridge 8px

inset 8px

inset 8px

solid 2px

dotted 2px

dashed 2px

double 4px

groove 8px

ridge 8px

inset 8px

noneとhiddenの効果

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

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

    <table style="border-collapse: collapse;">
      <tr>
        <td style="border: solid blue;">aaa</td>
        <td style="border: solid red;">bbb</td>
      </tr>
      <tr>
        <td style="border: none;">ccc</td>
        <td style="border: hidden;">ddd</td>
      </tr>
    </table>

<tr>

</tr>

<tr>

</tr>

</table>

aaa	bbb
ccc	ddd

CSS3 – text-align

2020-11-30 / tau / コメントする

概要

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

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

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

書式

text-align: 値指定;

値

デフォルトの値はstart。

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

動作確認

left/center/right

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

    <p style="text-align: left;">text-align: left;は左寄せ</p>
    <p style="text-align: center;">text-align: center;はセンタリング</p>
    <p style="text-align: right;">text-align: right;は右寄せ</p>
    <p style="text-align: center;">
      ゴーシュは町の活動写真館でセロを弾く係りでした。
      けれどもあんまり上手でないという評判でした。
      上手でないどころではなく実は仲間の楽手のなかではいちばん下手でしたから、
      いつでも楽長にいじめられるのでした。
    </p>

text-align: left;は左寄せ

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

text-align: right;は右寄せ

ゴーシュは町の活動写真館でセロを弾く係りでした。

けれどもあんまり上手でないという評判でした。

上手でないどころではなく実は仲間の楽手のなかではいちばん下手でしたから、

いつでも楽長にいじめられるのでした。

text-align: left;は左寄せ

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

text-align: right;は右寄せ

text-alignのデフォルトはleft

start/end

左から右に書く場合

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

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

ゴーシュは町の活動写真館でセロを弾く係りでした。

けれどもあんまり上手でないという評判でした。

上手でないどころではなく実は仲間の楽手のなかではいちばん下手でしたから、

いつでも楽長にいじめられるのでした。

ゴーシュは町の活動写真館でセロを弾く係りでした。

けれどもあんまり上手でないという評判でした。

上手でないどころではなく実は仲間の楽手のなかではいちばん下手でしたから、

いつでも楽長にいじめられるのでした。

右から左に各場合

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

    <p style="direction: rtl; unicode-bidi: bidi-override; text-align: start;">
      右から左に書いてstart指定
    </p>
    <p style="direction: rtl; unicode-bidi: bidi-override; text-align: end;">
      右から左に書いてstart指定
    </p>

右から左に書いてstart指定

右から左に書いてstart指定

右から左に書いてstart指定

右から左に書いてend指定

justify

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

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

    <p>
      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.
    </p>
    <p style="text-align: 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.
    </p>
    <p style="text-align: justify">
      ゴーシュは 町の活動写真館で セロを弾く係りでした。
      けれども あんまり上手でない という評判でした。
      上手でないどころではなく 実は仲間の楽手のなかでは いちばん下手でしたから、
      いつでも 楽長にいじめられるのでした。
    </p>

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.

ゴーシュは町の活動写真館でセロを弾く係りでした。

けれどもあんまり上手でないという評判でした。

上手でないどころではなく実は仲間の楽手のなかではいちばん下手でしたから、

いつでも楽長にいじめられるのでした。

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

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

    <p style="text-align: 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.
    </p>

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

2020-11-30 / tau / コメントする

概要

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 – 基本色

2020-11-29 / tau / コメントする

基本の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～アンカー

2020-11-29 / tau / コメントする

書式

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

属性

href属性

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

target属性

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

Ruby – ファイル操作

2020-11-28 / tau / コメントする

要点

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

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

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

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

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

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

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

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

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

file = File.open("read_file.txt", "r")

# file operations

file.close

file = File.open("read_file.txt", "r")

# file operations

file.close

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

File.open("read_file.txt", "r") do |file|

  # file operations

end

File.open("read_file.txt", "r") do |file|

# file operations

end

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

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

text = ""
# ブロック外での変数定義が必要

File.open("read_file.txt", "r") do |file|
  text = file.read
end

puts(text)

# ABCDEFGHIJKLMNOP
# BCDEFGHJIKLMNOPQ
# CDEFGHIJKLMNOPQR
# DEFGHIJKLMNOPQRS

text = ""

# ブロック外での変数定義が必要

File.open("read_file.txt", "r") do |file|

text = file.read

end

puts(text)

# ABCDEFGHIJKLMNOP

# BCDEFGHJIKLMNOPQ

# CDEFGHIJKLMNOPQR

# DEFGHIJKLMNOPQRS

ファイルの読み込み

一括読込

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

file = File.open("read_file.txt", "r")
text = file.read
file.close

puts(text)

# ABCDEFGHIJKLMNOP
# BCDEFGHJIKLMNOPQ
# CDEFGHIJKLMNOPQR
# DEFGHIJKLMNOPQRS

file = File.open("read_file.txt", "r")

text = file.read

file.close

puts(text)

# ABCDEFGHIJKLMNOP

# BCDEFGHJIKLMNOPQ

# CDEFGHIJKLMNOPQR

# DEFGHIJKLMNOPQRS

行ごとの読み込み

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

file = File.open("read_file.txt", "r")

file.each_line do |line|
  puts(line)
end

file.close

# ABCDEFGHIJKLMNOP
# BCDEFGHJIKLMNOPQ
# CDEFGHIJKLMNOPQR
# DEFGHIJKLMNOPQRS

file = File.open("read_file.txt", "r")

file.each_line do |line|

puts(line)

end

file.close

# ABCDEFGHIJKLMNOP

# BCDEFGHJIKLMNOPQ

# CDEFGHIJKLMNOPQR

# DEFGHIJKLMNOPQRS

行番号

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

file = File.open("read_file.txt", "r")

file.each_line do |line|
  puts("#{file.lineno}:#{line}")
end

file.close

# 1:ABCDEFGHIJKLMNOP
# 2:BCDEFGHJIKLMNOPQ
# 3:CDEFGHIJKLMNOPQR
# 4:DEFGHIJKLMNOPQRS

file = File.open("read_file.txt", "r")

file.each_line do |line|

puts("#{file.lineno}:#{line}")

end

file.close

# 1:ABCDEFGHIJKLMNOP

# 2:BCDEFGHJIKLMNOPQ

# 3:CDEFGHIJKLMNOPQR

# 4:DEFGHIJKLMNOPQRS

ファイルの書き込み

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

file = File.open("write_file.txt", "w")
line = ""
for n in 1..100
  line += "#{n} "
  if n % 10 == 0
    file.puts(line)
    line = ""
  end
end
file.close

# write_file.txtの内容
# 1 2 3 4 5 6 7 8 9 10 
# 11 12 13 14 15 16 17 18 19 20 
# 21 22 23 24 25 26 27 28 29 30 
# 31 32 33 34 35 36 37 38 39 40 
# 41 42 43 44 45 46 47 48 49 50 
# 51 52 53 54 55 56 57 58 59 60 
# 61 62 63 64 65 66 67 68 69 70 
# 71 72 73 74 75 76 77 78 79 80 
# 81 82 83 84 85 86 87 88 89 90 
# 91 92 93 94 95 96 97 98 99 100

file = File.open("write_file.txt", "w")

line = ""

for n in 1..100

line += "#{n} "

if n % 10 == 0

file.puts(line)

line = ""

end

file.close

# write_file.txtの内容

# 1 2 3 4 5 6 7 8 9 10

# 11 12 13 14 15 16 17 18 19 20

# 21 22 23 24 25 26 27 28 29 30

# 31 32 33 34 35 36 37 38 39 40

# 41 42 43 44 45 46 47 48 49 50

# 51 52 53 54 55 56 57 58 59 60

# 61 62 63 64 65 66 67 68 69 70

# 71 72 73 74 75 76 77 78 79 80

# 81 82 83 84 85 86 87 88 89 90

# 91 92 93 94 95 96 97 98 99 100