2013-4-5勉強会

今日もお菓子が充実してます!
2013-04-05-お菓子

勉強会の概要は、

  • css3のアニメーションセレクタの復習
  • cssで画像をクロスフェード&レスポンシブデザインでの高さの問題について
  • html5の新しい要素や意味の変わった要素いろいろ
  • 5月の会費とお部屋代のお支払い
  • “パソコン倶楽部りんご”にSNSボタンを設置する

  • です。

    css3のアニメーションセレクタの復習

    • セレクタで選んで、keyframesで指定。2段構えになっている
    • アニメするプロパティは、valueの値が連続的に変化できるものだと思って良い。
    • 途中を連続する値にできないプロパティでも、z-indexなどは、値が変化する。

    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 文脈から離れた内容、バナーなど

    ヘディング

    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月の会費とお部屋代

    5月分の会費3000円を各々納めました。(真中のぶ、ランサーしょうじ、kaneda、かおりんご、ジェイ子)
    4/5の1day会費1000円をsa-kaが納めました。
    5月分のお部屋代3200円を支払いました。(残金1万1,800円)

    “パソコン倶楽部りんご”にSNSボタンを設置する

    “パソコン倶楽部りんご”の、facebookとtwitterのアカウントを取得しました。かおりんごさんがSNSボタンを設置してくれます。
    こちらも参考になれば「SNSボタンを設置方法
    ついでに、wordpressのページビューカウントを表示する方法についても調べて下さい。

    投稿を見つけ易くする工夫

    人気の記事や、メンバー各自のお気に入り・おすすめの記事を、うまくコントロールして来訪者に見せるWordPressの仕組み(プラグインを含む)があれば、見つけて提案してください。

    カテゴリー: 勉強会 | タグ: , , , , , | 投稿日: | 投稿者:
    ジェイ子

    ジェイ子 について

    WAVE立川校に2010年の3月〜8月に通っていました。取得コース名は『WEBプロフェッショナル&グラフィックコース、WEBディレクション講座』WAVE在籍は2012年11月まででした。2010年9月以降はWEBから遠ざかっていたのですが、真中さんやかおりんごさんや高橋先生のおかげで倶楽部りんごに参加できたので、また1から勉強し直しています。そしてWEBデザイナーを目指して頑張ろうと思っています。

    コメントを残す

    メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

    CAPTCHA


    This site uses Akismet to reduce spam. Learn how your comment data is processed.