UI/UXデザイナーを目指します。

1年ぶりくらいに、ブログを書きます。

実は、Youtubeも始めておりまして、

現在登録者数300人です。

テーマはぶどう農家様のぶどう栽培のコツや、

グチ?w

みたいなのを、適宜アップしております。

ご興味あればぜひそちらも見てみてください。

【悩みながら】天山収穫中。これから発送ピーク!

というわけで今日から、

UI/UXデザイナーになるにあたり、勉強したこと、

特につまづいてしまったことを、

学習のメモとして書いていこうと思います。

今日のメモは、

画面いっぱいに画像を表示させて、

・画面のpx数に合わせて画像の自動調整をするには?

・文字の折り返しをさせない方法?

を書いていきます。

htmlタグ・bodyタグにまとめて書く。

まず、最初のメモ、画像の自動調整の方法ですが、

CSSのファイルに、

html,body {

font-family: “あおぞら明朝 Light”;
color: $cWhite;
position: relative;
width: 100%;
height: 100%;
margin: 0;
padding: 0;

}

こんな感じで書き、あとはレスポンシブ対応に合わせて、

スマホ・タブレット・PCにそれぞれに呼応した大きさでかけば、

なんとか中央揃え・大きさの自動調整をやってくれました。

white-space: nowrap;を、追加記載する。
そこで少し困ったのが、
文字列が崩れてしまうこと。
そのために、white-space : nowrap;
を崩れている該当箇所に記述しましょう。
そうすることで、なんとか文字崩れを解決できました。
今日はさらっと書きましたが、
これからさらに充実させていこうと思います。
間違えていたら、優しくご指摘のほど、よろしくお願いいたします。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする