0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

みんなが普段見ているものがフロントエンド!

0
Last updated at Posted at 2026-07-10

はじめに

弊社オブジェクティブグループ(以下OBG)フロントエンド講習初級講座を担当している(@suzu_travas)です。
今回は初級講座で実施した内容の一部をご紹介します。

フロントエンド講習とは?

弊社OBGで毎月第2土曜日11:00〜19:00に行っている講習です。
主にHTML,CSS,JavaScriptを使ったフロントエンドに関する講習で通常オンラインでの開催ですが3か月に一度本社でのオフライン開催も行っています。

フロントエンドとは?

皆さんが知っているゲーム、オンラインショップ、動画サイトなどを思い浮かべてみてください。

多くの人は画面が思い浮かんだのではないでしょうか。

それがフロントエンドです。

フロントエンドとは、ユーザーが実際に「見る」「触れる」「操作する」部分を作る技術です。

例えば、

  • ボタンを押したときの動作
  • メニューの開閉
  • 画像や文字のレイアウト
  • スマートフォンでも見やすい画面表示

といった、ユーザー体験に直接関わる部分を担当します。

一方で、ログイン情報やデータベースの管理など、画面の裏側で処理を行う部分はバックエンドと呼ばれます。

96454781-5a69-4417-92cf-4c6244cd7aca.png

HTML・CSS・JavaScriptとは?

フロントエンド開発では、主にHTML・CSS・JavaScriptの3つの技術を使用します。

HTMLは、Webページの構造や内容を作るための言語です。
見出しや文章、画像、リンクなどを配置し、ページの骨組みを作ります。

CSSは、HTMLで作成したページの見た目を整えるための言語です。
文字の色や大きさ、背景、余白、レイアウトなどを指定し、デザインを作成します。

JavaScriptは、Webページに動きを付けるためのプログラミング言語です。
ボタンをクリックした際の処理や入力内容のチェック、アニメーションなど、ユーザーの操作に応じた動作を実現します。

家に例えると、

  • HTML:建物の骨組み
  • CSS:壁紙や家具などのデザイン
  • JavaScript:照明やドア、自動設備などの動き

という役割になり、この3つを組み合わせることで、普段皆さんが利用しているWebサイトやWebアプリケーションが作られています。

e35c989d-97f9-4a4a-8120-0954396fae6e.png

さいごに

フロントエンド講習初回では、「フロントエンドとは何か?」という基礎的な概念の他にも、環境構築やGit・GitHubの使い方など、エンジニアとして開発を進めるうえで必要となる基礎知識から学んでいきます。

今後も講習で扱った内容や学習のポイントを紹介していきますので、興味のある方はぜひご覧ください。


オブジェクティブグループでは X(旧 Twitter)の投稿も平日毎日行っています!
IT 関連の小ネタや便利技から、日常のアニメ・ゲーム布教なども幅広く投稿してるので、
ご興味のある方は是非フォロー・いいねをお願いします。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?