今日もお菓子が充実してます!
勉強会の概要は、
です。
css3のアニメーションセレクタの復習
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
/* cssのセレクタで選んだ要素に、アニメーションを設定 */ slider h1 img{ animation:hoge 10s infinite ease; } /* アニメーションの内容は@keyframesに指定する */ /* ベンダープレフィックスごとに必要 */ @keyframes hoge{ 0%{/*アニメーションの始点。全体の0%*/ opacity:0; width:0; } 100%{/*アニメーションの終点。全体の100%*/ opacity:0.2; width:30px; } } |
- セレクタで選んで、keyframesで指定。2段構えになっている
- アニメするプロパティは、valueの値が連続的に変化できるものだと思って良い。
- 途中を連続する値にできないプロパティでも、z-indexなどは、値が変化する。
|
1 2 3 4 |
@keyframes hoge{ 0%{opacity:0;} 5%,100%{opacity:0;} } |
CSSセレクタと同じ様に、keyframesもカンマ区切りで列挙できる。上記の様にすると、5%から100%までのopacityは変わらない。
cssで画像をクロスフェード&レスポンシブデザインでの高さの問題についての解決
position:absoluteの子要素しか入っていないコンテナー（親要素）は高さが0になる。しかし、コンテナーに高さを指定すると不都合が出る。
そこで、一枚目のimgはposition:staticsのままにし、2枚目以降はposition:absolute,animationする。
レスポンシブウェヴデザインにするとき、imgのwidthを％にしておけば、imgは親要素の幅に合わせて変わり、高さを指定しないことで、imgの縦横比は正しいままになる。
かつて、1px四方の透明画像spacer.gifを作成して、その幅や高さをつっかえ棒にするテクニックがあったのを思い出しますね。
詳しくはこちら「css animation-delay の使いどころ」で。
真中さんもcssで画像をクロスフェード&レスポンシブデザインとして復習したようです。
html5の新しい要素や意味の変わった要素いろいろ
セクショニングコンテンツ
- article ≒記事
- section ≒部分、部所、章
- nav メインの（主要な）ナビゲーション
- aside 文脈から離れた内容、バナーなど
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<!-- セクショニングコンテンツを使わなくても、見出し要素でセクショニングは決まる。けど... --> <body> <h1> body の h1 </h1> <p> body の p </p> <h2>(セクショニング A が始まったと解釈される)</h2> <p>(セクショニング A のp)</p> <h3>(セクショニング A-1 が始まったと解釈される)</h3> <p>(セクショニング A-1 のp)</p> <h2>(新しいセクショニング B が始まったと解釈される)</h2> <p>(セクショニング B のp)</p> <!-- どうやってここに body の pを書けば良いのか？ 直前のセクショニングが明確に終わったことが表せない。 --> </body> <!-- html5のセクショニングコンテンツを使うと、セマンティックな構造をつくり易い --> <body> <h1>(bodyのh1)</h1> <article> <h1>(articleのh1)</h1> <section> <h1>(sectionのh1)</h1> <p>(sectionのp)</p> </section> </article> <p>(bodyのp)</p> </body> |
ヘディング
headingとは日本語で「見出し」のこと。
- hgroup（子要素はh1〜h6のみ）：タイトルとサブタイトルの様な表現をする際に便利。hgroup でくくらないと h2 が出て来たときに、新しい暗黙のセクショニングが始まったと解釈されてしまう。
- h1〜h6
セクショニングコンテンツではないが、新しい要素
- header （div id=”header”としてた箇所）
- footer （div id=”footer”としてた箇所）
idではなく、要素になったので、どこに入れても、複数出現しても良くなった。以下にHTML.JPを引用します。
footer 要素は、その直近の祖先にあたるセクショニング・コンテンツ、または、セクショニング・ルートのフッターを表します。フッターは通常は、そのセクションに関する情報を含みます。例えば、誰が書いたのかとか、関連のドキュメントへのリンクや、著作権データや、その類です。
footer 要素がセクション全体を含む場合、それらのセクションは、別表、索引、長めの奥付、くどくどした使用許諾といったコンテンツを表します。
注意：セクションの著者や編集者の連絡先情報は、address 要素に属しますが、それ自身を footer の中に入れることができます。header や footer の両方にふさわしい署名欄などの情報は、どちらにも入れることができます（または、どちらにも入れない）。これらの要素の主たる目的は、単に著者が運用管理やスタイリングしやすいよう分かりやすくマークアップできるようにするためでしかありません。これらは、著者に関して特定の構造を課すことを意図したものではありません。
他にもいろいろ新要素
- figure 別途記載した図像や絵
- audio 音声を簡単に貼り込める
- time
- canvas スクリプトにビットマップ・キャンバスを提供し、グラフ、ゲームグラフィックス、そのほか、ビジュアル・イメージをその場でレンダリングできる。
xhtmlとは扱いが変わった要素
- strong 文中の特定の語句が重要であることを示します。
- em 文章の意味合いとして強調したい語句やフレーズを示します。
5月の会費とお部屋代
５月分の会費3000円を各々納めました。（真中のぶ、ランサーしょうじ、kaneda、かおりんご、ジェイ子）
4/5の1day会費1000円をsa-kaが納めました。
５月分のお部屋代3200円を支払いました。(残金1万1,800円)
“パソコン倶楽部りんご”にSNSボタンを設置する
“パソコン倶楽部りんご”の、facebookとtwitterのアカウントを取得しました。かおりんごさんがSNSボタンを設置してくれます。
こちらも参考になれば「SNSボタンを設置方法」
ついでに、wordpressのページビューカウントを表示する方法についても調べて下さい。
投稿を見つけ易くする工夫
人気の記事や、メンバー各自のお気に入り・おすすめの記事を、うまくコントロールして来訪者に見せるWordPressの仕組み（プラグインを含む）があれば、見つけて提案してください。