Re:1から始めるプログラミング学習

皆さん、初めまして!

フロントエンドエンジニアを目指してプログラミング学習をしていますnoe(のえ)です!

僕は現在25歳で実家に住んでいます(地方です)

大学院を中退し現在ニートです( ;  ; ) 

学生の頃からプログラミングが好きだったので職業にしたいと思い学習を進めています!!!

 

 

 

僕は大学では量子力学の研究室でプログラミングをしていました。Fortranという言語を使ってました。大学院では宇宙物理系の研究室に入り、やはりプログラミングをしてました。院は人間関係に悩み中退しました。

 

web系の言語はFortranに比べてすごく簡単でプログラムも読みやすいです!

PHPやるまで連想配列なんて知りませんでしたwwww

jsなんかは挙動が華やかでプログラミングのイメージが完全に自分の中で変わりましたね。

 

初めの記事は学び直しということで選んだ”1冊ですべて身につくHTML&CSSとWebデザイン入門講座”で学習したPointをデザインとプログラミング(コーティング)で分けて軽くまとめたいと思います!

 

WEBデザインは4つの要素から成る

1.レイアウト

レイアウトはユーザーに情報が効率よく伝わるものが理想的。しかしデザイン初心者や僕のようにフロントエンドエンジニアを目指す人は凝ったレイアウトを考えるのは難しいので基本的でシンプルなものにするのがいい‥というか以下から選べばいい。

 

  • 2カラムレイアウト
  • グリッドレイアウト
  • シングルページレイアウト

 

それぞれのメリデメ

2カラムレイアウトのメリットは見慣れていて視線に迷わないことだが、それはつまらないというデメリットにもなる。レスポンシブ対応も少しやりにくい。

 

グリッドレイアウトはカード(パネル)を並べるだけだが写真が多くて華やかなのがメリット。きっとポートフォリオにも良いでしょう。レスポンシブ対応もカードを縦に並べて終わりで容易。デメリットは見当たらない

 

シングルページレイアウトは1つのコンテンツを全面に押し出してアピールできる。ポートフォリオをまとめたサイトは大体コレ。レスポンシブ対応が簡単。

 

 

2.配色

  • ベースカラー70%、メインカラー25%、アクセントカラー5%の比率を守れ
  • 色相は目指す印象に合わせて選べ(暖色、寒色)
  • テイストの出し方はググる(例:高級感 コツ)

 

 3.フォント

  • フォントのサイズは統一せよ(h1は24pxでh2は20pxで固定するなど)
  • フォントサイズのバリエーションは2~5種類に絞れ。
  • フォントの種類は1~3種類に絞れ
  • どんなイメージを与えたいかによって書体を選ぶこと(自分の好き嫌いで決めない)

 

4.余白

  • 要素と要素の余白は15 or 20pxが見やすい
  • 上下に並列されたpタグはmb20pxが見やすい
  • ボタンなど内部余白は1:2や1:1など整数比で決めるのが良い
  • 行間>文章周りの余白にすると読みやすい

 

 

 

具体的なコーディングの手順

1.構成要素とサイズを確認

サイズの確認では横幅と高さが固定値(何px)であるか可変(auto)であるかを見る。

 

2.ベースのCSSを書く

書体や文字色などのサイト全体共通部分のCSS=ベースのCSS

font-family毎回考えるの面倒だから自分は今後このテンプレ使いますw

もう迷わない、「@font-familyはこれでOK!」を色々考えてみた。 | unitopi - ユニトピ -

aタグの装飾のリセットとかも書いちゃう。

 

3.大枠のレイアウトをまず組む

ヘッダー、フッター、サイドバー、メインエリアなどのレイアウトを組む。コメントで”これは一時的な確認用”とか書いて一時的に線と背景色をつけてから取り組むとよし。

 

4.どんどん作る

あとはどんどんデザインに近づけていくだけ。ヘッダーみたいな各ページ共通の部分から作ってからメインコンテンツ表示エリアなどを作って行くとよい。ヘッダーとかもう作り方決まってますし。(僕は)まずはPC版の表示から作ります。

 

5.レスポンシブ対応

余白や文字サイズをデバイスの画面幅に合わせて小さくする。複数のカラムの横並びはカラムの数をどんどん減らす。iPhoneとかは1カラムにするなど。

 

 

 

CSSで使ってはいけない機能について

1冊ですべて身につくHTML&CSSとWebデザイン入門講座で紹介されているCSSグリッドはIEではちゃんと動かないので原則使わない

background-blend-modeもIEでは動かないらしい。そもそもグラデーションはデザインとして難しいです。なるほどデザインというデザイナー向けの本でも割と後の方で扱われてた。

フロントエンドエンジニアを目指す人はブラウザの対応状況を考えることは必須なので初学者がこの本で学ぶのはある種危険を孕んでいると思いました。注意してください。

 

 

 

 

今後の方針 

以上です!٩( ᐛ )و

WEBデザインの基礎知識とコーディングのざっくりした手順が学べました。

今後は以前学習に使ってたHTML&CSSモダンコーディングをFlexboxでコーディングして学びたいと思います。この本はfloatでレイアウトを組んでますが現在は新規のものはfloatで作らないようなので学び直したいと思います!

 

 

www.amazon.co.jp

 

現在ニートで収入もなく家族に頼っているのでフロントエンドエンジニアのアルバイトに応募したいと思っています。

 

僕は過去にJSやPHPをガッツリ学んで自作のアウトプットを制作しているのでそれをポートフォリオにするつもりです!

 

まだ25歳で年齢的な問題はないはずなので面接次第だろうなという感じです