今すぐ登録して、23,200件以上登録されている、業界エキスパート指導のコースを受講しましょう。
ホームのヘッダを修正
このレッスンではフォームの ヘッダーのカスタマイズを行います。 それでは今この状態ですけど ホームページを開きます。 このレッスンのサンプルファイルの ホームはこんな状態ですね。 既に全部パソコンの 表示向けにレイアウトができていて そして幅を変えると メニューの部分が レスポンシブに この様に変化するようになっています。 メニューは変化するんですが その他の項目がまだ全然設定されてないので 他の項目を設定していこうと思います。 では手始めに、このヘッダーの部分 これのこのテキストの部分 これの対策を行おうと思います。 今この部分、見てていただくと まずページ幅を変えると 早速ちょっとはみ出してしまってますね。 どんどん行くと 最終的に見えなくなってしまう。 これはまずいので、まずちゃんと ページ幅が変わっていっても このテキストは見ていてると いった状態にしようと思います。 それではまず選択ツールを選んでる状態で このテキストの塊を選択します。 そしたらここの「変形」の部分 これをクリックします。 そして今「ページの固定」の部分が 左側になってるんですけど なので左に行くほど ずれていってしまうので これを、この右側の方に固定します。 この状態でまた ページの幅変えてみると 今度はちゃんと 右側の端っこにくっついてきてくれて 望み通りの結果となっています。 それぞれのオブジェクト、どこに 固定するか左右どちらかか 真ん中かですね。 このメニューは真ん中に 固定してありますけど このテキストの場合には右側を キープしたほうが良いということですね。 これを、この項目ごとに 選んでいきます。 そして更にこれ狭くなっていくと この辺はずっといいんですけど この後メニューの表示が パッと変わります。 このモバイル用のメニューになると メニューとテキストが 重なってしまいます。 なのでこれちょっとまずいので 重なった段階で変えなきゃならないですね。 そしたら、ここの 三角をクリックして、このメニューの方で 表示が変わる部分まで飛びます。 そしたら、このページには ブレークポイントが設定されてないんです。 この三角はあくまで、これは マスターの方のブレークポイントを 表してるにすぎないので この幅になった所で この＋のボタンをクリックすると 新たにブレークポイントができます。…
エクササイズファイルを使って実践してみましょう。
インストラクターがコースで使用しているファイルはダウンロードできます。見て、聞いて、練習することで、理解度を深めることができます。
コースをダウンロードして学習しましょう。
ラーニングコースをダウンロードしてオフラインで視聴しましょう。ダウンロードしたコースはLinkedInラーニングのモバイルアプリ (iOSまたはAndroid) で視聴できます。