Muse基本講座

アコーディオンパネルの作成

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
見出しをクリックすると内容が入れ替わり、他の部分がたたまれるアコーディオンパネルについて解説します。
講師:
04:03

字幕

このレッスンでは アコーディオンパネルの 作成について解説します サンプルファイルの「 ABOUT ME 」の ページを開きます ここに 「ウィジェットライブラリ」から 「パネル」の「アコーディオン」 これをアサインしてみましょう この「 MY SKILLS 」と書いてある所です この下に「アコーディオン」を ドラッグ&ドロップで持ってきます そうすると こんな感じの パネルが配置されます 位置を合わせて もう少し大きくして どんな動きをするのか 1回見てみましょう プレビューしてみます そうすると こんな感じに クリックした所が 全体に広がって 他の所がたたまれるという この様な 表示になります これがアコーディオンパネルです では この内容を詰めていきたいと思います では 素材中の「 skills.txt 」 これで自分のスキルを語っているわけです 「 Photoshop 」「 Illustrator 」「 HTML & CSS 」 それぞれ 見出しと本文があります それを対応していきましょう まず 最初のここです 見出しと本文があるので まず 見出し「 Photoshop 」を Mac の方は command Windows の方は Ctrl を押しながら C を押してコピーして そうしたら テキストを選んで 「テキストツール」を使って このテキストを選んで command もしくは Ctrl と V で貼り付けます そうしたら 本文の方も コピーして こちらに貼り付けます 次は「 Illustrator 」の 見出しをクリックして そして貼り付けます 見出しを選ぶと本文の方も 自動的に切り替わります こんな感じです では「 HTML & CSS 」です 見出しを選んで 見出しを貼り付けて こんな感じにできました これで内容は入りました あと これは見た目がグレーで なんとなく寂しいので 見た目を変えようと思います そこで使うのが「ステート」です 「ステート」を開けます 見やすいように切り離して こちらに持ってきます そうすると「ステート」で 「通常」時 「ロールオーバー」時 「マウスダウン」 ボタンと同じように この様なステートが設定可能となっているので これで色を設定していきましょう 今回は全部同じく このロゴと同じような オレンジ色に統一してしまいましょう こんな感じです では この状態でプレビューしてみましょう そうすると こんな感じに 見出しの所は 目立つ形でオレンジになりました なかなか少ないスペースで 沢山の文章を載せることができますし 動きも印象的で かなり サイトの構成として面白くなります 是非ともこれを活用してください

Muse基本講座

Adobe MuseはHTMLやCSSといった専門知識がなくても、IllustratorやInDesignを使うような感覚で手軽にWebサイトをデザインできるソフトです。このコースではMuseを使ってページに文章や写真をレイアウトするやり方やグラフィックの作成、モバイル機器に対応したサイトの作成方法などについて学習します。

3時間55分 (72 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 3,990
発売日:2015年05月20日

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

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

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