未経験から転職を目指す！ Webデザイナー編 background-size: ;
こちらの記事は今は何もスキルがないけど、手に職をつけて転職したい！
今の現状から脱して自分を高めていきたい！「自分以外の誰か」に喜んでもらえるような仕事をしたい！といったストイックな皆さんに読んで欲しい。
また、Noteの名前通りに私の学習したことの記録、そこで得たことをまとめていくための大学ノートのような使い方をしたく、書き始めました。
今はまだ拙いですが、時間をかけて良いものを作り上げて行けたらなと思います。
よければ最後まで読んでいってください（主に今はまだ何もしていないけど何かしなければ行けない、けど何をしていいのかわからない人たちへ向けた記事にして行けたらなと思っています。）
未経験からWebデザイナーにしろプログラマーにしろカメラマンにしろ、転職活動をする上で必ず必要になってくるポートフォリオサイト。今ではWordpressを使ってのポートフォリオ作成が主流になりつつあるが、HTML/CSS Javascriptを使ってのポートフォリオ構築も技術を高めれば仕事に活かせるため、学ばない手はありません。アメリカから始まり日本でも徐々にノーコードが台頭してきていますが、できないよりできた方がいいと思います。
なので、今では本職の合間に1日1ページのシングルページレイアウトの構築を始めています。
日本語も英語もプログラミング言語（HTML/CSSはプログラミング言語ではありませんが...）も結局は言語。毎日触れるか触れないかで成長の幅は大きく変わってきます。学習に時間を割くほど余裕のないほど忙しい日でも必ず言葉に触れる習慣をつけていくことが望ましいと思います。
HTMLで装飾なしのシングルページレイアウトを組む場合、私を含めて経験の浅い人が取り組みやすいデザインのものは大抵コードに大きな差がないため、デザインで差をつけるとしたらCSSしかありません。
その中で私が「なんじゃこれ？」と感じたものを参考書籍も交えながら書いていきたいと思います。
CSSってなんですか！？ backgroundプロパティ
市販のテキストやスクールのカリキュラムの中には大体HTML/CSSに触れる機会があり、社会人が日常で「お疲れさまです」という言葉を発するのとおなじくらいの頻度で出てくる呪文...もといbackgroundプロパティ。
主に背景色や背景画像の指定に用いられます。
背景画像のサイズの指定を行うには、値を指定する必要があり、指定する方法は以下の方法になります。
・background-size: width（幅） height（高さ）;
・background-size: width（幅）;
・background-size: キーワード;
背景画像の幅と高さの指定をする場合、使用する画像のサイズから計算し値を指定する必要がある。サイズの指定は%（パーセント）とpx（ピクセル）の2通りがある。
キーワードを使う場合、初期値であるautoの他、
・cover
・contain
・数値+単位
・割合
が挙げられる。
・background-size: cover; は
縦横比を保ったまま、背景画像が領域を全てカバーする表示サイズに調整される
・background-size: contain; は
縦横比を保ったまま、さらに画像を切り取ることなく、背景画像が領域に収まる最大サイズに調整される
・background-size: auto; は
背景画像の表示サイズが自動的に調整される
・background-size: 任意の数値+単位; は
背景画像の幅と高さを半角スペースで区切って、単位つきの数値で指定します。1つだけ指定した場合、他は全てauto指定となる。
・background-size: 割合（%）; は
背景画像の幅と高さを半角スペースで区切って、%値で指定します。値は背景画像を表示する領域に対する割合となります。1つだけ指定した場合は、2つ目はauto指定となる。
背景画像を配置する領域はプロパティを指定する要素のボックスに当たる。background-originプロパティで領域を指定している場合には、その指定に従うこととなります。
もっと細かな情報が詰まっているこちらの書籍、未経験からWebデザイナーを目指すのであれば、必携と断言してもいいくらいオススメしたいもの。
私がデザインを学んでいるスクールはぬるま湯デザイン塾ですが、テックアカデミーのメンターさんもオススメしていた書籍です。
著者：しゅがー
高校三年間を山岳部で過ごし、大学生は１年間ほどワンゲル同好会に所属。その後はカメラに目覚め登山からは少し遠ざかる。
大学生活はカメラと法律と公務員試験の勉強に明け暮れる。
努力不足で公務員試験では結果振るわず、チェーン店飲食店の社員として勤務。仕事の合間に、カメラとwebデザインとプログラミングを学びながら人生を模索中。
この記事が気に入ったらサポートをしてみませんか？