


監督ご指導の元、もっと簡単に指定できることが判明。
動かしたい要素にrelative classを指定し、元にある位置から動かしたい数値を指定する。今回の場合、上から20pxなので top: 20px
もっと基本的な考え方でした。
top, right, left, bottomで動かしたい所に指定すれば良い。
c.sakyou
Just another WordPress site
監督ご指導の元、もっと簡単に指定できることが判明。
動かしたい要素にrelative classを指定し、元にある位置から動かしたい数値を指定する。今回の場合、上から20pxなので top: 20px
もっと基本的な考え方でした。
top, right, left, bottomで動かしたい所に指定すれば良い。
c.sakyou
をつかって、画像を重ねたいと思って研究中。
だけどうまくできない。。
やっと重なるとこまでできたんだけど
なんか崩れた。。
ということだけ、覚えました。
同じような要素を綺麗に横並びするには、flex-boxが便利のよう。
今回はじめて使ってみた。
調べていくと色々ありそうだが、もう少し時間ある時にじっくりやりたいよう。
忙しいを言い訳にしたくないけど、なかなか思うように時間が取れない。。
c.sakyou
謎の体調不良により、全然PCを触る気になれず。
監督からの課題にやっとつ手をつけ始め、久々の更新。。
気づいたことは、自分で考えながらやるって大事なんだなと。
こうするにはどうしたらいいのだろうか?と調べるし、
色々試しながら回り道しながらやると覚える。
そしてやっぱり作るって面白い。
c.sakyou
descriptionとsongsをまとめてcontentというdivタグで囲む。
それぞれスタイルを整えていく。
songsのリストは幅50%に設定して、float-leftで設定すると、2個までは1行に入るようになる。
33%にすると、3個が1行に入るようになる。
c.sakyou
olタグでリスト作成。
olタグとは順序があるリストを作成する際に使用する。
算用数字(1、2、3…)、アルファベット(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