CSS3のアニメーションテクニック

開いたメニューのHTMLを確かめる

全334コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
アコーディオンメニューのもととなる開いた状態のレイアウトについて、HTMLドキュメントの内容を確かめます。
講師:
07:26

字幕

このレッスンでは、 アコーディオンメニューの 元となる、 まだアニメーションが加えられる前の、 開いたメニューの、 構成について、 HTMLドキュメントを開いて、確認します。 開いた状態のメニューというのがこれです。 グレーの、項目が、 メインメニューと、ゆうことになります。 そして、その下にある、白い領域、 ここに、リストされている項目が、 サブメニューで、 アコーディオンメニューが完成すると、 クリックによってこの白い部分が、 開いたり、閉じたりと、ゆうことになります。 では、HTMLドキュメントを、 ドリームウィーバーで見てみましょう。 ドリームウィーバーで開いた、 HTMLドキュメントです。 基本的に、 コードを直接編集していきます。 ですから、 この領域の外にある、パネルが、 少し、邪魔です。 とゆうことなので、 ウィンドウメニューから、 パネルの非表示で、 コードだけが、 全体に見えるようにします。 まずは、 ボディ要素から確認していきましょう。 ボディ要素の中には、 まず、div要素があり、 idが「wrap」という名前の通り、 全体を包んでいます。 そして、その中に、 これが、メニューの、 本体となるんですけれども、 ul要素、クラス、メニュー リストの形で、 メニューを作っている、とゆうことです。 そして、そん中に、さらに、 ul要素が入れ子になってて、 見にくいと思います。 これは一旦たたむことにしましょう。 ドリームウィーバーでは、 選んでおいて、 三角の印をクリックすると、 たたむことができます。 入れ子になったul要素をたたむと、 構成が見やすくなりますね。 この、ul要素、 メニューとゆうクラス名のul要素は、 リスト、の、項目、 li要素が、 三つ、あるわけですね。 そして、このたたんであるのが、 サブメニューと、ゆうことになります。 そして、li要素には クラス、タイトルと、ゆうクラス名が、 いずれもつけられています。 このタイトルとゆう、 クラスのリスト要素が、 メインメニューの項目と、ゆうことになります。 そして、メインメニューには、二つ サブメニューを持っているものがあって、 一つ目のサブメニューを開くと、 ul要素ですけれども、 サブメニューが三項目あると。 それから、もう一つのul要素、 サブのul要素を開くと、 項目が二つあります。 これらを元にして、 CSSの設定がされています。 ではCSSの方を見ていきましょう。 まず・・・、全体の・・・、マージンと、 余白、の定めがあり、 本文、ボディーの、テキスト揃えと、 フォント・・・、が定められています。 それから、先ほど申し上げた、 全体を包んでいるところですね。 その、マージンや・・・、幅。 テキスト揃え、といったものが設定されています。 そして、メニューの項目はすべて、 a要素になっています。 といっても、 あの、リンクの下線は出したくないので、 テキストデコレーションは、なしです。 noneですね。 それからメニューについて、 メニューの幅と、 あと、メニューには、 輪郭をつけます。 薄い、グレーの輪郭ですね。 それから背景。 メインメニューの項目の背景なんですが、 明るいグレーになっています。 そして、メインメニューの タイトル、についてなんですけれども オーバーフローがヒドゥンになっています。 これは何かと、気になるかもしれません。 では、これを一旦、コメントアウトしてみましょう。 オーバーフローを、 コメントアウトします。 では、ファイルを保存して、確認してみましょう。 確認はファイルメニューから、 ブラウザーで、プレビューで、 グーグルクロームで確認します。 オーバーフローというのは、 このボックスからはみ出した部分ですね。 リストなので、 本来はこういったものが ついているわけなんですが、 今回はリストとして、 表示したいわけでなくて、 メニューに構成したいわけですから、 このはみ出た部分は、 表示を消したいと、ゆうことです。 そこで、オーバーフロー、ヒドゥンと、 ゆうプロパティを設定すると、 この部分の表示が、 消えると、ゆうことです。 ではもう一度、 ドリームウィーバーに戻りましょう。 オーバーフローのコメントアウトは、 外して、戻しておきましょう。 消します。 そして、さらに、下にスクロールします。 タイトル、 このリスト要素ですね。 の中の、 a要素のスパン、 スパンというのは各メニューのテキストに、 設定してあります。 ですからメニューのテキストの設定 なんですけれども、 カラーはブラックと、ゆうことになります。 メニューのメインメニューのテキストですね。 メインメニューのテキストには スパンが設定してあります。 それから、タイトルの、 ulと言うのは、 タイトルの中にある、 つまり、サブメニューですね。 サブメニューの設定、とゆうことになります。 サブメニューについては、 背景が、白ですね。 それから、文字色が、黒ではなくて、 メインメニューは黒でしたけれども、 少し、薄めの黒、 グレイになっている、 ゆうことがわかります。 それからa要素ですけれど、 リンクとしてのデコレーションはしない。 あとは、 形とか、位置揃えと、ゆうことです。 そして、 ボトムと、ゆうのがあります。 このボトムとゆうのは、 実は一番最後の項目、 一番最後のメインメニューの項目。 これが、idボトムになっています。 「メニューを閉じる」とゆうメニューなので、 えー、ちょっと、スタイルを変えようと、 ゆうことですね。 とゆうことで、 フォントが少し、小さめになっています。 では、今確認した、 構成を頭において、 もう一度、ブラウザーで、 どんな表示になるか確認しましょう。 少し編集をしたので、一回保存しまして、 ファイルメニューから、 ブラウザーでプレビューで、 グーグルクロームです。 メニュー全体は、 アウトラインがついていて、 メインメニューには、 グレーの背景になっています。 文字は、黒です。 サブメニューは背景が白で、 文字がちょっとこれ、 薄くなっていると、 ゆうの、今気づきましたね。 このような設定になっています。 このレッスンでは、 メニューが開いた状態の、 レイアウトについて、 HTMLドキュメントの、 中身と、 CSSを確認しました。 ボディ要素の方は、 メニュー全体については、 メニューというクラス。 それから、 メインメニューの項目については、 li要素にタイトルと、 ゆう、クラスが設定してありました。 それから、サブメニューは、 リスト要素の中に、 入れ子になっていて、 やはり、リスト要素。 そして、 a要素が含まれていると、 ゆう、こんな構成で、 それぞれ、 CSSの設定がしてありました。

CSS3のアニメーションテクニック

このコースではCSS3を学び始めた方を対象に、ダイナミックでインタラクティブなアニメーションをCSSでどのように作るのか、そのテクニックや考え方を解説します。実際にさまざまなCSSアニメーションのサンプルをとりあげ、その制作方法についても学習します。このコースでこれらのテクニックを学べば、自分なりのアイデアをいろいろ試すこともできるようになるでしょう。

3時間22分 (36 ビデオ)
現在、カスタマーレビューはありません…
 

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。