アイカカがWebデザイナーになるまでの記録

Webデザイナーになるための職業訓練に通ってます。将来はフリーランスになりたいどす。

Webデザインの職業訓練に行ってしておくべきこと。他より秀でるには基本マスターと+αを

f:id:ai_takakura:20180925193339p:plain

こんにちは!アイカカです。

今日から職業訓練の内容は木曜日まで職業支援の時間になっています。

そして今日は、実際に訓練校の卒業生で、今は社長をされている方がお話をしにきてくださいました。

細かくいうと特定されそうで少しビビっているので詳しいことは書きませんが
職業訓練の間にすべきことがわかったので、紹介しようと思います。

あと、お話をしてくださった方の話の中で、そうなんだ!やっぱりそうなのねと思うことも書きます。

あとあと、良い!と思った、紹介してもらったプログラミング勉強ができるサイトも最後にのせておきます。

 

 訓練中に意識すること・すべきこと

  1. 自分の得意なこと、強みをのばす(デザインが得意ならデザイン、コーディングが得意ならコーディングなど)
  2. 授業の内容は完璧に理解できるように心がける
  3. 訓練のことにプラスして、もっと応用の勉強をしたりする

 

そうなんだ!と思ったこと

  1. 田舎でもいいけど、敷居が高いので、都心部に出て勉強ができるなら都心に出て、スキルを身につけたほうがい
  2. 未経験でも給料が高いところは企業も真剣に面接するので、それなりの技術がないと採用はされてくれない
  3. たくさんの働き方(Webデザインのみとか、コーディングも兼務とか)があるので、自分とマッチした会社を選ぶべき
  4. 自分がしたいことをよく考えて会社選びをしていくことが良い
  5. 自分を洗脳するぐらいの勢いで、Webを好きになろう!
  6. クラウドワークスとかは中途半端な実力しかないときはしない。中途半端だと作っても採用されないので、お金ももらえない、はじかれるの繰り返しで悪循環におちいる
  7. たくさんの働き方があるけど、自分が好きな業界の中の、会社の中のWeb担当なら、それはそれで楽しいかも。でも一人で担当とかだったりで、セキュリティとかなーなーだったり、成長できないこともあるかも
  8. いまWeb業界、売り手市場なので、チャンスはたくさんあると思う

 

良いと思ったプログラミング勉強サイト

https://dotinstall.com/

以前、フォロワーさんから教えてもらっていたりしましたが、やっぱりこれも改めてみると良いなぁと思いました。

Progateとかもしましたけど、個人的にはこっちのドットインストールのほうが目的がしっかりしてやりやすいかと思います。

私はこっちに移行して勉強しようと思います

 

簡単でしたが、今日職業人講話で勉強したことのピックアップまとめです!

ではではっ!

今日のHTML・CSS復習

ホームページができたきっかけ?

ホームページは書類をネット上でも見れるようにしたらいいのでは?ということではじまった、できたものだそうです。

で、普通にメモ帳に打つだけじゃ、ブラウザーに表示したら横一列に表示されるだけなので、どこかの団体(W3Cとか?)が綺麗に表示できるようなタグ作ってやるよって言ったのがHTML・CSSのはじまりのよう。

名称の呼び方

p要素

要素、というものはpのことでいうと<p>と</p>をセットで要素と呼ぶ

開始タグ、終了タグ

<p>が開始タグ

</p>が終了タグ

代表的な要素

  • p 文章・段落
  • br 改行
  • img 画像
  • ul リスト点
  • ol リスト数字
  • li リストの中身?
  • h1〜h6 見出し

HTML5からこんなのがでました

atricle、section、asideも?

この中にくくることによって、h1h2h3h2h3のように表示できるようになった?

HTML5より前だったら、h1h2h3h2h3のように使うことはきなかったとか。

HTML5を使っていることを宣言しなくちゃいけないよ!

<!DOCTYPE html>

という文言をメモ帳の一番上にいれて書くことにより、HTML5をつかってるよと宣言することができる。

入力しなくても、HTML5になるらしいけど、入れた方が安全だとか。

<html lang="ja">

日本語で表示させるよってこと

<meta charset="UTF-8">

これをいれると、文字化けしませんよ?かな

index.htmlとしてメモ帳で保存する時は文字コード

UTF-8に選択して保存

フォルダの階層

f:id:ai_takakura:20180920184847j:plain

フォルダの階層図

書くとこんなかんじ

色について

f:id:ai_takakura:20180920184852j:plain

わたし、10年近くしてて、このRGBの概念しらなかった。わろた。

#赤緑青の要素?というかそんなのでなりたってるんだね。

だから、これだったら、赤の部分がffだからフルってことだよね、それでまっかってことだよね。

アルファベットが入る時はどうなってるのかわからない

CSSの設定方法は3種類あるよ

  1. <h1 style="">で直接指定
  2. <head><style>中身</style></head>で指定
  3. style.cssを外部データとして取り込んで設定

よく使うから重要なCSS

line-height:XXpx 行間・行の高さ

よく使われるのは15pxとか16pxと聞いたけど、仕組みをみるかぎり
フォントサイズが10だったとして、ラインの高さを14にしたら、14-10=4で、
4が文字の上下に追加される感じになる。

だから、デフォが15だったとしても、フォントサイズ変えたら変わるよね。
ね?

30pxの30px
30px30px

30pxの100px
30pxの100px

30pxの0px
30pxの0px

あんま表示かわんないなぁ。

text-align: 行揃え

ブロックレベルの要素に使えるらしい。

leftだよー

rightだよー

centerだよー

justifyだよーjustifyだよーjustifyだよーjustifyだよーjustifyだよーjustifyだよーjustifyだよーjustifyだよーjustifyだよーjustifyだよーjustifyだよーjustifyだよーjustifyだよー

startだよーstartだよーstartだよーstartだよーstartだよーstartだよーstartだよーstartだよーstartだよーstartだよーstartだよーstartだよーstartだよーstartだよーstartだよー

endだよーendだよーendだよーendだよーendだよーendだよーendだよーendだよーendだよーendだよーendだよーendだよーendだよーendだよーendだよーendだよーendだよーendだよーendだよー

ジャスティファイがうまく表示されていない気はするが、よしとしよう。

font-family: フォントを指定する

フォントはフォントファミリー名でも指定できるし、総称ファミリー名でも指定できる

フォントファミリーの場合は"MS P明朝"のように指定して、総称はserifってそのままかいていい。

font-weight: フォントの太さ

  • normal 普通400
  • bold 太文字700
  • bolder 太くなる
  • lighter 細くなる
  • 数値 100〜900まで100区切り?フォントによってはなくて太くなったり細くなったりしない

font-size: フォントサイズ

いろいろある

color: 色を指定する

色はカラーコードでも、名称でも、rgbでも表せれる

rgbの時は rgb(255, 111, 000);みたいな感じ

background-color: 背景色

ボックスの内容、パディング、ボーダーに適応される

マージンは透明

初期値はtransparentこれたしか透明

今日はとりあえず

こんなもので。復習の仕方確立しなきゃなぁ。でも復習は改めて大事だと思った。

抜けてたものをとりかえせる。

授業中もなるべく言われたところをしっかり理解しようと思う。

あああああ頑張る泣