じぶんのすきな色でサイトにいろどりと自由を。

2021-05-20

木曜日はコミュデイのため、朝からzoomにてレッスンしておりました〜。
コーディング、1週間以上やってなかったから最初ボケてたな・・・

これのおかげで私も助かってます。

そして、雑談しながらめちゃくちゃ楽しかったです。

午後からもうひと頑張り！

2020-11-19

最近スクールの受講生さんからコーディングの質問を受けたときに、多くのみなさんに、インナー幅の指定忘れが見受けられます。

今回はインナーについて投稿してみます。

インナーの指定を忘れるということは、、
デザインではだいたい、100%幅のものとmaxサイズを決めたインナー幅の指定があると思いますが、その指定をしていない、という事です。

そうすると、ウインドウサイズ基準になるので、大きなモニタで見ると要素があちこちにサヨウナラしていたりします。

例えば以下のような配置の場合です。

このようなデザインの場合、共通で使用する「.inner」などのクラスを用意し、各セクション共通でmax width指定をしたクラスを使います。

例えばインナーの幅が1160pxだった場合、

CSS

.inner {
         max-width: 1160px;
         margin: 0 auto;
}

というように指定をしておき、インナーの指定がある箇所にクラスを適用します。

自分の画面では、問題なくデザインと同じ位置に来ていたりするんですね。

昨日質問のあったデザイン例

まずはこちらをご覧ください。

 

卒業制作で、ご自身でデザインされたもので、このようなレイアウトでした。

このデザインの時のコーディング注意点ですが、
黄色の画像はウインドウの左から始まるのですが、文章に関してはインナーの中にあります。

ですがインナー(max width)の指定をしていなくて、大きなモニタで見ると画像は左、文字は右に寄っていて、真ん中に素敵な空間が生まれていました。

いいですよね、一人に慣れる場所って。。

 

お伝えすると、「私のPCではめっちゃいい感じの位置に来ていましたー！！」との事でした。

インナー指定せずにマージンを使っても、ウインドウの端からの指定になるので注意です。

この場合のイメージは、

かな〜と思います。

慣れるまで、難しいのかな〜？と思いますが、慣れてしまうと当たり前やん何言ってんの？って感じの事なので、どうぞよろしくお願いします( ´ ▽ ` )笑