ゼロから学ぶ ウェブ開発-スタータードキュメント
・はじめに
このドキュメントは初めてプログラミングに触れる方や部員に向けたチュートリアルとなっています。
また、Visual Studio Codeでの開発を想定しています。
・開発に必要なもの
ここではウェブサイト作成、アプリ開発主に扱っていきます。
プログラムの実行にブラウザを使います。そう、今このページを開いているアプリこそがブラウザです。
(念の為FirefoxのURLを貼っておきます)Safariでは開発者モードの設定がめんどくさいので、Chrome、Edge、Firefoxなどのスタンダードなブラウザを推奨します。
・Visual Studio Code Download link>>
・Firefox Download link>>
・その他、開発時に出てくる用語一覧
・ディレクトリ:コンピューターのファイル管理システムにおいて、複数のファイルをまとめるためのフォルダ。
・ブラウザ:webサイトの閲覧に用いるソフトウェア。
・ショートカットキー一覧
・Ctrl + X:テキストやファイルを切り取るショートカットキー。(ペーストした時点で、前の場所から消える)
・Ctrl + C:テキストやファイルをコピーするショートカットキー。(ペーストしても、前の場所にはファイルが残る)
・Ctrl + V:コピー、もしくは切り取ったテキストやファイルを張り付けるショートカットキー。
・Ctrl + A:開いている画面上にあるテキストやファイルをすべて選択するショートカットキー。
・ブラウザ限定のショートカットキー一覧
・Ctrl + T:ブラウザ上で新しいタブを開くショートカットキー。
・Ctrl + W:ブラウザ上でタブを閉じるショートカットキー。
・Ctrl + R:ブラウザ上でページをリロード(再読込み)するショートカットキー。
・F5:ブラウザ上でページをリロード(再読込み)するショートカットキー。
・F11:全画面表示のショートカットキー。
・F12:開発者ツールで調査する際のショートカットキー。
・ブラウザの開発者ツールの使い方
ブラウザでF12を押すと開発者ツールで調査することができると書きました。
開発者ツールではHTML/CSS/JavaScriptなど、サイト内のプログラムの解析や要素の検索に使われます。
また、コードエディターで上書きしなくても、その場で簡単な編集を施すことができるので、WEBデザインでは重宝するツールです。
ただし、編集を行ってもその時だけ適応され、サイトのデータには保存されないので、保存する際はエディターに編集内容を書き込んでください。