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

【STEP7】画像を貼り付ける

記録

画像の表示を学ぶ

素敵なwebサイトを作成するのに、画像の使用は絶対である。

はてなブログを使用していれば、画像の挿入に関しては特に悩むことはないだろう。ただ形式の自由な、お洒落なwebサイトをほかに作りたいと思うならば、別だ。しっかりと学んでおきたい。

今回も引き続き、以下のテキストを使っていく。

HTML5&CSS3レッスンブック

HTML5&CSS3レッスンブック

 

画像を表示する下準備

まずは使用する画像をwebpageのデータが入っている同じフォルダに保存する。これをしないと画像が表示されない。

画像の大きさも調整する。自分の持っている画像の大きさを確認したいときは【右クリック】➡【プロパティ】➡【詳細】➡【イメージ】から簡単に見ることができる(macの場合は勝手が異なるかもしれない)。

教科書では600ピクセルと指定があったので、画像を編集し大きさは予め調節をした。ちなみにフリー画像はFree stock photos · Pexelsの写真がお洒落で、海外の写真や、美しい風景写真が多くあり、お気に入りである。

www.pexels.com

htmlでの画像表示の仕方

画像を表示するときは<img>を使用する。ただこれだけではなく、この中にsrc属性というのを記述する。srcというのは、source(源)の略である。

つまり引用元となっている画像の名前(情報源)を記述するための必用項目である。

<img src="画像の名前">

となる。

これだけで画像を表示することができる。画像の名前は"と"で挟むのを忘れない。必ず.jpgなども忘れないで入れる。

なお<img>は<h1></h1>や<body></body>などの記述と異なり</img>と文末に記す必要はない。

さらにここに加えるものが二つある。

alt属性を記述する

1つ目の加えるものというのは、alt属性である。

altというのはalternate text(代替テキスト)の略。つまり画像の代わりに文字で「どんな画像かを伝える要素」である。例えばウェブページを音声ブラウザで閲覧しているユーザーに、画像の内容を文字で説明するため使われる。

よって

<img src="画像の名前" alt="どんな画像かという説明”>

になる。ちなみに、この記述は必須である。

 <figure>でマークアップする

もう一つが、ここまでの記述を<figure>と</figure>で挟む作業だ。

このfigureというのは「図版」という意味である。

これで挟むことにより、表示した画像が記事の中で図版の役割を果たしているのだということを記すことができる。

よって記述は

<figure>

<img src="画像の名前" alt="どんな画像かという説明”>

</figure>

ということになる。

ちなみに<figure>を使用すると、デフォルトスタイルシートによって余白が挿入される。この余白が邪魔な場合は、margin:0と記して、消すといい。

webページで利用できる画像のフォーマット

JPEG、GIF、PNGこの3つのフォーマットを使用できる。

  • JPEG(基本的には、写真はJPEGを使うと美しくきれい、フルカラー)
  • GIF(256色なので、JPEGほどカラーが綺麗ではない。後ろを透明な画像を利用したいというときはGIFを使用)
  • PNG(GIFと近しいが、フルカラーも利用できる。テキストや線画を含む画像でGIFを使用するとノイズが発生しやすい。PNGの方が綺麗)

かなりざっくりとした理解だが、これで十分ではないだろうか。ちなみに最近ではSVGというフォーマットもあるようだが、使える場面が限られているとメモしておく。

画像編集を行うための無料ソフト

画像の編集にはPIXIAというソフトを使用するといい(Windowsのみ)。昔、学校の授業でも使用した記憶があるので、一般的なツールなのだろう。

Pixiaホームページ

他にもオンラインツールでPhotoxというものがあるらしい。これは初めて聞いた。今のところ画像の編集はwordの画像編集などをその場で適当に使用している。

本格的にwebページの作成をしたいと考えるのであれば、きちんとphotoshopやIllustrator勉強を行う必要があるようにも思う。

検討しておこう。

今回のまとめ

画像の設置は<img>を使う。</img>を最後に記述する必要はない。

このなかにsrc="画像の名前”を記述する。srcはsorceの略である。

加えてalt="画像の詳しい説明”を記述する。これは画像を見ていなくてもどんな画像なのか推測するための代替テキスト(alternative text)である。

最後に<figure></figure>でこれらをはさむ。figureは図版を意味している。

よって

<figure>

<img src="画像の名前" alt="どんな画像かという説明”>

</figure>

ということになる。

画像の設置は基礎的な知識なのかもしれないが、初心者であるため、src属性やalt属性の役割を初めて知った。

おかげでこれから画像の貼り付けを行う際に、混乱しないで済みそうだ。

次回は同じく、以下のテキストを使用し、画像の配置について学んでいく。

HTML5&CSS3レッスンブック

HTML5&CSS3レッスンブック

 

 

【STEP6】Google Fontsでお洒落な英字を使えるようにする

記録

Google Fontsとは

今回は「Google Fonts」というフォントサービスを使い、自分の好きなデザインのフォントをwebページで使用する方法を学んだ。

無料でこれほどの数の英字のフォントが使える方法があると知らなかったので、とても驚いた。この先どんどんと活用していきたい。

ちなみに「Google Fonts」は以下からアクセスすることができる。

fonts.google.com

Google Fontsの使い方

まずは「Google Fonts」にアクセスする。自分の好きなフォントを探す。

気に入ったフォントの上にカーソルをもっていくと、項目がいくつか現れる。一番左の「sentence」となっている部分をクリックする。

f:id:eno1081:20170226122752p:plain

ここから実際に使用したときのフォント表示を見ることができる。例えば、一番下の「custom」を使えば、自分の好きな文字を入力することができる。

f:id:eno1081:20170226123212p:plain

大きさや太さなどを変えて、幾らでもシュミレーションができる。

検索するときは、横のsearch機能をうまく使うといい。

  • Serif(セリフ、明朝系のフォント)
  • Sans-serif(サンセリフ、ゴシック系のフォント)
  • Display(装飾的なフォント)
  • Handwriting(筆記体)

というカテゴリーにチェックを入れたり、外したりすると検索しやすい。

フォントを選択したら【EMBED】➡【@import 】のタブを選択し、真下に表示される@importの設定をコピーし、スタイルシートの冒頭に貼り付ける。

f:id:eno1081:20170226123917p:plain

これだけでは表示が変わらないので、フォントを変えたい項目に、一番下のSpecify in CSSと書いてある部分のコードを貼り付ける。

これだけで自分の好きなフォントをwebページで使用できる。ただしGoogle Fontsで利用できるのは、英字のみである(日本語のフォントは基本的に有料サイトからフォントを購入することになるらしい)。

まとめ

Google Fonts」のサービスを利用することで、無料で好きなフォントを英字ならば使用することができる。

利用するときは【@import】を選び、最初に表示されるコードをスタイルシートの最初に貼り付ける。そのあと、フォントを利用したい項目に「font-family」から始まっているCSSの記述を貼り付ける。

このテクニックを知っているだけで、デザインの幅が大きく広がるように感じた。自分でデザインを行うまで、まだまだ遠い道のりだが、何とも覚えておきたい。

ここまでで以下のテキストの第二章が終了した。

HTML5&CSS3レッスンブック

HTML5&CSS3レッスンブック

 

今まで何も知らないまま、必死にはてなブログのコードを見つめ、自力でカスタマイズを行っていたが、初めからこの本を購入し、勉強すればよかった。

ネットの情報は無料で、効率の良いように思うときもあるが、一冊の本に1000円ほどのお金を支払うだけで、これだけの知識を得ることができるとすれば、安いものだと思う。ここまで、非常に楽しい。

次は第3章に進み、画像の扱い方を学んでいく。

【STEP5】角を丸くする方法

記録

今日学んだこと

今回は角を丸くする方法を学んだ。

ヘッダーや記事、フッターだけでなく画像の角を丸くするときなどいろいろと応用ができそうである。

今回も引き続き、以下のテキストを進めていく。

HTML5&CSS3レッスンブック

HTML5&CSS3レッスンブック

 

 角を丸くする方法

以下のようにスタイルシートに書き込むと、ボックスの隅っこを直角ではなく、柔らかい曲線にすることができる。

border-radius: 数値px

数値は大きければ、大きいほど曲線の弧の描き方が急なものになる。ちなみに4つの角の曲線の数値を変えることもできる。

そのときは順に左上、右上、右下、左下と数値を設定できる。

border-radius: 左下px  右上px  右下px  左下px 

という具合である。

はてなブログカスタマイズでの応用

角を丸くするという方法は、はてなブログのカスタマイズデザインにも使える。例えば、私は記事のキャッチ画像の表示を以下のように設定している。

 <!--アイキャッチ画像大きさ-->
<style type="text/css">
.list-entry-article .thumb-image {
width: 110px;
height: 105px;
border-radius: 10px;
}
</style>
<!--アイキャッチ画像大きさ-->

このコードを【デザイン】➡【スマートフォン】➡【ヘッダ】➡【タイトル下】の中に書き込んでいる。

そのため少し、キャッチ画像の角が丸くなっている。また画像を目立たせるため、大きさも幅(width)と高さ(height)で少し大きくなるように調整している。

はてなブログカスタマイズのことはよくわかってはいないが、/*と同じように、<!---->で挟んだ記述はhtmlとしても普通の文字としても認識されないようになるらしい。メモ代わりによく使っている。

またはてなブログをカスタマイズするときは、<style type="text/css">と</style>でカスタマイズ内容をはさまなければならないと理解している。

未だに.(カンマ)がどのような機能をもって使われているのかはわからないが、htmlを学びながら、少しでもスムーズにカスタマイズできるようになれば、幸いだ。

まとめ

角を丸くする方法は「border-radius: 数値」と覚えておく。四つ角を指定するときは、左上、右上、右下、左下の順になる。ちなみにradiusは半径という意味。

これまで習った実線で記事を囲む方法「border: 線の種類 数値 色の値」と影のつけ方「box-shadow: 横ずれ値 縦ずれ値 ぼかし度 色の値」と合わせれば、基本的なカスタマイズはできるかもしれない。

どんどんと次へ進んでいこう。

HTML5&CSS3レッスンブック

HTML5&CSS3レッスンブック

 

 

【STEP4】影を付ける方法

今日学んだこと

今日はボックスに影を付ける方法を学んだ。影を付けることで、デザインに立体感や高級感が増すということもあると思うので、しっかりと覚えておきたい。

今回も引き続き、以下の本を進めていく。

HTML5&CSS3レッスンブック

HTML5&CSS3レッスンブック

 

影のつけ方

前回、記事のスタイルシートに

 /*記事*/
article {background-color: 記事背景の色の値;
width: 幅の広さ;
margin-left: auto;
margin-right: auto;
border: solid 線の太さの数値px 色の値}

と記述することで、記事を実線(solid)で囲むことができると学んだ。今回はその下に「box-shadow」という要素を記述することで、影を付けていく。

影の要素の記述の仕方は

box-shadow: 横のズレ数値px  縦のズレ数値px  影のぼかし数値px 色の値

となる。

ズレ数値の数が大きいほど、元のボックスと影のズレが大きい(つまり影の存在感が大きい)。

影のぼかし数値は、数が大きければ大きいほど、影がぼやけるということである。色の値は、とりあえずgrayと指定して、灰色にした。

影の位置を反対にするとき

デフォルトだと、影は左上方向から光が当たっているように付く(つまり右と下に影がつく)。この影の位置を逆にしたいときは、ズレ数値に-(マイナス)をつける。

例えば、

box-shadow: 10px  10px  15px gray;

となっていたものを

box-shadow: -10px  -10px  15px gray;

にすれば、右下から光があたっているように影がつく(つまり左と上に 影がつく)。

ちなみに古いバージョンでも影を表示する可能性があるので「-webkit-」という記述を足した同じものを並べておくといいらしい。

box-shadow: -10px  -10px  15px gray;

だけではなく

-webkit-box-shadow: -10px  -10px  15px gray;

box-shadow: -10px  -10px  15px gray;

ということである。

今日のまとめ

影を付けるというのは、「box-shadow」という記述で、簡単に行うことができる。その後ろには順に、影のずれ(横、縦)を数値化し、ボケの度合いを指定して、色を指定すればよい。

影のぼかし方にも工夫の仕方はあるように感じるので、今後練習していきたい。

HTML5&CSS3レッスンブック

HTML5&CSS3レッスンブック

 

 

【STEP3】線で記事を囲む、余白の調整をする

今回の学習内容

前回は背景の色を、ヘッダー、記事、フッターと色分けする方法を学んだ。

今回は、それらの要素を色のついた線で囲む方法を学ぶ。きちんと線で囲むことによって、サイト全体の印象がきりっとしまったものになるとも思うし、はてなブログのカスタマイズでも使えそうなテクニックのように感じた。

使用テキストは変わらず、以下のもののチャプター2を学んでいる。

HTML5&CSS3レッスンブック

HTML5&CSS3レッスンブック

 

線で記事を囲む方法

スタイルシートに書き込みを行う。記事のスタイルを決めている行に、border:と記して線の種類(ここではsolid)を指定し、線の太さ、色の値を打つ。

太字にしたところが、今回足したところである。

 /*記事*/
article {background-color: 記事背景の色の値;
width: 幅の広さ;
margin-left: auto;
margin-right: auto;
border: solid 線の太さの数値px 色の値}

今回は線の要素を「border: solid 線の太さの数値px 色の値」と全て横並びにしているが、以下のように個別に設定することもできる。

border-style: 線の種類

boder-width: 数値px

border-color: 色の値

こちらの方がぱっと見たとき、混乱しないが、少し手間のかかる記述の仕方ではある。

線の種類

線の種類は、スタンダードなものでは以下のように変えられるらしい。 

none(非表示)

hidden(非表示)

dotted(点線)

dashed(破線)

solid(実線/今回選んだ最もスタンダードな線)

double(二重線)

線の太さは、ピクセルで数値化することもできるし、

thin(細い線)

medium(中太の線)

thick(太い線)

と指定することもできるらしい。覚えておきたい。

線のデザインを上下左右個別に指定する

線のデザインを上下左右個別に指定することもできる。それぞれ

  • border-top(上の線)
  • border-right(右の線)
  • border-left(左の線)
  • boder-bottom(下の線)

となる。この知識があるだけで、はてなブログの見出しカスタマイズも、自由にできるようになるだろう。

例えば、このような見出し(スマホ閲覧限定)

上の見出しは、はてなでは以下のような記述になっている。

 <style type="text/css">
.entry-content h5{
color: #444444;
padding: 10px 15px;
border-left: 10px solid #666666 ;
border-bottom: 1px solid #666666 ;
}
</style>

この見出しは、左側の線と下側の線を利用して、小見出し(h5)を囲むという構造になっているとわかった。

下のようなブログでいくらでもサンプルがあるので、わざわざデザインする必要もないかもしれないが、原理を知っておくと、もっとスムーズに調整ができるようになるなと感じた。

www.yukihy.com

ちなみにこの上下右左の指定は、余白(margin)でも同じである。

余白の調整

記事を実線で囲んだ後、余白の調整について学ぶ項目に入った。

枠線の内側の余白の入れ方

線で記事を囲む。このとき線の外側の余白は「margin」なのに対し、線の内側の余白は「padding」という記述になる。頻繁に使うことになりそうなので、この二つの余白の使い方をきちんと覚えておきたい。ちなみに内側の余白(padding)も、線や余白と同様に、上下左右を指定することができる。

思い通りの幅にする調整方法

実線や余白などを色々指定した結果、最初に自分が指定した幅(width)に余白が足されて、記事の面積がどんどんと大きくなってしまう。

これを避けるために「box-sizing: border-box」と打つ。余白(margin、padding)や線の太さを入れたうえで、自分の指定した幅(width)の記事になるように調整してくれるそうだ。

ただし一部のブラウザでは対応していないということもある、新しい記述のようだ。そのため、「-webkit-」「-moz-」といった追加記述をした方がいいらしい。

/*記事*/
article {background-color: 記事背景の色の値;
width: 900px;
margin-left: auto;
margin-right: auto;
border:solid 1px 線の色の値;

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;}

こうすることで、余白(margin)込みで、指定した幅(width)900pxという計算になる。

補足:デフォルトの余白を消すという発想

<h1>や<p>で指定した要素には、デフォルトスタイルシートの余白が上下に組み込まれている。

ここにさらに自分で余白を足したいときは、一旦

h1 {margin-top: 0px;

      margin-bottom:0px}

といれて全部デフォルトの設定を消し、自分の好みの余白をいれるという発想もあるらしい。必要なことがあるかもしれないので、覚えておく。

補足:上下の余白(margin)は重ね合わさってる

CSSのルールで、上下になっている余白(margin)は重ね合わさっていると考えるらしい。つまり10の余白がある真下に、20の余白があった場合、上下が重なって、大きい方の20の余白があると考える。覚えておく。

今日のまとめ

線で記事を囲む方法は「border: 線の種類  太さ  線の色の値」と覚えておく。線の上下左右を指定することもできるし、線の種類も変えられる。

枠線を境に外側の余白は「margin」だが、内側の余白は「padding」となる。ちなみにpaddingというのは「詰め物」という意味らしい。

余白の存在を考慮したうえで、幅の大きさにも留意する。「box-sizing: border-box」を使うことで、余白込みで指定した通りの幅(width)になる。

<h1>や<p>にはブラウザのデフォルト余白が挿入されている。一旦それらを0にしないと思い通りのデザインにならないこともある。なお、重なってる余白(margin)は、小さいほうの余白が大きい値の余白に重なって、なかったことになっていると考えればいい。

サイトデザインでは、余白をきれいにバランスよくとることが非常に重要なので、ただ余白(margin)を指定するだけでなく、細かい調整の仕方をきちんと覚えておく。

次回も引き続き、以下のテキストを進めていく。

HTML5&CSS3レッスンブック

HTML5&CSS3レッスンブック

 

 

【STEP2】背景の色を変えて、配置を決める

記録

背景色の変え方を学ぶ

真っ白なページのままだと、いかにも素人が作ったページという感じが否めない。色を足すだけで随分とまともになる。今まではてなブログのカスタマイズを参考に、見よう見まねで適当にやってきたが、参考書として使用しているHTML5&CSS3レッスンブックには、カラーチャートもあって、理解が捗る。

今更ながらだが、この本を選んでよかった。情報量が豊富で、知識が身に付き楽しい。

HTML5&CSS3レッスンブック

HTML5&CSS3レッスンブック

 

 スタイルシートに背景色を記述

スタイルシートに背景色を記述する。

前回作ったスタイルシート

body {font-family:'メイリオ,
         'Hiragino Kaku Gothic Pro',
         sans-serif}

と記述して、bodyの中のフォントを指定した。その続きに以下のように打つ。

 body {font-family:'フォントの種類,
'第二候補のフォントの種類',
sans-serif;
background-color: 色の値(もしくは色の名前)}

違う項目を入れる前に ; を入れるのを忘れない。カラーチャートは以下のサイトのようなものも多いので、いくらでも検索で探すことができる。

www.tagindex.com

カラーチャートに関しては、LITERARYさんの記事の中に配色パターンの紹介がある。とてもセンスが良いので、参考になるし、色の値もすぐに見ることができるので、とても役に立つ。

tsukuruiroiro.hatenablog.com

HTML5&CSS3レッスンブックにのっているチャートには、カラーネームなどもきちんと記載されていて、常備しておきたいと感じた。とりあえず白色(white)が#ffffffであることと、黒色(black)が#000000であることは覚えた。

ヘッダーと記事の背景色を指定

このままだとサイトの背景色がすべて同じになってしまうので、部分ごとに分ける。そのためにスタイルシートに以下のように記述する。

/*ヘッダー*/
header {background-color: ヘッダーの色}

/*記事*/
article {background-color: 記事本文の色}

こうすると、背景色と文章が書かれた部分の背景色が異なるので、記事が読みやすくなる。また/*で挟んだ記述をすることによって、その下に書かれている情報がどのようなものなのかメモを取ることができる(htmlとして反映はされない)。

こまめに情報に関するメモを取ることで、何がどの情報化を整理するのはとても大切なように感じる。きちんと覚えておきたい知識だ。

配置の変更

今のままでは、テキストが画面の横いっぱいに広がっている様子である。そのため、記事の配置を少し中央にずらしたい。

先ほど作った記事のスタイル記述欄に、幅(width)と余白(margin)の情報を記述する。

 /*記事*/
article {background-color: 色の値;
width: 幅の数値px;
margin-left: auto;
margin-right: auto}

余白の値をautoに設定しておくことで、自動的に同じ大きさの余白が左右に挿入されて、結果としてコンテンツを中央に配置できるらしい。覚えておこう。

さらに同じようにフッターの位置も変える。

/*フッター*/
footer {width: 幅の数値px;
margin-left: auto;
margin-right: auto}

これでフッター部分と記事の部分の始まりが同じ場所になる。

まとめ

ここまでのスタイルシート記述をまとめると 

body {font-family:’フォントの種類,
'第二候補のフォントの種類',
sans-serif;
background-color: 背景色の色の値}

h1 {font-size: サイズ指定px}

p {line-height: 段落の高さ}

/*ヘッダー*/
header {background-color: ヘッダーの背景色指定}

/*記事*/
article {background-color: 記事の背景色指定;
width: 幅の数値px;
margin-left: auto;
margin-right: auto}

/*フッター*/
footer {width: 高さpx;
margin-left: auto;
margin-right: auto}

となる(ちなみに太字が今日足したところになる)。背景色の指定は、ただ全体の背景を変えるだけでなく、記事とヘッタ―など部分によって変えることで、サイトにメリハリが生まれる。

また幅を揃えるときはautoを活用するとよい。

さらにスタイルシートの記述においては、/*を友好的に使うことで、情報の整理をまめに行う。

ちなみに:と;の位置を間違いやすいので、注意しよう。

{内容の指定: 具体的な数値や情報など; }となる。

明日はチャプター2の続きに進んでいく。

HTML5&CSS3レッスンブック

HTML5&CSS3レッスンブック

 

 

【STEP1】基本的なページの作成をしてみる

記録

HTMLの基本に挑戦した感想

今日はまずHTML5&CSS3レッスンブックのチャプター1を終わらせた。大学の教養科目の中で、少し勉強した記憶があったことと、最近でははてなブログのデザインに少しこだわっていたこともあり、内容がすんなりと頭に入ってきた。

今後webデザインを勉強するときのために、メモとして必要なものを残しておこう。

今日やったこと

無料ソフトのダウンロード

ホームページに使うソフト(EmEditor (Text Editor) )をダウンロードした。

30日間、無料で使用できるらしい。

期限があった方が、きちんと勉強できると考えて、使うことにした。

ページとスタイルシートを別につくる

まずはサイトのページとなるシートを1枚、適当に名前を付けて、htm形式で保存した。もう一枚「style.css」という名前で保存した。どちらも同じフォルダ(webpageと名前を付けたもの)に入れた。またエンコードを「UTF-8」と指定した。

下準備の仕方

まずは、このページがhtmlで書かれていることを明記しないといけない。 

そのため<!DOCTYPE html>と一番最初に打つ。

そのあとで、使用言語を記す。日本語の場合は<html lang=ja>となる。英語のサイトをつくるときは<html lang=en>とする。

この二つを記したあとで、ページの情報を記入する。

<head>と</head>のなかに、最初は3つの情報をいれた。

一つ目は、エンコードの種類指定だ。

ホームページを作るときは「UTF-8」というエンコードを指定するらしい。これはページを作成し、保存するときにも注意する。このエンコードを使用していることを<meta charset="UTF-8">として記述する。

二つ目はサイトのタイトルである。<title>と</title>の間に、タイトルを書き入れる。このタイトルはページを開いた時のタブとして、見ることができる。必ず書かなくてはいけない。

最後にスタイルシートを明記する。<Link rel="stylesheet" href="style.css">と明記する。

これらを全部行うと、一番最初に

 <!DOCTYPE html>
<html lang=ja>
<head>
<meta charset="UTF-8">
<title>サイトのタイトル</title>
<Link rel="stylesheet" href="style.css">
</head>

 と記述されることになる。

段落と見出しのつくりかた

ページの中身をつくっていく。</head>のあとに、<body>と</body>を入れて、中身となる文章をその間に入れていく。

段落をつくるときは<p>と</p>の間に文章をはさむ。

見出しをつくる際は<h1>と</h1>の間に、強調したいタイトルをはさむ。

ヘッダーにタイトルを記述

サイトのタイトルとなるものを記述するヘッダーを作成する。

<header>
<h1>サイトのタイトル</h1>
</header>

ヘッダーは<body>と</body>の中に入れる。

フッターにコピーライトを記述

サイトのコピーライトをフッターに記述する。

<footer>
<small>Copyright &copy; サイトのタイトル, all rights
reserved.</small>
</footer>

<small>と</small> で囲むことで一回り小さな文字で記述できる。

スタイルシートを使って、文字を変える

最初に保存した「style.css」を開く。

まずは、フォントの種類を変えてみる。bodyの中の文字を変えるので、冒頭に明記。{ }の中に情報を書き入れる。

フォントの種類は

{font-family:'フォントの種類, '第二候補のフォントの種類'}

という具合らしい。第二候補も対応していない場合に備えて、sans-serifと最後に加えると、似たようなフォントを探して、使用してくれるようだ。

同じようにフォントの大きさ、段落の幅を調整する。

body {font-family:'メイリオ,
'Hiragino Kaku Gothic Pro',
sans-serif}

h1 {font-size: 38px}

p {line-height: 1.5}

としてスタイルシートの基本をメモしておく。 

まとめ

今日やったことは、まず基本のページをつくることであった。

<!DOCTYPE html>
<html lang=ja>
<head>
<meta charset="UTF-8">
<title>サイト名</title>
<Link rel="stylesheet" href="style.css">
</head>
<body>

<header>
<h1>サイト名</h1>
</header>

<article>
<h1>ページのタイトル</h1>

<p>内容1</p>

<p>内容2</P>
</article>

<footer>
<small>Copyright &copy; サイトのタイトル, all rights
reserved.</small>
</footer>

</body>
</html>

初めてスタイルシートをつくったので、このように対応しているのかと納得いくものがあった。今まではてなブログのカスタマイズをしていて、よくわからなかったことが、知識として入っている気がする。

HTML5&CSS3レッスンブック

HTML5&CSS3レッスンブック

 

次回はチャプター2を終わらせたい。