【フリーランス】リモートに強いエージェント5社
10万円給付金で始められる無料プログラミングスクール5つ(就職可能)
50,000円がもらえる!フリーランスエージェントの紹介キャンペーン

【駆け出しエンジニアへ】未経験でもこれは覚えて入社しろ10のCSS

Web転職する

先日下記ツイートをしました。

 

 

このツイートが自分にとって珍しいくらいいいねを頂きましたので、このツイートを元に【未経験でもこれは覚えて入社しろ10のCSS】について補足と解説を書いていきます。

 

未経験や駆け出しのエンジニアの方にとって有益になるように書いていきますので、宜しければ読み進めください。

 

では早速一つ目から補足します。

①文字単位

 

 

①文字単位

関連して文字の単位迷いますよね。結論pxかremです。
emは子に影響するので使いません。
%も引き継いだ人がかなり手間なのでわかりやすいpxかremにしましょう。

あと単位統一すること。

 

ツイートのきっかけになった@tak_dcxiさんのツイートには「%やemも覚えましょう」と書いてありました。

 

もちろん他の人が作ったサイトも更新する必要が出てくると思うので全て知って損はないのですが、自分でサイト作るときはpxかremで大丈夫です。

 

で、pxかremを比較した時に優劣に差があるかというと自分の認識ではほぼないです。

remの場合下記のように指定します。

html { font-size: 62.5%; } → 10px
body { font-size: 1.6rem; } → 16px
p { font-size: 1.4rem; } → 14px

 

remが絶対にいいと書いてあるサイトもあるんですが、恐らくemと比べた時にメリットあるだけです。

 

②文字サイズの変動

②文字サイズの変動
最近駆け出しの方で良くやっているwindow幅によって文字サイズが変わるというのはcalcを使えば実現可能ですが多用は避けること。
window幅で文字サイズ変えるのは背景画像の上にキャッチが乗ってる時くらいです。

あとcalcは便利ですがパフォーマンスに影響がある(多少)

 

レスポンシブやスマホの際に幅や文字サイズを変える人がいますがほとんどの場合不要ですし、工数上がっちゃうんでやめましょう。

codepenにて実装しました。(右上ロゴをctrl+クリックで別窓で開きます)

PCでwindow幅を変えてみてください。

box1が理想なパターン、box2はやらなくていい例です。

 

See the Pen
KOQbER
by funclur (@funclur)
on CodePen.

 

もし絶対そっちの方が見栄えがいい、UI的に良いという場合があれば都度判断頂きたいですが、基本的には上記考えで大丈夫です。

 

また、font-sizeのcalcについてですが、計算式は下記です。

 

font-size: calc({フォントサイズ}vw * 100 / 基準の幅);

例 font-size: calc(16vw * 100 / 900);

基準の幅というのがわかりにくいと思いますが、コンテンツ幅のことです。

つまりphotoshopデータでコンテンツ幅が900pxの画像の上に16pxの文字があった場合は例のような計算式になります。

 

③要素の高さのとり方は3つ(用途が違う)

これ結構重要です。前にツイッターで分かりづらいと言ってる方を見かけて同じように書きました。

 

③要素の高さのとり方は3つ(用途が違う)
height→決め打ちで固定
padding→要素の増減によって高さ変動
line-height→行間にのみ使う

やりがちなのはline-heightで要素の高さを取ろうとすること。
改行したときのことを予め考えること

 

codepenにて実装しました。

こちらもPCでwindow幅を変えたり文字量を増やしてみましょう。

この例ではボックスの中にテキストがあるモジュールの高さを取りたいのですが、3つの内どれが正解でしょうか?

 

See the Pen
OKQdLj
by funclur (@funclur)
on CodePen.

 

 

1つ目は高さをテキストが超えてしまいます。

3つ目は複数行になった時行間が高いことが分かりますね。(1行だと高さを変えられると勘違いしやすい)

 

このように複数行になることを予め予期しておくことも必要です。

そう考えると正解は2ですね。

④横方向で中央にしたいけどならない

③要素の高さのとり方は3つ(用途が違う)
height→決め打ちで固定
padding→要素の増減によって高さ変動
line-height→行間にのみ使う

やりがちなのはline-heightで要素の高さを取ろうとすること。
改行したときのことを予め考えること

 

こちらは言葉で説明するより実際に例を見てみると良いです。

codepenにて実装しました。

 

See the Pen
BXJEmZ
by funclur (@funclur)
on CodePen.


上手くいかなくなったときは見返して何が違うのか見てみてください。

 

⑥display:flex

 

display:flexは多くプロパティが用意されていて何を使うかわかんなくなりますよね。

⑥display:flex

個人的にdisplay:flexでよく使うのは

・flex-wrap: wrap→折り返すようにする
・align-item→高さの上下中央
・justify-center→横の並び
・order→順番を変える

 

こちら過去に書いたブログがありますのでそちらを参照ください。

404 NOT FOUND | frontendmemo
JavaScript、Vue.js

⑦0を省く

 

不要なものは書かない=美しいコードです。

 

⑦0を省く

opacity: 0.7 は opacity: .7 と書けるのでそう書きましょう。

 

⑧0の単位を省く

これも省けるものは省くのがいいコーダーになるための一歩です。また、統一も大事。

⑧0の単位を省く

margin: 0px autoは
margin: 0 autoと書けるのでそう書きましょう。

ちなみに下記はどっちかに統一しましょう
・margin-left: 10px;
・margin: 0 0 0 10px;

 

⑨疑似要素が表示されない

自分も経験があるので…

 

⑨疑似要素が表示されない

場合は下記を忘れてないか確認すること

・content: “”
・display:blockかinline-blockか
・position: absolute

親にposition: relative

 

こちらも下記codepenを確認ください。

またabsoluteでしか配置できないと思われがちですが、display: inline-blockで横並びが可能です。

 

See the Pen
KOQJZE
by funclur (@funclur)
on CodePen.

 

⑩!important使いません。

 

こちらは現在、自分が勤務してる業務委託先のサービスで!importantが乱打されていたため、真夏の会談並みに恐ろしかったです。

 

 

とはいえ例外もあります。

 

それは調整クラスです。

 

調整クラスは

.mb5 {

margin-bottom: 5px!important;

}

 

のような感じで調整のために苦肉の策としてサイトに用意しておくcssです。

しかしこれも不要っちゃ不要です。

 

 

まとめ

 

以上、【駆け出しエンジニア】未経験でもこれは覚えて入社しろ10のCSSの解説でした。

 

もし不明点あればtwitterでDMください。

 

駆け出しの頃は覚えること一杯で大変だと思いますが、焦らず一つずつ覚えれば問題なしです。

 

また、忘れたら「未経験でもこれは覚えて入社しろ10のCSS」で検索したら上位にこの記事があるはず。。なので見返していただけるとありがたいです。

 

では引き続き頑張りましょう!

 

【無料】WebIT系優良就活・転職サイトまとめ
レバテックキャリア
レバテック キャリア

レバテックと言えば、フリーランスエージェントが有名ですが、
そのノウハウをそのままにIT・Webの業界や技術に精通した専任のスタッフが正社員の転職求人を紹介してくれます。
自分も利用した時は条件面交渉もがんばってくれました。

Tech Stars Agent

1. エンジニア経験のあるコンサルタントのみ担当!
2. IT・WEB・ゲーム業界特化の専門エージェント
3. 転職だけでなく、独立の支援も行っています
4. エンジニア限定イベントへのご招待も!
厳しい審査を通過した、厳選された求人のみを紹介しているので、
安心して転職を行うことができます。

マイナビクリエイター

転職サイトでは3本の指に入るマイナビですが、マイナビクリエイターはその中でもWeb職・ゲーム業界に特化しています。
つまり求人数が多いことはわかるのですが、量よりも質を重視しているとエージェントの方が仰っていたので、よりお勧めできます。

Web転職する 未経験でもこれは覚えて入社しろ10のTIPS
フォローする
プロフィール
hoshi

フロントエンドのフリーランスとして週5フルリモートで働いてます。

営業

Webデザイナー(アルバイト)

Webデザイナー(正社員)

フロントエンドエンジニア(正社員)

フリーランスとして独立しました。

詳細なプロフィールはこちらを参照ください。

フリーランスエージェントとは28社と面談・取材してきました。

【完全版】フリーランスエージェント28社面談を受けた現役が比較・おすすめランキングを作った

このブログでは、自身の経験からフリーランスを目指す方や駆け出しエンジニアの方に向けてWebを仕事にする方法やトレンド情報をアウトプットしています。

・フリーランスエージェント紹介キャンペーン
・転職やプログラミングの悩み相談
・仕事の依頼

など、各種お問い合わせはこちらからお願いします。

フォローする
hoshilog

コメント

タイトルとURLをコピーしました