活動報告No115 Webサイトを作ってみよう (2/3) ~実践編~
カテゴリ: 未分類
おはこんばんにちは。元美術大学志望の1年マエダです。
親から金にならん仕事はするなと言われてこの電大に来ました(^o^)。浪人している友達がこの1年必死に勉強しているのに私はこの1年で何を失って何を得たのか、考えるだけで朝も起きれません夜も眠れません。

今回は実践編です。前回の学習編を見ていない方はぜひそちらからご覧下さい。
→前回:【活動報告No.114 Webサイトを作ってみよう (1/3) ~学習編~】

全体の流れはこんな感じです↓
前回
1, Webサイトって何からできている?
2, Webサイトの作り方を学ぶ方法
【今回】
3, 開発環境を整える
4, おすすめの無料サーバ
5, その他フリーソフト

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


前回からProgateを試してみたでしょうか?今回はそこで学んだHTMLとCSSを使って何か創ってみたい!という人に向けた記事です。



3, 開発環境を整える 

コードを書くために必要なものが、コードエディタというものです。ちなみに英語でedit(エディット)は編集という意味です。
ここでは私が使ったことのある3つのコードエディタを紹介します。

(i)Brackets … 無料
(ii)Atom … 無料
(iii)Dreamweaver … 有料


それでは各エディタを簡単に説明します。

(i)Brackets

im7.jpg 

世界最大のコンピュータ・ソフトウェア会社である、アドビシステムズ(以下Adobe)が開発したコードエディタです。初心者は取り敢えずこれを使う方がいいでしょう。HTML・CSSのコードを書くのに便利な機能があらかじめ備わっていますし、慣れてきたら機能を拡張することもできます。

(ii)Atom
im6.jpg 

私が最近使っているコードエディタです。中級者以降の人や、いい感じの無料コードエディタが欲しい人、コードエディタを自分仕様にカスタマイズしたい人に向いています。初期状態では超シンプルなので、自分に必要な機能が分かっている人でないと使いこなすのは難しいかな?
サイトを多機能化するとプレビューがバグったりするのが悲しい。(特にアニメーション)

(iii)Dreamweaver

im8.jpg 

2つ上の(i)同様Adobe社が提供する有料のコードエディタです。高機能でプロ向きとされていますが、動作は重いし不安定、他のAdobe製品との連携を利点とするならば、その他製品の料金が極めて高額でとても個人じゃ扱おうと思えないソフトです。(まぁいつか.psdでコーディングしたりEmmetやマルチカーソルを使う気になったらコッチに移ろうかな(゚⊿゚))
気になる人は下記のAdobe公式サイトまで。
[Adobe公式サイト]
imgres.png 


まとめると…
(i)Brackets … 初心者
(ii)Atom … 中級者以降
(iii)Dreamweaver … プロ(?)


4, おすすめの無料サーバ (投稿日時点)

私たちは普段、GoogleやYahoo!などの検索エンジンで何かしらのキーワードを検索しWebサイトを見るわけですが、その
"Webサイトを見る"
という行為は、
"世界中のどこかにある「サーバ」というデータを蓄積している所にアクセスする"
ということです。

もしあなたが自作のWebサイトを公開したいのなら、そのサーバにデータを送る必要があります。HTML・CSSのデータをサーバに送ることを、「FTP転送」(←重要)といいます。ここではそのFTP転送を受け取ってくれる無料のサーバを紹介します。
今回私がおすすめする無料サーバはただ1つ。


です。

無料でサーバを借りられる所は結構あるのですが、一部使用に制限があったり、強制的に広告が付いたりします。FC2ブログなんかはその良い例ですね。(pro版は広告無しですが)

ウェブクロウはネットアウルという会社が提供するサービスの1つで、
広告し!・容量!・商用利用OK!
の三拍子が揃ったとても優良なサービスです。

もし容量が足りなくなったりして、有料でも本格的にWebサイトを運営したい!という人でも同社がお手頃価格でサーバを提供してくれますし、移行する際は同社のサービスなだけあって運営までの手順が似ていてやりやすいです。

[ウェブクロウのサイトはこちら]


5, その他フリーソフト 


先ほどFTP転送というものが出てきましたが、「3, 開発環境を整える」で紹介したコードエディタとは全く別のソフトウェアが必要となります。コードエディタはあくまでコードを書くためのものです。ただし、紹介したコードエディタの中でもDreamweaverはFTP転送の機能が備わっています。(さすが有料)
ここではFTP転送をするためのフリーソフトを紹介します。

FTP転送の大御所フリーソフト「FFFTP」というやつです。趣味でWeb開発している人の大半はこれを使っているんじゃないんでしょうか?
使い方はググるしかないですね。ホントこれは大御所ソフトなので、使い方を探すのに苦労しないと思います。

私は元々Dreamweaverのを使っていましたが、コードエディタをAtomに切り替えると同時にこのFFFTPを使い始めました。今のところいい感じ。




以上で実践編終わりです。本格的にWebサイトを開設するまでの道のりはある程度分かってもらえたでしょうか?このブログはProgateなんかと違って文章をしっかり読んでいく必要があるため、その手が苦手な人には読みづらかったかな。。

次回は余談編です。Webサイトを作るうえで知っておいて損はないような小話になると思います。

( ・ิω・ิ)ほんじゃまったのぉー

スポンサーサイト
編集 / 2017.01.20 / コメント: 0 / トラックバック: 0 / PageTop↑
コメント
 
Title
 
 
 
 
 
 
Secret 


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

ヒュー研の中の人

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

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

FC2カウンター
カレンダー
02 | 2017/03 | 03
- - - 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