• 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分を公開していますので、ぜひご覧ください!

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

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

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

在宅学習応援!今なら複数の基礎コースが無料!!

今すぐ詳細を確認する

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

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

Primary Sidebar

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

Twitter

Follow @programmingnavi Tweets by programmingnavi

人気の記事

  • VirtualBoxでNATとホストオンリーアダプターによる安全なネットワーク環境構築方法
  • VSCodeの基本~プロジェクトフォルダの設定方法について解説します!
  • MySQLをXAMPPを使ってWindows環境にインストールする方法
  • MySQLのGPGキーの有効期限切れのためインストールに失敗する場合の対応方法
  • Visual Studio CodeでHTMLを書くときの便利な設定方法!ミスの防止や開発効率UPに役立てよう
  • macOSのVirtualBoxで”Kernel driver not installed (rc=-1908)”発生時の対処方法を解説
  • JavaScriptの「net::ERR_FILE_NOT_FOUND」エラーが出る原因と対処方法を紹介!
  • VSCodeで画像が表示されない場合の対処法
  • よくあるSQLのエラーの種類と自力でエラーを取り除く方法について説明します
  • MySQL WorkbenchからMySQLサーバーへの接続時やSQLファイルを取り込み時にエラーが発生した時の対処方法

最近の投稿

  • 【05/01更新】Udemyプログラミング入門講座等の割引クーポン配布
  • 【AWS】ApacheをEC2にインストール後、テストページが表示出来なかった時の対応方法について
  • 【新コース公開】はじめてのPythonプログラミング入門
  • 【新コース公開】ウェブ開発の概要を知ろう
  • 【新コース公開】はじめてのRuby on Rails 7入門

カテゴリー

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

タグクラウド

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

アーカイブ

  • 2022年5月
  • 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 © 2022 · programmingnavi.com ・About・プライバシーポリシー