position プロパティ つづき

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

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

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

c.sakyou

position プロパティ

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

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

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

横並びにするにはflex-box

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



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

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

c.sakyou

課題

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

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

c.sakyou

CSS: リストを2行表示する

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

songsのリストは幅50%に設定して、float-leftで設定すると、2個までは1行に入るようになる。
33%にすると、3個が1行に入るようになる。

c.sakyou

HTML: olタグでリスト作成

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

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

c.sakyou

CSS: Clearで回り込みを解除する

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

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

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

c.sakyou

CSS: floatを使った回り込み②

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

c.sakyou

CSS: floatを使った回り込み

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

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

いい感じ。

c.sakyou

CSS: タイトルのCSSを整える

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

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

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

c.sakyou