今日は、プロフィールを自分の納得のいくような形に改良した。ここでは、画像の入れ方やフォントの入れ方について記しておく。

tableに画像を追加したいときは、自分で作ったprofディレクトリ内に、imagesディレクトリを新たに作って、その中に画像を入れる。その際に、分かりやすく短い名前に変更しておく。（その名前をのちのちcssで打ち込むから）そしてそのリンクは相対パスで書く。

例えば、imagesディレクトリ内に myface.pngというのがあれば、相対パスは

images/myface.png

とできる。

画像を入れたりすること自体はHTMLで打ち込めばしっかりと張り出すことができるが、そのほかに大きさなどを変えたい場合はcssで設定する。その設定方法は、css内でclassを作る。

例えばicon classを作成したい場合は、css内で

.icon{ } と打ち、{}内にいろいろ画像の大きさやらフレームやらを設定できる。

そのように、画像の細かな設定をしたいときは、css内でクラスを作成し、そのclassがどのようなものなのかを設定する必要がある。

こうしたことで、今クラス内に入れられた画像を使うことができる。HTML内で、

 <img src="images/画像の名前" alt="" class="class名">

という風に打つ。

また、画像のほかにもフォントの変え方であるが、まずprofディレクトリにfontsディレクトリを作成し、ブラウザなどでフォントをダウンロードし、~~~.ttfをその中に入れる。

そしてcss内で、コードの上のところに

@font-face{

    font-family: "~~~";

    src: url("../fonts/~~~~.ttf");

}

と入れる。

ここで、　../　は、1つ前に戻るということ。

今css内にいるので、一回戻り、profディレクトリ内に行かなければならない。そのあとfontsディレクトリに入り、つけたいフォントまでのパスを入れる。

font-familyとは、そのフォントの仮の名前で、css内では、そのfont-familyの名前で度のフォントかを区別するため、分かりやすくそして短い名前にすることをお勧めする。

そしてフォントをcss内に記憶することが完了したため、自由にcssで使える。その使用方法は、

例えば<h1>で使いたかったら、<h1>の初めに

font-family: "~~~", ~~~~~;

をつける。これは、もちろん””内のフォントを優先的に使うが、そのフォントでは対応していない文字の可能性があるので、そういった場合は二個目の~~~~~に書いてあるフォントを使用する。そのため二個目で使用するフォントは包括的なフォントを使うことを推奨する。ここでは、sans-serifを使っている。