<p>
段落(paragraph)
これは段落の見本です。
本ホームページは代表・浦1人で作りました。
全てのコードを自ら書き、WordPressなどの簡易化ツールは一切使用していません。
私は以前、約半年だけWeb開発を手伝った経験がありますが、自分一人で作ったホームページを世に公開したのは今回が初めてです。
エンジニアを育成する会社の代表になるにあたり、仲間の成長を支える立場として、「自分の手で成果物を完成させる」挑戦を選びました。
だからこそ伝えたいんです。
「未経験でも、半年やればここまでできる!」
私たちの入社カリキュラムも、同じく半年。
やりきれば、あなたも自分の手で動くシステムを作れるようになります!
ここでは HTML・CSS・JavaScript・データベースといった、Webシステムの基本をちょこっと体験できます。
クリックや入力だけで、「動いた!」という感覚を味わえるはず。
その小さな体験が、エンジニアの世界へ踏み出す一歩になるかもしれません。 🚀✨
HTMLとは簡単にいうと「骨組み」です。
実は、あなたが今まで見てきた入力欄やボタン、リンクなども全部HTMLが作っています。
ここで紹介しているサンプルは、実際にクリックして操作できます。
<p>
これは段落の見本です。
<input>
<select>
<input type="radio">
<input type="checkbox">
<button>
<a>
他にも多くの種類があり、HTMLは< >で囲んだ“タグ”を使って、ページのパーツを生み出す仕組みです。
ここで紹介している7つのパーツが、どんなコードでできているのかを見てみましょう!
タグの形と見た目の関係を知るのが、HTMLを理解する第一歩です。
CSSは簡単にいうと、「デザイン」です。
HTMLで作ったパーツの文字色やサイズ、背景色などを変化させます。
この見た目を基準に、各プロパティだけを極端に変えます。
color
(文字色)color: #111827;
font-size
(文字サイズ)font-size: 24px;
font-weight
(文字の太さ)font-weight: 900;
background-color
(背景色)background-color: #111827;
width
(横幅)width: 100%;
(横幅いっぱい)
height
(高さ)height: 56px;
padding
(内側の余白)padding: 18px 32px;
CSSで変更できる見た目も多くの種類があり、数値や文字で細かく設定できます。
JavaScriptは簡単に言うと、「動き」です。
ここまでにいくつもの送信ボタンが出てきましたが、押してみましたか?
何も起きませんでしたよね。
それではまた送信ボタンを準備していますが、これまでとは違います。
アラートが表示されます。
HTMLとCSSだけでは、送信ボタンは「ただそこにあるだけ」でした。
でもJavaScriptを使えば、押したときに反応する“動き”をつけることができます。
このように、JavaScriptはユーザーの操作に合わせてページを動かす仕組みです。
クリックしたら色が変わる、文字が出る、画面が切り替わる――
そんな“使えるWebページ”を作るために欠かせない存在なんです。
個数を入力すると自動で合計を計算します。
例:カタカナ・スペース・「ー」などはOK、漢字やひらがなはNG
ボタンを押すたびに数字が増えます。
同じなら「一致」、違うと「不一致」と表示します。
入力フォーム、ボタン、チェック機能、そして動きのある画面。
当たり前に思っていたことも、実はJavaScriptの力でした!
データベースとは簡単に言うと、「記録」です。
SNSでは文字や写真を投稿すると、他者もあなたの投稿を見ることができますよね?
それを可能にしているのは、「入力された情報を覚えている存在」があるからです。
そこで今回、本のタイトルと値段を登録する簡易システムを用意しました。
※個人情報などは入力しないでください。
投稿した本の情報はデータベースに保存され、リロードしても残ります。
日付が変わると自動で消去されます。
あなたが登録した本のタイトルと値段が表示されているのを確認できたでしょうか?
これはデータベースに情報が記録され、それを画面に呼び出しているからです。
ただし、データベース自体には「表示する機能」はありません。
「登録されている本の一覧を出して」と命令している存在が別にいます。
それがサーバーです。
そのサーバーを動かすために広く使われている言語のひとつがJavaです。
このように、データベースとサーバーが協力してはじめて、情報が画面に表示されます。
この仕組みはWebページだけでなく、スマホアプリや業務システムなど、あらゆるサービスの裏側で活躍しています。
このDemoページでは、Webシステムの基本を少しだけ体験していただきました。
普段当たり前に使っているログイン画面や予約サイトも、こうした仕組みが支えています。
そして、この仕組みは学べば誰でも身につけられるものなのです。
私たちは、未経験からでも半年で“自分の手で動くシステムを作れる”ようになるカリキュラムを用意しています。
あなたもここから、一緒に新しいキャリアを築いてみませんか?