カテゴリー: 未分類

監督ご指導の元、もっと簡単に指定できることが判明。
動かしたい要素にrelative classを指定し、元にある位置から動かしたい数値を指定する。今回の場合、上から２０pxなので　top: 20px

もっと基本的な考え方でした。

top, right, left, bottomで動かしたい所に指定すれば良い。

c.sakyou

をつかって、画像を重ねたいと思って研究中。

だけどうまくできない。。

やっと重なるとこまでできたんだけど
なんか崩れた。。

ということだけ、覚えました。
同じような要素を綺麗に横並びするには、flex-boxが便利のよう。
今回はじめて使ってみた。

調べていくと色々ありそうだが、もう少し時間ある時にじっくりやりたいよう。

忙しいを言い訳にしたくないけど、なかなか思うように時間が取れない。。

c.sakyou

謎の体調不良により、全然PCを触る気になれず。
監督からの課題にやっとつ手をつけ始め、久々の更新。。

気づいたことは、自分で考えながらやるって大事なんだなと。
こうするにはどうしたらいいのだろうか？と調べるし、
色々試しながら回り道しながらやると覚える。
そしてやっぱり作るって面白い。

c.sakyou

descriptionとsongsをまとめてcontentというdivタグで囲む。
それぞれスタイルを整えていく。

songsのリストは幅５０％に設定して、float-leftで設定すると、２個までは1行に入るようになる。
３３％にすると、３個が1行に入るようになる。

c.sakyou

olタグでリスト作成。
olタグとは順序があるリストを作成する際に使用する。
算用数字（１、２、３…）、アルファベット（A,B,C…）、ローマ数字（Ⅰ、Ⅱ、Ⅲ…）等指定することができる。

リストの各項目は<li>タグを用いて記述、順序のないリストには<ul>を使用。

c.sakyou

今、floatでタイトルを左に回り込ませているがために、全てが右側にきてしまっているのを直したい。
.description { clear: left;
{

としてあげるとdescripition欄はfloatが解除される。

タイトルの下に説明がきましたー

c.sakyou

タイトルの横に”Album”というのを入れました。細かい設定。
Pタグでtypeというクラスをつける。
スタイルを調整。
inline要素にしないとPタグはブロック要素なので行全体が赤く染まる。↓inline要素にしてあげてその要素の幅だけに効くようにしてあげる。

c.sakyou

imgと説明文をdivタグで囲み、descriptionというクラスをつけ、CSSでimgが説明文の左にくるようにfloatにて整える。

description imgと細かく設定したのは、これからimgを指定する際に全てに適用しないようにするため。

いい感じ。

c.sakyou

教材で配布されている画像を、新しく作ったファイルの中に保存する。そのファイルを指定して画像を貼りつける。

Pタグでアルバムの説明文を記入。一行目、二行目、3行目をそれぞれの段落で分ける。

あっという間にここまでできました

c.sakyou