アプリ開発

ChromeBookでWebサイトを作成する方法

ChromeBookでWebサイト制作はできるの？
どうやって作ればいいの？

そんなお悩みにお答えします。

☑️ 本記事の信頼性
この記事を書いている僕は、3万円のChromeBookでプログラミングをしてアプリを開発しました。 使っているパソコンはC223NAです。

ChromeBookでは、Webサイトを作成できます。

目次

ChromeBookでWebサイトを作成

Webサイト作成の流れ下記のようになります。

流れ

  • エディタを用意
  • HTMLを作成
  • CSSを作成
  • Javascriptを作成

エディタを用意しよう

まずは、プログラミングをするためにエディタを用意します。

Webサイト作成には「text」や「VSCode」といったエディタが使えます。

ここでは、プロも愛用する「VSCode」と言うエディタがを使って解説していきます。

VSCodeをまだ入れていない人はChromeBookにVSCodeを入れる方法を参考にしてください。

▼VSCodeを開いてフォルダを作成します。

左上の「ファイル」をクリックしてその中の「フォルダーを開く」を選びます。

▼フォルダを作成します。

右上の「フォルダアイコン」をクリックします。

フォルダ名を入力します。今回は、「Web」としました。

▼「OK」ボタンをクリックします。

「OK」ボタンをクリックします。

▼ファイルを作成します。

「ファイルアイコン」をクリックします。

ファイル名を「index.html」と入力します。

拡張子（ドットの後ろの部分）は「.html」にしてください。

これで、準備は完了です。

あとはコードを書いていきます。

HTMLを使ってみよう

HTMLとは、文章の構造を作る言語です。

▼HTMLを入力します。

下記のコードを入力してください。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Webサイト</title>
    </head>
    <body>
        <h1>プログラミング</h1>
        <p>Webサイトを作成します。</p>
    </body>
</html>

▼ファイルを開きます。

ファイルは「Linuxファイル」の作成したフォルダ（Web）の中に入っています。

作成した「index.html」ファイルをダブルクリックしてください。

ブラウザが開くと思います。

▼ブラウザで確認します。

画像のように表示されていればOKです。

HTMLについて詳しく知りたい人はプロゲートやドットインストールで勉強できます。

CSSを使ってみよう

CSSとは、デザインを作る言語です。

▼CSSを入力します。

下記のコードを</title>と</head>の間に入力してください。

<style>
    h1 {
        color:white;
        background-color: red;
        padding:16px;
    }
    p {
        font-size:22px;
        margin:10px;
    }
</style>

▼ブラウザで確認します。

ブラウザを更新します。

画像のようになっていればOKです。

CSSについて詳しく知りたい人はプロゲートやドットインストールで勉強できます。

Javascriptを使ってみよう

Javascriptとは、動きを作る言語です。

▼Javascriptを入力します。

下記のコードを入力してください。

<script>
    const p = document.querySelector('p')
    p.animate({
        opacity: [0, 1]
    }, {
        iterations: Infinity,
        duration: 1500,
    })
</script>

▼ブラウザで確認します。

上の画像ではわかりにくいですが「Webサイトを作成します。」の部分が点滅していればOKです。

Javascriptについて詳しく知りたい人はプロゲートやドットインストールで勉強できます。

ソースの全体

全体のソースコードは下記です。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Webサイト</title>
        <style>
            h1 {
                color:white;
                background-color: red;
                padding:16px;
            }
            p {
                font-size:22px;
                margin:10px;
            }
        </style>
    </head>
    <body>
        <h1>プログラミング</h1>
        <p>Webサイトを作成します。</p>
        <script>
            const p = document.querySelector('p')
            p.animate({
                opacity: [0, 1]
            }, {
                iterations: Infinity,
                duration: 1500,
            })
        </script>
    </body>
</html>

まとめ

HTML, CSS, JavascriptでWebサイトを作る方法を解説をしました。

Webサイト作成の大まかなやり方と流れがわかったと思います。

HTML, CSS, Javascriptそれぞれの役割を下記にまとめました。

役割

  • HTML：文章の構造を作る
  • CSS：デザインを作る
  • Javascript：動きを作る

プロゲートやドットインストールで勉強すればもっと複雑なものも作れます。

オリジナルのWebサイトを作ってみましょう。

-アプリ開発

© 2024 gotoblog