【勉強メモ】コーダー目線のSTUDIO覚書4~ページの作成、ヘッダーの作成、リンクにhoverを設定する、MV作成~

前回はこちら

今回から実際に手を動かして勉強していくよ!!!

がんばるぞ

模写するサイト

サイト…というよりはSTUDIOの新規作成時に選択できる「The BASIC コーポレート」を真っ白の状態から作ってみたいと思います。

👆参考にするデザイン(ほぼワイヤー)

作成するページを把握しておく

新規ページ作成から、ページを作成しておきます。(ページ管理 | STUDIO U) 
以下の5ページ作成。

  • トップページ
  • 私たちについて(about)
  • 会社概要(company)
  • すべてのニュース(newslist)
  • お問い合わせ(contact)

ヘッダー(グローバルナビ)部分を作る

01.ひな形をドラッグ&ドロップ

STUDIOには「パーツテンプレート」という便利な機能があります。「ナビゲーション」のテンプレを使ってみたいと思います。
「セクションを追加」からナビをドラッグ&ドロップしました。

02.不要なアイテムを削除し、文字を変更・追加する

ボタンを削除して、タイトルと右側のグローバルナビを変更しました。

03.タグ構造を調整する

デフォルトの状態ではタグ構造がちょっと微妙なので、「レイヤー」からタグ構造を変更しました。

div→header、h1、navなどに変更しました。
ナビのテキストはそれぞれグルーピングしてul>li>spanにしてます。(spanは後からaタグに変更予定)

04.色を調整する

要素をShift + クリックで複数選択し、「色」から#333を指定。
このとき、「+」をしておくと#333がアセットとして追加されます。

gナビにリンクをつける+hoverの動き

今回実現したいのはこんな動き。

CSSだったら疑似要素(:after)を使って再現できるけど、STUDIOの場合はdiv要素で入れます

条件付きスタイル(in)ホバー)」で再現できます。

「(in)ホバー」は、ホバーを設定した要素の中にある要素に、さらに別のスタイルを付け加える時に使います。このように、「ボタンの中で矢印だけ色を変える」といった表現ができます。親となるボックスで何らかの「ホバー」を設定していないと、「(in)ホバー」の設定はできないので注意してください。

(公式サイトより引用)

01.まずはdivの準備

□をドラッグ&ドロップでナビ内に入れます

02.さらに該当のレイヤー内に入れる

「li>span + div」となるように移動します。

03.グループ化

spanとdivを選択し、 ctrol + Gでグループ化。

これはグループ化後の状態

グループ化したdivはaタグ(リンク)に変更します。
aは「タグ」から変更はできません。リンクを指定することでaタグに自動変換されます。

aタグ(リンク)に変更する方法

04.並び方向を↓に変更

flex-direction:columnの状態にします。

05.線の調整

塗りを黒、横幅を100%、縦幅を1pxに変更。
これでhoverの前準備は完了です。

06.モーションの設定

上にあるタブから「モーション」を選択。

イージング、時間、スケールを変更します。
スケールを「0」にすることで「hoverする前の状態」を再現しています。

07.(in)ホバー指定…親(aタグ)の状態を変更しておく

hoverした際、子要素に動きを適用させるには「(in)ホバー」を使うことで再現できます。
子要素に変化をつけたい場合は、aタグに直接変化が無くても何らかのhover指定をしておく必要があります。

  1. aタグを選択
  2. 条件付きスタイル「ホバー」を選択
  3. 変化なし(透過度1を指定する)

その後、divを選択すると…

inホバーが出現した!

08.ホバー時のモーションを指定

動かしたいdivを選択したうえでinホバーをクリックし、スケールを「x : 1」にします。

09.ライブプレビューで確認

画質粗くてごめんね

いいかんじ!
ただ、中央を基軸にしているので想定の挙動と違ってました。(線は左から右に100%にしたい)
なので「モーション」の原点を左に変更しました。

あとはpadding等微調整し、完成!

09.複製する(コピペ)

作ったアイテムを複製します。

初めて動画とってみたけどアタフタモタモタしすぎてて草

ヘッダーのロゴにh1とリンクを設定する

ヘッダーのロゴ部分を調整します。

h1>a は出来ない(多分)
見出し(h1~h〇)はテキストに対して設定可能で、グループに対しては設定できないです。

テキストに対して設定できるタグは、

  • p
  • h1~h6
  • li
  • span

div(グループ)に対して設定できるタグは

  • div
  • nav
  • header
  • footer
  • section
  • article
  • main
  • ul
  • li
  • label

詳しい内容はHTMLタグ | STUDIO Uにかかれてます。

なのでh1にリンクをつけたいときはa>h1の構造になります。

aタグ>h1タグになる
  1. テキストを挿入し、h1に変更する
  2. h1をグルーピングし、グループにリンクを設定する

余談

h1~h6って、入れ子ルールではどうなってたかな?と思って確認してみました。

【一覧表あり】HTML5でのタグの入れ子のルールを徹底まとめ | webliker

hタグ>aタグはルール上は問題なさそうです(安心)。
STUDIOで実現できないのはシステム上の理由なのかな?
もしかしたら私が知らないだけかもしれないので、可能な場合は記事を更新しますm(__)m

MV作成

MVは特筆することは特にないです。
関係ないけいど人生初の動画編集してみたので良かったら見てね↓

今日はいったんここまで…
むずかしいネ…

勉強は続くのであった…

参考になったサイト・関連記事

STUDIOの勉強記事一覧はこちら