WAVE
螺旋階段のイラスト

ウェブ制作を学ぶための3つのステップ

技術を身につけるには、3つの大切な要素があります。小説を書くことに例えると、わかりやすいですよ。

1. 主題：何を作るか考えよう

小説なら「どんな物語を書くか」を決めますよね。切ない恋愛小説にするのか、ワクワクする冒険物語にするのか。登場人物は誰で、どんな展開にするのか…

ウェブ制作も同じです。「趣味を登録できるサイトを作ろう」「ネットショッピングサイトを作ろう」というように、どんな機能を持たせて、どんな写真や文章を載せるかを考えます。これを「要件定義」といいます。

2. 文法：ルールを覚えよう

日本語には、名詞や動詞、漢字やひらがな、句読点の使い方など、たくさんのルールがありますね。私たちは自然に使えていますが、実はとても複雑なんです。

「日本では五月一日は令和の始まり、今日は五月五日で日曜日で祝日、こどもの日です。」

同じ「日」という文字が、「にち」「ついたち」「いつか」「にちようび」と、いろんな読み方をしていますよね。外国の方にとっては大変です！

ウェブ制作にも「文法」があります。HTML、CSS、JavaScriptという言語を学びます。それぞれにルールがあって、正しく書かないとブラウザがうまく表示してくれません。でも心配しないでください。少しずつ慣れていきますよ。

3. 道具：使い方をマスターしよう

小説を書くには、原稿用紙と鉛筆が必要です。鉛筆の持ち方や削り方も、最初は練習が必要でしたよね。

ウェブ制作では、Windsurf（エディタ）やFirefox（ブラウザ）といった道具を使います。最初は戸惑うかもしれませんが、使っているうちに自然と手に馴染んできます。

便利なポイント：WindsurfやFirefoxにはAIアシスタント機能が搭載されています。わからないことがあったら、AIに質問できるので安心です！「このコードはどういう意味？」「エラーが出たんだけど…」と気軽に聞いてみましょう。

螺旋階段を登るように

この1〜3の要素を織り交ぜながら、ちょうど螺旋（らせん）階段のように、少しずつ高みへと昇っていきましょう。

最初は難しく感じるかもしれませんが、一歩ずつ進めば、必ず自分だけのウェブサイトが作れるようになります。焦らず、楽しみながら学んでいきましょう！

shuffle text demo

Shuffle Text 紹介

shuffle-textはテキストシャッフル（文字列がランダムで切り替わる演出）の表現を行うためのライブラリです。ウェブサイトでマウスが触れたときに演出ができます。詳細は、 こちらをご覧ください。

使い方

シャッフルしたい要素に class="shuffle" とクラス名を付与します。

  • 01/01 「トップページ」更新しました。
  • 01/02 「会社案内」更新しました。
  • 01/03 「お問い合わせ」更新しました。
  • 01/04 「最新情報」更新しました。

✨安い！！お得！！激安CSS！！✨

19,800 円
ソースコードを見る 
              
                <span class="price">
                  <span class="price1">19</span><span class="price2">,800</span>
                  <span class="yen">円</span>
                </span>

                @import url(https://fonts.googleapis.com/css?family=Poppins:700);
                .price {
                  color: #c70506;
                  text-shadow:  2px 0 0 #fff,
                                0 2px 0 #fff,
                                -2px 0 0 #fff,
                                0 -2px 0 #fff,
                                5px 4px 3px #0008;
                  font-weight: bold;
                  font-family: Poppins;
                  letter-spacing: -3px;
                }
                .price1 {
                  font-size: 78px;
                  margin-right: -5px;
                  font-style: italic;
                }
                .price2 {
                  font-size: 59px;
                  margin-right: 10px;
                  font-style: italic;
                }
                .yen {
                  font-size: 40px;
                }

グラデーション

縦書き

またそのなかでいっしょになったたくさんのひとたち、ファゼーロとロザーロ、羊飼のミーロや、顔の赤いこどもたち、地主のテーモ、山猫博士のボーガント・デストゥパーゴなど、いまこの暗い巨きな石の建物のなかで考えていると、みんなむかし風のなつかしい青い幻燈のように思われます。では、わたくしはいつかの小さなみだしをつけながら、しずかにあの年のイーハトーヴォの五月から十月までを書きつけましょう。

あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波

typing illustration

Typing Lessons

「Ｆ」「Ｊ」のホームポジションから始まり、数字や記号に至るまで滑らかに入力できるよう練習できるサイトです。

タイピングを習得する利点は以下の通りです。

  1. 効率的な作業: タイピング速度が向上することで、文書作成やデータ入力が迅速に行えます。
  2. コミュニケーションの向上: メールやチャットなど、オンラインでのコミュニケーションがスムーズになります。
  3. 集中力の向上: 視線を画面に向けたままタイピングができるため、書くことに集中しやすくなります。
  4. 職業的なスキル: 多くの職場で求められる基本的なスキルであり、就職やキャリアアップに役立ちます。
  5. 学習の効率化: レポート作成や研究の際に、情報を速やかにまとめることができ、学習効果が向上します。
  6. 自己表現の向上: アイデアや考えを素早く文章にすることで、自己表現がしやすくなります。
  7. コードの迅速な入力: プログラミングではコードを書く速度が重要です。
  8. エラーチェックの効率化: タイピングスピードが向上すると、コードの修正やデバッグ作業が迅速に行えます。
  9. 文法の理解: タイピングを通じてプログラミング言語の文法や構文に慣れることができます。
  10. アルゴリズムの実装: 複雑なアルゴリズムを実装する際、速やかにコードを書くことができるため、試行錯誤がしやすくなります。