Squair’s diary

東京在住30代女性が、一般営業職から独学でWebデザイナー向けての備忘録的なブログです。他にもECサイトでの自社ブランド販売や、過去の海外経験の話、東京のおすすめスポットなど雑多に紹介します!ブログ初心者なのですが、どうぞよろしくお願いします。

【備忘録Vol.1】未経験のわたしがWEBデザイナーになるための備忘録 HTML・CSS編

Web業界未経験のわたしがWEBデザイナーになるための備忘録

 

ご覧いただき、ありがとうございます。

 

こんにちは、四角です。

 

【自己紹介】

30代 東京在住 女性ブロガー 四角です。

一般営業職からIT業界へ転職を目指しています。現在Webデザイナーフリーランスを目指して勉強しながら転職活動を行なっています。

 

今回は、Web業界IT業界未経験、パソコンスキルそこそこのわたしが、WEBデザイナーになるために、学んだことや忘れたくない事を少しずつ記事にしていけたらと思ってます!

 

現在のスキル

私の現在のスキルは、エクセル、ワードは一般事務が可能な程度使用ができます。パソコンの知識もない方ではありませんが、主に検索や予約などに使用する程度です。専門用語や、知識はほぼゼロの状態から始めております。趣味で、Adobe frescoを使用したデジタルアートや、初心者ではありますが、Adobe IllustratorPhotoshopを触ったことがあります。

 

 

 

1から学ぶHTML・CSS

f:id:Squair:20220419232754j:image

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デザイナーとは、デザインをすることだけではありません。デザインをする前に、お客様から、どんなウェブサイトにしたいか、類似サイトの調査・分析、サイトの構成、コーディングやプログラミングもします。デザインではillustratorPhotoshopなどグラフィックソフトを使用し、レイアウトやカラーの調整をします。コーディングでは、HTML、CSSを使用し、更新しやすいシステムを構築するためにプログラミングを行います。

 

早速、、、

HTMLとCSSを勉強してみよう!

ということで、記事をどんだけ読んでも身につかない!と思い、早速学習できる教材を血眼で探していたところ、、、

 

友人から、

【Udemy】を試してみたらどうか、

というおすすめをいただきました!

 

なので早速、試してみました。

 

☟☟☟

必要商材

 

今回学習をした際に使用したモノをまとめてみました。

 

 

使用しているパソコンはMac Book Air M1です。

support.apple.com

 

使用したエディタツールはMicrosoft社より提供されている無料のVisual Studio Codeです。

azure.microsoft.com

 

教材はUdemyを使用しました。

 

オンサタデーズさんが無料で公開している、こちらの2本の動画を参考にしました。

【HTML超入門講座】

【CSS超入門講座】

※オンサタデーズさんではエディターツールでGithub社が提供しているAtomを使用しております。設定から使用方法まで丁寧に教えてくれているので、ぜひこちらからアクセスしてみてください。

atom.io

 

エディターツールですが、次のステップで、有料のたにぐちまことさんが提供している教材を主に進めていくので私は、VScodeをインストールして使用しました。

【ちゃんと学ぶ、HTML+CSS&JavaScript入門講座】

 

【まとめ】

オンサタデーズさんの講座を受けた感想は、パソコンを日常から使用していない方でも理解ができるのでは、、、と思うくらいひとつひとつ丁寧に教えてくれます。

 

HTMLとは?CSSとは?と思っている方、まずはこちらから始めてみてください!!Webデザイナーを目指している方だけでなく、Webサイトってどうやってできているんだろう?と疑問に思っている方も是非見てみてください!

 

 

 

Quadrat コドラート

ポスターカードサイズ 原画アート

 

趣味で絵を描いています!

応援よろしくお願いいたします!

 
 
 
 
 
View this post on Instagram
 
 
 
 
 
 
 
 
 
 
 

A post shared by quadrat[アートインテリア] (@quadrattttt)