2025年02月20日
未経験の私にはコーディングは無理??コーディングについて解説!
未経験でもコーディングできる??

こんにちは!デジタルハリウッドSTUDIO佐賀 スタッフです。
スタジオのWebデザイナー専攻では「デザイン」「コーディング」を中心に学習をしていきます。
受講生のみなさんですが「デザインはできそうだけど、コーディングが心配…」という方がほとんど。スタジオ受講生のほとんどの方が、未経験からスタートされているので、今まで触れたことのない英文がずらっと並んだ画面は未知の世界。。。

ですがご安心ください。ルールや意味、書き方さえ分かれば、未経験の方でもコーディングできるようになります。最初は文字の羅列にしか見えないコードですが、一つ一つに意味があり、それを覚えたり学んだりすることにより理解できるようになります。
上の写真の受講生のMさんですが、先日Webパートに入りました。未経験からのスタートで、最初は少し苦戦されていましたが、今では順調に進んでいます。一つ一つ押さえていくと、だんだん意味が分かって面白い!とまでおっしゃっています。
コーディングとは?

そもそもコーディングって何?という話ですが、Webサイトは、「HTML(HyperText Markup Language)」と「CSS(Cascading Style Sheets)」を使ってコーディングを行い、ページを作成していきます。またJavaScriptで動きをつけていきます。
さっそく専門用語が出てきました…。
ので!難しい話はちょっと置いておいて、簡単に図で説明したいと思います。今回は「家を建てる」ことと「顔のイラストを作る」イラストで例えてみます。小難しいコードは省略です。
HTML
HTMLは建物でいうところの骨組み(柱や壁、屋根などの外装)です。「ここは画像ですよ」「ここは文字ですよ」「ここは見出しになりますよ」と位置づけをしていくときに使います。表情で言うと、顔のパーツを作っていく工程です。
HTMLはいわば設計図を見ながら、材料(文章)を使ってサイトの土台を作る役割を担っています。
HTMLでできること

家の建設

表情のイラスト
CSS
CSSは建物でいうところの内装(壁の色・家具・装飾)です。「この見出しは太字の赤で」「そこの文字の背景の色はグリーンで」「画像の大きさはこのくらいで」と家を見栄え良くしていきます。顔のイラストで言うと、顔に色を塗っていく工程です。
CSSはHTMLで作った土台にデザインをしていく役割を担っています。
CSSでできること

家の建設

表情のイラスト
JavaScript
JavaScriptは建物でいうところの、家電や設備などの追加です。煙突や電飾などをつけていきます。顔のイラストでいうと、表情をつける工程です。笑顔やWebページに動きをつける役割を担っています。
JavaScriptでできること

家の建設

表情のイラスト
==================
という風に、今回は実際のコードを使わずにイラストで説明をしてみました。少しでもイメージが掴めていただけたでしょうか?
イメージしなくて始めるのと、しないで始めるのでは理解度がちょっと違うかも?
この記事が、HTML、CSS、JavaScriptの学習の際にお役に立てれば幸いです。
新規受講生募集中!

スタジオでは随時、受講生を募集しております。ただいま「3月スタート生」を募集中です。
お早目のご来校、お申込をお願いいたします。
お得な早期お申込特典をご利用ください!
無料説明会、資料請求のご請求
無料説明会
- カウンセリングやスタジオのご案内、カリキュラム等のご説明を行っております。皆様の疑問・質問にはスタッフが丁寧にお答えいたします。実際の教材・機材を使った受講体験も可能です。まずはスタジオへお越しください。土日も営業しております!
ご予約はこちら >>
資料請求
- スタジオ佐賀のシステムがよく分かるパンフレットを【無料】でダウンロードできます。あなたのスキルアップやステップアップをサポートする「デジハリ」の講座内容、通い方、受講料が一目で!お気軽にお申込みください!
資料請求はこちら >>
無料説明会ってなに?

無料説明会説明ページへ ≫
よくある質問 Q&A
ご入校を検討されている皆様から頂くよくあるご質問を掲載しております。ご不明な点等ございましたら、お気軽にお問い合わせください。

よくある質問ページへ ≫
社内で【Web担当者】を育成しませんか?
「自社ホームページを作ったけど、社内に適正スキルを持った担当者がいなくて思うように運用できていない…」と悩んでいらっしゃる法人様向け【Web担当者育成プラン】をご用意しております。

Web担当者プランのご案内 ≫
法人様向け・ご依頼相談
デジタルハリウッドSTUDIO佐賀では、企業様向けの「Web制作」「業務委託(サイト更新、SNS運用等)」「人材募集」「社員研修」等のご依頼を承っております。お気軽にご相談ください

ご相談はこちらから ≫
各種SNSで情報発信!
Instagram、公式LINEアカウント、Facebookで、スタジオの日常や、お知らせ、卒業制作・勉強会の模様などなど、投稿しています。
またSNSからのお問合せにもスタッフが丁寧にお答えいたします。フォロー、友だち追加お待ちしております!
\ タップしてフォロー&友だち追加 /
大学生向けLP開設しました!
未経験からWスクールで通学していた大学生の先輩たちをご紹介。インタビューも掲載されています!



にほんブログ村
【学習の集大成】卒業制作の作りかた
Webの未来をあなた自身でデザイン。5月スタート生募集中です!
私たちも普段何気なく使ってる!サイトを使いやすく魅力的に「JavaScript」
ホームページで卒業制作作品の紹介始めました!
春、ウェブ活スタート!春・新年度スタートのタイミングでWebデザイナーへの道へ。
Webサイト制作の裏側。学びながら知りながら 【リサイズデザイン課題】
Webの未来をあなた自身でデザイン。5月スタート生募集中です!
私たちも普段何気なく使ってる!サイトを使いやすく魅力的に「JavaScript」
ホームページで卒業制作作品の紹介始めました!
春、ウェブ活スタート!春・新年度スタートのタイミングでWebデザイナーへの道へ。
Webサイト制作の裏側。学びながら知りながら 【リサイズデザイン課題】
Posted by デジタルハリウッドSTUDIO佐賀
at 14:25
│スタッフブログ