活動報告No114 Webサイトを作ってみよう (1/3) ~学習編~
カテゴリ: 未分類
おはこんばんにちは。怠惰担当0.10*10 年マエダです
最近成人式で暴動あったのどうこうでっていうニュースを見ますが先輩たちは大丈夫かな?私はまだ生後235ヶ月なので来年成人式デス!(`0言0́*)

さて、急に始まったこのWebサイトを作ってみようの回。実はヒュー研の公式サイトをリニューアルしようと、ここ数週間コードをポチポチ手打ちしています。近日公開できるといいんですが、各ブラウザの仕様に振り回されていますので、しばしお待ちを… (´;ω;`)ブワッ

↓スマホ版のプレビューです↓
img1.jpg 

電大の1月はテスト期間なので、今月中はロボから離れた話題が多くなるかも?ヽ(´ー`)ノ

コードをポチポチ打つそんな私が今回と次回、次々回でWebサイトの作り方を学ぶ方法の他にコードエディタ(≒テキストエディタ)やおすすめの無料サーバ、その他フリーソフトの紹介をしていこうと思います。

全体の流れはこんな感じです↓
【今回】
1, Webサイトって何からできている?
2, Webサイトの作り方を学ぶ方法

【次回】
3, 開発環境を整える
4, おすすめの無料サーバ
5, その他フリーソフト
【次々回】
6, ページ1番下の©
7, Webサイトを自動採点してもらう
8, ページをidとパスワードでロックする
9, 多機種対応レスポンシブデザイン
10, ハンバーガーメニューは要らない?
11, 視認性のお話 〜奇をてらうな〜
12, コピペで効率化せよ!
13, あって良かったdisplay: none;



1, Webサイトって何からできている? 

右も左も分からない人は、Webサイトをつくるには何が必要なの?OfficeソフトのWordやPowerPointみたいにつくっていけばいいの?って思うんじゃないでしょうか。
取り敢えずヒュー研の新しいWebサイトのトップページのデータを見てもらいましょう。

2017-01-13 (3)

まぁこんなものです。見ての通り、プログラミングみたいな感じですね。このようにWebサイトはWordのように直感的に作れるものではなく、
HTML CSS
という2つのプログラミング言語を打ち込んで出来上がります。
(本当はHTMLとCSSはマークアップ言語というものですが、便宜上ここではプログラミング言語と呼びます)

HTMLとCSS、基本的にこの2つのプログラミング言語を使っていきますが、モノによってはこの2つ以外のプログラミング言語を使ったりします。
今はHTMLとCSSの名前だけ覚えておけば十分です。

 imgres.jpg


2, Webサイトの作り方を学ぶ方法 

前述のとおり、WebサイトはHTMLとCSSという2つのプログラミング言語で出来ています。でも書き方が分からないし…やっぱ独学じゃ難しい…?

いやそんなことはない。

Progate」という、多種類のプログラミング言語を分かりやすく学べるWebサイトがあります。私はこのサイトにものすんっっっっごくお世話になりました。あ、ステマじゃないですよ(笑)。

[Progateのサイトはこちら]
2017-01-13 (4) 

ヒュー研内でProgateをやったことあるのは私と同期にもう一人です。そのもう一人はProgateについて、「スライドで学ぶから本買って堅苦しく勉強するよりも楽」と言っていました。途中までは無料で学べるので、Progateの学習方法が気に入ったら有料プランに移るのが無難でしょう。

というわけで、「Webサイトを作ってみよう」の学習編はこれで終わりです。次回はProgateでHTMLとCSSを学んで、かつ、
実際に自分でサーバを借りてWebサイトを開設してみたい!
または
とにかく実践してみたい!
という人向けに記事を書いていきます。今日のところは取りあえずProgateを覗いてみてください。

ではでは(^^ゞ
スポンサーサイト
編集 / 2017.01.13 / コメント: 0 / トラックバック: 0 / PageTop↑
コメント
 
Title
 
 
 
 
 
 
Secret 


Pagetop↑
トラックバック
Pagetop↑
プロフィール

ヒュー研の中の人

Author:ヒュー研の人
このブログは東京電機大学理工学部ヒューマノイド研究部の公式ブログです。2012年から部に昇格しました!
その日の活動や大会の記録をできるだけ更新していきたいです!!

☆だいたい金曜日前後に更新します☆

FC2カウンター
カレンダー
04 | 2017/05 | 06
- 1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31 - - -
リンク
ブロとも申請フォーム
携帯でみるには↓
QR