• Skip to main content
  • Skip to primary sidebar

プログラミング入門ナビ by Proglus(プログラス)

プログラミング学習初心者のための情報メディア

You are here: Home / プログラミング入門 / フロントエンド開発で重要な3要素についてプログラミング初心者に向けに説明します

フロントエンド開発で重要な3要素についてプログラミング初心者に向けに説明します

2018-04-06 By プログラミング入門ナビ編集部

Tweet
このエントリーをはてなブックマークに追加
Pocket

フロントエンド開発で重要な3要素について、プログラミング初心者に向けてできるだけわかりやすく説明します。

この記事は、オンラインプログラミング学習講座「Webエンジニア入門総合コース」サポート記事です。

目次

    • 0.1 フロントエンド開発で重要な3要素
    • 0.2 HTML (エイチティーエムエル・HyperText Markup Language)
      • 0.2.1 例 見出しを記述
  • 1 見出し文字列です
    • 1.1 CSS (シーエスエス・Cascading Style Sheets)
    • 1.2 JavaScript (ジャバスクリプト)
    • 1.3 フロントエンドとバックエンド
      • 1.3.1 フロントエンド
      • 1.3.2 バックエンド
    • 1.4 静的なページと動的なページ
      • 1.4.1 静的なページ
      • 1.4.2 動的なページ
      • 1.4.3 おわりに
    • 1.5 今すぐメルマガ登録!
    • 1.6 動画でプログラミング入門をしよう

フロントエンド開発で重要な3要素

下記の3つの要素があります。

  • HTML
  • CSS
  • JavaScript

一つづつ説明いたします。

HTML (エイチティーエムエル・HyperText Markup Language)

文章構造を記述する仕組みです。

Webページの内容を記述するためのマークアップ言語です。

マークアップとは、コンテンツのはじめと終わりに「タグ」と呼ばれる印をつけて、意味付けをしていくことです。

例 見出しを記述

見出し文字列です

CSS (シーエスエス・Cascading Style Sheets)

文字の色やサイズ、レイアウトなどを指定できます。

HTMLで書かれた構造化された文章のスタイルを指定するための言語です。

実務ではCSSもしくは、スタイルシートと呼ばれることが多いです。

JavaScript (ジャバスクリプト)

Webサイトの振る舞いを指定できるものです。

プログラミング言語の一つ。

Webブラウザで動作する。

世界の94.9%のWebサイトで使われているという調査結果もある、人気のプログラミング言語。

JavaScriptはJavaとついていますが、プログラミング言語Javaとは全く異なるプログラミング言語ですので、注意しましょう。

関連記事 : 世界で一番人気のプログラミング言語JavaSpcriptとは何か説明します

フロントエンドとバックエンド

フロントエンド

ユーザーが見て操作する部分
クライアント側(ブラウザ)で動作するもの
HTML, CSS, JavaScriptを記述する


バックエンド

サーバ側で処理が行われるもの。いわゆるサーバーサイド。
例えばデーベースへのアクセス、ファイルへのアクセス、合計金額の計算などの処理を行ないます。
たとえば、プログラミング言語RubyやPHPで記述します。

静的なページと動的なページ

静的なページ

Webサーバ上に置かれたHTML ファイルなどを、ブラウザで表示するだけ。

動的なページ

アクセスするたびに、表示内容が変わる可能性があります。
サーバ側で動作するプログラミング言語例えばRubyと、データを保存しておけるデータベースのデータを組み合わせて、アクセスするたびに毎回表示を変えたり、ユーザーによって表示を書き換えることができます。

おわりに

フロントエンド開発で重要な3要素についてプログラミング初心者に向けに説明しました。

「Webエンジニア入門総合コース」では、データベースの基礎はもちろんのこと、プログラミミング初心者向けに、HTML5, CSS3, JavaScript, Bootstrap, SQL, Ruby, Ruby on Rails, Cloud9, Git, GitHubなどを動画をつかって学習できます。

Web開発に必要なプログラミングスキルを1つのコースで沢山学べてお得です。264レクチャー・18時間の大型コースとなっています。

内容をしっかり確認できるように、無料プレビュー60分を公開していますので、ぜひご覧ください!

Bestseller ウェブ開発入門完全攻略コース - HTML/CSS/JavaScript. プログラミングをはじめて学び創れる人へ!ウェブ開発入門完全攻略コース - HTML/CSS/JavaScript. プログラミングをはじめて学び創れる人へ!中村 祐太 Yuta Nakamura, Proglus (プログラス)Ruby on Rails7/MySQL/Bootstrap/AWS Cloud9/Git/GitHub等ウェブ開発に必要な様々なスキルを沢山学ぼう!カフェのウェブサイト、フォトギャラリー、ポートフォリオサイト、タスク管理アプリ等に挑戦! 4.3 (6300 ratings)422 lectures, 25 hours

動画でプログラミング入門をしよう

オンライン学習サービスProglus(プログラス)でプログラミングを学び、創れる人になろう!

プレミアムプランを2週間無料体験しよう

今すぐ詳細を確認する

Tweet
このエントリーをはてなブックマークに追加
Pocket

Filed Under: プログラミング入門 Tagged With: CSS, HTML, JavaScript, プログラミング入門

Primary Sidebar

Proglus(プログラス) 採用情報 FindU

Twitter

Follow @programmingnavi Tweets by programmingnavi

人気の記事

  • VirtualBoxでNATとホストオンリーアダプターによる安全なネットワーク環境構築方法
  • VSCodeで画像が表示されない場合の対処法
  • VSCodeの基本~プロジェクトフォルダの設定方法について解説します!
  • Visual Studio Codeのメニューを 日本語化する方法と英語化する方法について解説!
  • Node.jsをmacOSからアンインストールする方法
  • MySQL WorkbenchからMySQLサーバーへの接続時やSQLファイルを取り込み時にエラーが発生した時の対処方法
  • JavaScriptの「net::ERR_FILE_NOT_FOUND」エラーが出る原因と対処方法を紹介!
  • 【Arduino入門】LCD(液晶ディスプレイ)に文字を表示しよう
  • MySQLをXAMPPを使ってWindows環境にインストールする方法
  • MAMP for MacOSによるMySQLのインストール方法

最近の投稿

  • ChatGPTエラーの原因別対応法: トラブルシューティングのヒント
  • 【SQL】ER図(Entity-relationship Diagram)について解説します!
  • 【MySQL】公式インストーラー(dmg)を使って、MySQLサーバーをmacOSにインストールする方法を解説
  • 【AWS Cloud9】Gitで使用するエディタを再起動してもvimの設定にする方法
  • 【VSCode】アクティビティバーに拡張機能アイコンが表示表示されていない場合の解決方法

カテゴリー

  • AIの使い方
  • Arduino入門
  • AWS
  • その他
  • エンジニアのしごと
  • エンジニアへの道
  • ツールの使い方
  • ニュース
  • プログラミング入門
  • 電子工作入門

タグクラウド

AI AWS AWS Cloud9 Cloud9 CodeWing CSS Emmet GCP Git GitHub Heroku HTML JavaScript Linux macOS MySQL MySQL Workbench node.js Nuxt.js Proglus Python Ruby Ruby on Rails SQL Udemy Visual Studio Code vscode Vue.js Web開発 Windows インストール エラー エンジニア オンライン学習 サーバー スクリーンショット セール プログラミング プログラミング入門 プログラミング学習 ユーデミー 初心者 未経験 機械学習 開発環境構築

アーカイブ

  • 2023年2月
  • 2023年1月
  • 2022年12月
  • 2022年11月
  • 2022年10月
  • 2022年9月
  • 2022年8月
  • 2022年7月
  • 2022年4月
  • 2022年3月
  • 2022年2月
  • 2022年1月
  • 2021年10月
  • 2021年9月
  • 2021年8月
  • 2021年6月
  • 2021年4月
  • 2021年3月
  • 2021年1月
  • 2020年12月
  • 2020年11月
  • 2020年10月
  • 2020年9月
  • 2020年8月
  • 2020年7月
  • 2020年5月
  • 2020年4月
  • 2020年3月
  • 2020年2月
  • 2020年1月
  • 2019年11月
  • 2019年9月
  • 2019年7月
  • 2019年6月
  • 2019年5月
  • 2019年4月
  • 2019年3月
  • 2019年2月
  • 2019年1月
  • 2018年12月
  • 2018年11月
  • 2018年10月
  • 2018年9月
  • 2018年8月
  • 2018年7月
  • 2018年6月
  • 2018年5月
  • 2018年4月
  • 2018年3月

検索

Copyright © 2023 · programmingnavi.com ・About・プライバシーポリシー