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

CSS: box-shadowについて(影の付け方)

前回に出てきたbox-shadowについて、使い方がよくわからなかったので、復習してみる。

例:box-shadow: 0 0 0 0 rgba(0,0,0,0.4);

1番目は水平方向の影。(正は右方向へ、負は左方向へ)
2番目は垂直方向の影。(正は上方向へ、負は下方向へ)
3番目はぼかし距離。(数が大きくなるほどぼかしが強くなる。0だとくっきり)
4番目は広がり距離。(正は全方向に拡大、負は縮小)

rgbaは色の指定。
最後にinsetと記載すると、影はボックスの内側へ反映される。

いくつか試しにやってみました、なんとなくわかったかな〜

c.sakyou

HTML:セクショニングコンテンツ③

divタグの枠のスタイル調整。

header部分
背景色を濃い茶色、文字色を白に設定。
文字を中央へ配置。

注意:h1と書いてしまうと、セクションタグのh1も中央に配置されてしまう。今回はheaderのh1のみ中央に配置したいため、タグ名を指定してあげる。

ここまでできました。

c.sakyou

HTML:セクショニング

アーティスト名とアルバム名どちらも大見出しとして使用したいが、同じセクションでh1が二つあるのは変なので、セクションを分けてあげる。
この場合、アーティスト名はheaderタグに入れ、アルバム名はセクションタグ(informationというクラスをつける)の中に入れる。

c.sakyou

HTML: id属性とlabel要素 完成編

メールアドレス、パスワードの隣にある必須という文字を入れる。それだけでスタイルを調整していきたいので、インライン要素であるスパンタグで囲み、requiredというクラスをつける

あとはCSSでスタイルを調整し、背景色を薄いグレーにしたら完成!

やっと第1章が終わったな、、もう少し時間をとって進みをよくしたいというのが課題です。。

c.sakyou


googleアナリティクスを入れてみた

監督ご指導につき、googleアナリティクスを導入してみた。

むむ。入れてみたはいいものの使い方わからん。と少し調べてみた。基本中の基本。

セッション数:サイトに何回の訪問があったか?
ユーザー数:サイトに訪問したユーザー数
ページビュー数:サイトの中で見られたページ数
ページ/セッション:1回の訪問につき、何ページ見られたか
平均セッション時間:1回訪問につき何分滞在しているか
直帰率:1ページだけ見て帰ったユーザーの割合
新規セッション率:新しく訪問してくれたユーザーの割合

他にも、どの地域の人がみているか、モバイルかPCか、男性女性等統計がでてくるようです。

調べてみると面白い。複雑な使い方はまた今度。
数字で出てくると面白いですね〜

c.sakyou