【備忘録Vol.1】未経験のわたしがWEBデザイナーになるための備忘録 HTML・CSS編
Web業界未経験のわたしがWEBデザイナーになるための備忘録
ご覧いただき、ありがとうございます。
こんにちは、四角です。
【自己紹介】
30代 東京在住 女性ブロガー 四角です。
一般営業職からIT業界へ転職を目指しています。現在Webデザイナーフリーランスを目指して勉強しながら転職活動を行なっています。
今回は、Web業界IT業界未経験、パソコンスキルそこそこのわたしが、WEBデザイナーになるために、学んだことや忘れたくない事を少しずつ記事にしていけたらと思ってます!
現在のスキル
私の現在のスキルは、エクセル、ワードは一般事務が可能な程度使用ができます。パソコンの知識もない方ではありませんが、主に検索や予約などに使用する程度です。専門用語や、知識はほぼゼロの状態から始めております。趣味で、Adobe frescoを使用したデジタルアートや、初心者ではありますが、Adobe Illustrator、Photoshopを触ったことがあります。
1から学ぶHTML・CSS
HTMLとは
HTMLという言葉を使うと、<h1>~</h1>
で囲まれているのが見出し、<p>~</p>
で囲まれているのが本文、という文章構成を、コンピュータが理解できるんです。
このHTMLを表示するときは、<h1>
や<p>
は見えませんが、<h1>
に囲まれている見出しは大きい文字に、<p>
に囲まれている本文は小さめの文字になります。
ホームページを作る際、まずはHTMLを使って文章構成の指示を出すことで、ホームページに表示したい情報を形作っていくんですね。
(引用元:今さら聞けない!HTMLとは【初心者向け】 | TechAcademyマガジン)
CSSとは
CSSとは、カスケーディング・スタイル・シート(Cascading Style Sheets、)といい、ウェブページのスタイルを指定するための言語です。 ワープロソフトなどで作成される文書も含めて、文書のスタイルを指定する技術全般をスタイルシートといいます。 HTMLやXHTMLなどで作成されるウェブページにスタイルを適用する場合には、スタイルシート言語の1つであるCSSが一般的に利用されています。
(引用元:CSSとは?-CSSの基本)
Webデザイナーとは?
Webデザイナーとは、デザインをすることだけではありません。デザインをする前に、お客様から、どんなウェブサイトにしたいか、類似サイトの調査・分析、サイトの構成、コーディングやプログラミングもします。デザインではillustrator、Photoshopなどグラフィックソフトを使用し、レイアウトやカラーの調整をします。コーディングでは、HTML、CSSを使用し、更新しやすいシステムを構築するためにプログラミングを行います。
早速、、、
HTMLとCSSを勉強してみよう!
ということで、記事をどんだけ読んでも身につかない!と思い、早速学習できる教材を血眼で探していたところ、、、
友人から、
【Udemy】を試してみたらどうか、
というおすすめをいただきました!
なので早速、試してみました。
☟☟☟
必要商材
今回学習をした際に使用したモノをまとめてみました。
- 使用機材:Mac Book Air
- ネット環境
- エディタツール:VScode
- ブラウザ:Google Chrome
- 使用教材:Udemy
- 制作時間:3時間
使用したエディタツールはMicrosoft社より提供されている無料のVisual Studio Codeです。
教材はUdemyを使用しました。
オンサタデーズさんが無料で公開している、こちらの2本の動画を参考にしました。
※オンサタデーズさんではエディターツールでGithub社が提供しているAtomを使用しております。設定から使用方法まで丁寧に教えてくれているので、ぜひこちらからアクセスしてみてください。
エディターツールですが、次のステップで、有料のたにぐちまことさんが提供している教材を主に進めていくので私は、VScodeをインストールして使用しました。
【ちゃんと学ぶ、HTML+CSS&JavaScript入門講座】
【まとめ】
オンサタデーズさんの講座を受けた感想は、パソコンを日常から使用していない方でも理解ができるのでは、、、と思うくらいひとつひとつ丁寧に教えてくれます。
HTMLとは?CSSとは?と思っている方、まずはこちらから始めてみてください!!Webデザイナーを目指している方だけでなく、Webサイトってどうやってできているんだろう?と疑問に思っている方も是非見てみてください!
Quadrat コドラート
ポスターカードサイズ 原画アート
趣味で絵を描いています!
応援よろしくお願いいたします!