背景画像
こんにちは．研究から少し逃げ気味になっていますが，真空乾燥をかけている時間で今日はいい加減HTMLの別の機能に触れてコーディングの自由度を高めていきたいと思います．
自分が見直すためにコードを表示してその結果も表示できるようにしたいのでcodeタグから触っていきます．
code
これでHTML上のコードを表示できるようになったので，画像挿入などをしていこうと思います．また，整列済みのコードを表示するためにはpreコマンドを用いるらしいです．そうすることで
<p>
テストテキスト
</p>
のように表示できるらしいです．なお，codeコマンド内で<>を表示するためには＆lt;, ＆gt;と表記すればいいらしいですね．
画像挿入は
< img src="場所" width="横の長さ" height="縦の長さ" alt="代替テキスト" >
で以下のように表示できます．
こんな感じにVS Codeの背景画像を置くことができました．
ただ，画像の横あたりに文字とかを置くことはできないかと思うので，それについても学んでいこうと思います．
ある一定区間をdivで囲み，そのdivに装飾を加えることで囲んだ範囲をまとめて編集できるようにします．
その上でdivにclass="name"としてdivisionを区別できるようにします．名前みたいなもんらしいです．
ということで，
<div class="name">
<img src="場所" width="300" "alt="代替テキスト">
背景画像
</div>
以下のように再表示することができました．
背景画像
見た目は変わっていませんが，divを用いて画像を挿入できました．
画像の挿入はできたので，次にいよいよCSSについて触れていきましょう．
CSSファイルはまだ存在していないので，今回は本日の日記専用にCSSファイルを作っておきます．
新たなdivisionにbackというクラスをつけて，テキストを真ん中にするために"text-align:center"としてCSSを書いてみます．
CSS
/* main area */
.back{
text-align: center;
}
ここでCSS内の"."がクラスセレクタの記号らしいですね．それぞれ意味があるようですが(#がidセレクタなど)，まだまだどれが何を指していくのかは難しそうです．
<div class="back">
<img src="場所" width="300" alt="CSS導入済み画像">
<p>背景画像</p>
</div>
背景画像
画面を見る感じ上手くいっているため，次は画像の隣に文字を置くようにCSSを編集してみようと思います．
ここで横並びには"display: flex"を用いてみようと思います．
CSSは以下のように書いてみます．
CSS
/* main area */
.flex{
display: flex;
}
.flex .image{
width: 650px;
margin: 0;
padding: 0;
overflow: hidden;
position: relative;
text-align: center;
}
.flex .right{
margin: 0 0 0 20px;
padding: 0;
}
.flex .title{
margin: 10px 0 0 0;
padding: 0;
font-size: 18px;
}
.flex .text{
margin: 10px 0 0 10px;
padding: 0;
}
.flex .image img {
width: 100%;
margin: auto;
text-align: center;
}
ネットで検索して出てきたコードの大体をコピーする形で使っているため，下の方のコードの役目はいまいちわかっていません．数値を変更してみていらないところは削ってみましたが，意味を把握するにはまだ時間がかかりそうですね．
<div class="flex">
<div class="image">
<img src="場所" alt="flex導入済み画像">
<p>
背景画像
</p>
</div>
<div class="right">
<p class="title">
この画像について
</p>
<p class="text">
これは私が使っているVS Codeのホーム画面です．
</p>
</div>
</div>
以下が置いた結果です．
背景画像
この画像について
これは私が使っているVS Codeのホーム画面です．
画像を置くうえでは割と理想形に落ち着いたんじゃないでしょうか？ある程度満足する形に画像と文章を置くことができたため，本日はこの辺にしてこれを記事執筆に生かしていこうと思います．近いうちにheaderとfooterにも手を出してJelly Chem全体のデザインについて考えていきたいですね．ではまた．