いばらきへ

今週末は甥っ子が実家を訪れるというんで、実家に帰ってきました。
実家といっても、東京から一時間半程度で、気軽に帰れる距離、茨城のかなり南部、埼玉県寄りです。

パソコンいじるぞー勉強するぞーと思ってパソコン持って帰ったわりに、甥っ子に気を取られすぎて全然時間取れなかったという。今に至る。東京なう。
ただ重い思いしただけ。

茨城のあの田舎な感じ、今度は写真を撮ってこよう。

c.sakyou

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