1ヶ月半で習得・勉強したweb関連のこと

 
なぜか5ヶ月中盤にこれを書いているのですが、(ブログ始めたのが、勉強し始めて2ヶ月半ぐらいで、最初に書いたのが2ヶ月半の記事だったからすいません!)当時のレジュメとかやったこと引っ張り出しながら書いています。1ヶ月半といえば家が断水したりAirが故障したり、1週間お腹壊し続けたり、入院したりとろくな思い出がないのと、記憶もあやふやなので、ご承知下さい。
 

結論から言うと
一ヶ月半あれば、HTMLとCSSとPhotoshopを一通り学べて、精度はあれですが使えるようにはなります。またWordPressも概念や使い方はわかります。

 

次に1週間ごとにどんなことを学んだか書いていきます。

 

1ヶ月半週別でやったこと

img01_yzh

4月6日〜10日

Photoshopの基本操作、よく使う操作を学び、課題でバナー作成などをしました。色々なサイトのキャプチャ(スクリーンショットみたいなもの)を取って貼り合わせを作って、そのままPhotoshopでコピーするというのを繰り返すことで、デザイン性を身につけたり、Photoshopの操作方法を身につける練習をしました。
 

4月13日〜17日

ウェブデザイナーやweb業界について学びました。知識や概念が多かったです。
週の終わりぐらいから、HTMLとCSSについても学び始め、初めてのプログラミングの授業、わくわくしてたのは憶えています。
 

4月20日〜24日

HTMLとCSSの続き、よく使うタグやよく使うCSSについて学びました。だされた課題(webサイト)を何も見ずに真似して打つ(コーディングする)の繰り返し、最初はできなかったので2、3回繰り返して見ずに打てるように練習してました。
 

4月27日〜30日

復習期間かつ、自分がつくったキャプチャから、画像を切り出して、HTMLとCSSを組んでサイトをひたすら真似るということをしました。これが一番力がついたんじゃないかなと思います。
また簡単なJQueryを学んで、スライドショー(画像の移り変わりの実装)などができるようになりました。レスポンシブについても少し触れました。
 

5月4日〜8日

HTMLとCSSはひと段落して、レスポンシブについてがっつりやりました。レスポンシブの課題も出て苦戦したのを覚えています。その後、サーバやドメイン、FTPなどウェブサイトの根本について学んだのち、WordPressについての初歩的な知識やどういうものなのか学び始めました。
 

5月11日〜15日

WordPressのインストール方法、実際にサーバにあげて使う、HTMLとCSSで作られたページのWordPress化、パスの設定、どんなプラグイン(機能)があるか、ページ階層、SNSの設定など、WordPressを深く掘って学びました。

以上です。
 

各現状まとめ

 

・HTML(5)とCSS(3)・・・学び始めてちょっと使えるようになった
・JQuery・・・プラグインとコピペと説明があればどうにかなるレベル
・Photoshop・・・一通り学び、一通りできるようになった(気がする)
・WordPress・・・やったけどよくわからない

 

まとめ

一番初めに言った通り、一ヶ月半あれば、HTMLとCSSとPhotoshopを一通り学べて、精度はどうなのかと言われればあれですが、使えるようにはなります。またWordPressも概念や使い方は分かるようになります。この時は知識を必死に詰め込んで、わからなかったら何回もやる(特にコーディング)というのを繰り返していました。

 

続きはこちら
2ヶ月半で勉強・習得したweb関連のこと

 

私がインターネットにハマったきっかけ⑵

 
私がインターネットにハマったきっかけ⑴はこちら

 

そのあと、配布サイトを作ったけど、ネット上での居場所がにコミュニティータウンから他の場所へと変わっていきます。

ふみコミュニティ、略してふみコミュ!(http://www.fumi23.com/)というものです。
この記事を書きながら、まだこのサイトあるのかなってそわそわしていたら、まだあってなんかほっとしました。このサイトは掲示板で同世代の子と話すというのが主流らしいですが、私の使っている目的はまた別物でした。

 
掲示板のここの部分。HP作成というジャンルです。

 
ここで、自分が分からないところを質問したりするのですが、時々このようなスレ(タイトル)があります。
  

「photoshopで壁紙・アイコン作ります!」
「おしゃれでかわいい窓を作ります」

(窓=画像を貼り合わせたり加工したりしたもの、中にフレームリンクを入れて使うもの)
  

なんじゃこりゃと思うのですが、自分の技術を使って他の人に何か素材(壁紙やアイコン、バナー)を作ってあげたりするのです。逆に、作ってくださいというようなスレもあります。
 

私はここにどっぷりハマりまりました。

世の中には同世代ですごい加工をする人がいるのです。
 
スクリーンショット 2015-08-07 0.11.41

(引用:http://choux.6.ql.bz/
 

スクリーンショット 2015-08-07 0.21.52
(引用:http://lapin.chu.jp/

こんな感じ。この作った窓に座標で指定して、フレーム(表示するページ)を埋め込むのです。そしてmenuのリンクと連動させて、クリックすると別のページが現れるっていうのをやっていました。
 
自分のは残念ながら実家のPCが買い替えたと同時にどこかへ行きました・・・みなさんすごかったです。

  

自慢といえば自慢なのですが、きちんとサーバを借りてメモ帳でタグをコピペして貼ってを繰り返して、FFFTPでサーバにあげていました。そのときcssという概念は自分の中にはなく、brかタグにfontsizeとか貼っつけてやってた記憶がありました。

 

今となってはもうこのようなものは作れないかもしれないのですが、当時の私にはとてもキラキラしてるものでした。(今調べたら、キラキラサイトと呼ぶようです。)
  

またそこからPictBearという無料加工サイトで配布できるブラシを作って配布したり、壁紙やアイコンの素材を作って配布したり、バナーを作ってあげたりするようなことをしていました。

 

原動力はやっぱり「ありがとう」とか「すごいかわいい」とかそういう言葉だったり、こんな加工したい!この人と友達になりたい!とかそういうものでした。

  

この界隈で有名な方はたくさんおりましたが、本業にするような道をたどった人はごく少ないと思います。もったいないなって、こんなにできる人がいるのにと思っていました。

 
2〜3年はこれにどハマりしていたのでしたが、高校受験や部活と共に忘れ去られていきました。自分でも続けていればと思うのですが、いい大学に入ることを目標にしてた過去の自分は変えられないしょうがない事実です。つべこべ言っても仕方がありません。

  
後々就活でこの局面にぶちあたります。

 

HTML&CSSを1ヶ月で習得するための無料の勉強法とは

 

まず初めに

 

プログラミングの勉強ってまず何から始めていいか分からない・・・

一般的なサイトを作るために必要なマークアップ言語のHTMLとCSS。このブログの見た目・レイアウトはHTMLとCSSでできています。(スマホ用のメニューだけはJavascriptという言語だったり、実際動かしているのはPHPという言語です。)

プログラミングに入る前の基本のきでもある、このHTMLとCSSっていうのは習得するだけであれば1ヶ月でできてしまうのではないかと思いました!ですので、その勉強法をいくつか紹介したいなと思います!お前学校いってんじゃんって思った方、行く前にHTMLとCSSだけは独学で勉強してから行きました。またこっちに来てからこうすれば早く習得できるんじゃないかと思ったので、それを踏まえた勉強法です。

以下みなさんのお力になれればと思います!
 

勉強する前に用意しておきたい環境

・ブラウザ(GooglechromeやSafariなど)

 このサイト見ている人は用意する必要はないです。デベロッパーツールが使えるのでおすすめはChromeブラウザです。

・コードを書くためのテキストエディタ

 初心者の方にはSublimetextというのがオススメです。
ダウンロードや使い方はこちら
サクラエディタやmiでも大丈夫です。

5つの勉強法

ddd3dad613828f087d6aaaa8edf03129_s

⑴Progateを使う

⑵ドットインストールを使う

⑶メンターとなる人を見つける

⑷簡単なWebサイトをコピーしまくる

⑸デベロッパーツールとリファレンスを使ってうまくいかないところの原因を探す

 

⑴⑵は両方やって欲しいのが本音ですが、どちらかだけでも大丈夫です。
⑶はできたら見つけて欲しいなと思います。つまずいたときに役に立ってくれます。

あとは⑷⑸を利用して、技術をものにしていきましょう!
 

⑴Progateを使う

スクリーンショット 2015-08-03 17.26.51

一番おすすめしたいのが

Progate

という学習用のwebサービスです。
Progateというのは、ゲーム感覚でHTMLやCSSといったプログラミング言語を身につけることができます。
 

スクリーンショット 2015-08-03 17.32.44

HTML&CSS基礎編、応用編とあるのですが、どちらもクリアしていくにつれ徐々にサイトができあがってくのでとても満足感があります。あっ!いつのまにかwebサイトができていたなんてことになります。

個人的にレベルが上がっていく感じも好きです!
  
スクリーンショット 2015-08-03 17.32.10

スクリーンショット 2015-08-03 17.33.47

実際の勉強画面がこんな感じになっています。

 

⑵ドットインストールを使う

スクリーンショット 2015-08-03 17.15.11

プログラミン言語やサイト作成、アプリ開発を勉強するための動画サイト

ドットインストール

実際の画面での操作状況を動画で見ることができます。レッスンが細切れになっていたり、一回一回が短いので飽きずに続けることができます。
  

スクリーンショット 2015-08-03 17.18.41

ドットインストールを使ったおすすめの勉強法は、画面を2分割して左側でドットインストールを見ながら、右側のエディタで同じように打って、実際どう映るのか自分自身で試すことです。

 

⑶メンターとなる人を見つける

HTML&CSSを1ヶ月で習得するための無料の勉強法とは

上記の二つや実際に本を読みながら勉強することも重要なのですが、もうすでにプログラミングができてメンターとなる人が身近にいるとなおさらいいと思います。

なぜならつまずいたり、わからなくなったりした場合、原因を見つけるのが難しいのがプログラミングです。そういったときに身近に質問できる人がいれば、すぐ解決できる場合もあるのでおすすめです。

 

⑷簡単なWebサイトをコピーしまくる

上記で基本を身につけたら、後はもう実践して力をつけていくだけです。だらだら概念だけを勉強し続けても実際に作れなければ意味がありません。なので簡単なサイトからコピーしていくのがいいと思います。

じゃあどうやってそういう参考サイトを見つけるのってことなのですが、いい感じのサイトが集まったwebサイトがあります。

 
HTML&CSSを1ヶ月で習得するための無料の勉強法とは

bookma!

このサイトは世界のイケてるサイトを集めたサイトです。色指定でサイトを選ぶことができます。下のイケサイよりもおしゃれなサイトが多いなと個人的に思います。

  

HTML&CSSを1ヶ月で習得するための無料の勉強法とは

イケサイ

イケサイは日本のサイトをメインに紹介しています。ここのいいところはサイトを種類別に見ることができること、コーポレートサイトや通販サイトなどといいうように、種類別にサイトを検索することができます。

  

スクリーンショット 2015-08-03 17.02.01

ランディングページ集めました。

ランディングページという1ページだけでできたサイトを集めたサイトです。真似するのが比較的簡単でハードルが低いので初心者さんにはおすすめのサイトです。

 

イケてるサイトを集めているので、構造が難しかったり動いたりするサイトがあります。できるだけ簡単なサイトから取り組んでいった方が達成感もあるし、途中で挫折しにくいと思います。自分でいいなと思ったサイトを選んで真似してみてください!

 

デベロッパーツールとリファレンスを使ってうまくいかないところの原因を探す

わからなくなったらデベロッパーツールとHTML&CSS辞典があればなんとか対処することもできます。

スクリーンショット 2015-08-03 17.06.47

デベロッパーツールとは

Googlechromeについてる、どんなCSSで書かれているか見ることができるものです。
反映がうまくされない部分をデベロッパーツールで押すと、そこがどんな風に書かれているのかを見ることができます。

 

HTML、CSSリファレンス

またこのタグなんだっけとか、行間を指定するタグなんだっけというのにはHTML、CSSリファレンスがオススメです。タグの説明やタグを探すことができる辞典みたいなものです。どういうCSSを書けばいいのかが一目でわかります。

 

最後にひとつだけ

上記の方法であれば独学で無料で勉強できるのですが、一つだけ注意点があります。プログラミング言語は時の流れが速かったりトレンドが急に変わったりします。実際にHTMLでも今はHTML5が主流ですが、昔はXHTMLといったものもありました。疑問点が出て探す時や本を買うときは、いつ発表されたものなのかというのも念頭に置いておいてください。今は違うなんてことがたまにあります。

上記の点をふまえて是非HTML&CSSの勉強を頑張ってみてください!

 
 

私自身数ヶ月前にプログラミングやコーディングを始めた初心者にすぎません。いろいろと間違いがあるかもしれないので、見つけた!って方はお問い合わせで一報下さると助かります。

 

セブ島生活残り一ヶ月でしたい10のリスト

 
セブ島生活も5ヶ月目に突入しました!と同時に残り一ヶ月のセブ生活となりました。

割とインドア派なのですが、後一ヶ月でこれはやってみたいなーってのを書き留めておきたいと思います。
  

1. オスロブでジンベイザメと泳ぐ

Swimming in the sea at Oslob with Whale sharks.(こういうの好きです)8月末に行きます!

2. トップスで綺麗な夜景を見る

Watching a night view at Tops.(こういうのも好き)8/21達成

3. フィルポータルの記事を後10個書く

Writing ten articles about cebu.(セブいいとこたくさんありますよん)

4. web案件できたら最低後1つは携わる

Making at least one website.(働くの大好き)無事いただけました!8/5完了

5. セブにいる色んな人とご飯に行く

Going to lunch or dinner with some people.
(最近全然です、誘えないので誘ってください笑)初対面の人とごはんやお茶に行く機会が数回ありました!十分です。ありがとうございました^^

6. webAPIを使ったwebサービスを実装する

Making a web service using webAPI.(いいの思いついた)

7. バロット(フィリピンのゲテモノ食べ物)を食べる

Eating a bault.(記念に。)

8. サンミゲルたくさん飲む

Drinking a lot of Sanmiguel beer.(セブ来てビール好きになりました)飲んでる!!!

9. カルボンかコロン(現地の)マーケットに行く

Going to Calbon or Colon market.(現地感溢れることあんましてない)8/1完了

10. ヒルトゥガン島かボホール島のチョコレートヒルに行く

Going to Hiltungan island or Bohol island.(観光も)

  
さほどやりたいことがないのに気づいて絞りだすのに苦労しました。10個全ては難しいかもしれないけど、やれるだけやりたいなと思います。セブいるんならここ行っとけよ!とかここおすすめだよ!ってとこあれば教えて下さい( ´ ▽ ` )ノ

残り1ヶ月楽しみます。
 

初めてのwebサイト案件

 

たまには頑張ったぜアピールでもしてもいいですか!笑
 
webサイト案件を手伝わせてもらっていて、初めてお給料がもらえるプログラマー(コーダー)らしい仕事をしました!本当はこんな案件って載せたいんですけど、さすがに無理なので全部終わってクライアントの許可がおりたら載せたいなと思います!

 
内容はというと
11ページ2カラムのサイト。
やたらfloat。
やたらテーブルタグ。
やたら余白。
 

でもやっぱコーディングしてる時は時間過ぎるのが早いし、HTML打ってからCSSで整えてデザイン通りになるのが楽しかったです。

 

チームのプログラマーの方がお問い合わせフォームやら検索機能やらを頑張っていて、早くそこまでできる人間になりたいなー同じ話したいなーとじわじわ感じます。

 
とりあえず今勉強しているPHPと向き合います。
PHPはハテナマークがたくさん飛び交って大変ですが闘います。

 

3ヶ月半で学んだ勉強・習得したweb関連のこと

 
セブに来て3ヶ月半以上が経ちました。風邪を引いたと同時にやる気もなぜかなくなり、双方ようやく治りました!

 

この前書いた記事「2ヶ月半で学んだ勉強・習得したweb関連のこと」の続編です。現状把握と今後のための備忘録です。

 

各現状まとめ

 

プログラミング関連の状況

 
・HTML(5)とCSS(3)・・・精度があがってきた(気がする)
・JQuery・・・プラグインとコピペでどうにかいけるんじゃないかと思い始めたあかんあかん。書けることは書ける。
・Javascript・・・個人的にドットインストールで勉強中。ハイブリッドアプリを作ってみたい。
・PHP・・・補習授業でがっつり。フレームワークを使ってログイン付き掲示板を作れるようになる過程。ドットインストールも並行しながら勉強中。

 

デザイン関連の状況

 
・Photoshop・・・仕事でバナー作ったり。画像修正したり。効果的な操作方法みたいなの習得したい。
・Illustrator・・・一旦放置なう。

 

今後の目標・やること

 

技術面の目標

・HTMLとCSS…案件や仕事を通して精度を高める。ツールを使って自分のコーディングの癖などを直していく。
・Javascript…サクサク打ちたい。サクサク。
・PHP…講師の目標ではフレームワークを使ってログイン付き掲示板を作れるようになってから、外部APIを使って作りたい仮のサービスを作ってく。うん作りたい。できたらセブにいる間に。

アプリ開発、Rubyに関しては一旦放置。とりあえずPHP(開発環境LAMP)を使ってwebサービスを作れるようになるまでいざ精進。全然まだまだなので、既存で使える言語の精度をあげることに集中したいなと思います。

 

デザイン関連の目標

サイトデザインやバナー作成などさせてもらっているので、デザイン力をあげていきたいので、勉強法を模索・考え実行に移していきたいなと思う。

 

仕事での目標

学習の山場を越えて、PHP以外はもう実践になってくるので責任持って少ない時間で高品質のものを作っていきたい。

 

まとめ

コーディングは並行で続けつつ、PHPでサービス開発を学びつつ、独学でJavascriptというような感じです。最近は偶然画像加工関連仕事をもらったりでそんながっつりプログラミングってわけでもないので、もっとがつがつやりたいなと思います。

帰ってからのこともそろそろ考え始めたいなと思います。うんなんかまとまりないです、以上。

 
 

Web制作チーム発動!サイト完成しました!

 

スクリーンショット 2015-07-18 0.02.34

以前の記事で、Web制作チームができてここから案件を営業かけてやっていくって感じなのですが、自分たちのサイトも作りました!

コーディング担当でした。13インチ以上で見たらあかんことになってるとか、画像が重すぎる(パンダするの忘れましたごめんなさい)とか色々不備ありまくりなのですが、作ったら誰かに見せたいのが人間の本望なので、URL載せます。修正は後々かけていきます。

 
制作チーム「MAGDAGDAG」のサイトはこちら
 

webデザインの先輩の方々、指摘たくさん下さい!!!

 

こっち(セブ)にいる間に案件1、2個は携われたらなと思います。ちょっとサイト作って欲しいなーなんて思ってる方、割と格安で作れると思うので、是非お手伝いさせてください!!連絡お待ちしております!

あ、お問いあわせフォームがまだ繋がっていないので、私のサイトから連絡いただけると助かります。(すみません)

 

そろそろWORKSも更新します!

身体は資本ですねって話

 

アイキャッチ画像は京都今出川付近の樹々丸という古民家風の和食屋さんです。定食がとても美味しいので、今出川、同志社にお越しの際は是非。笑

 

もっと更新の速度を上げようと思っていたのですが、この5日間まるっと風邪にて寝込みつつコーディングをしておりました。(いやほぼ寝てました。)

 

体は資本だなと本当に思います。
 

高校時代は3年間皆勤賞をとるぐらい健康体だったのですが、(勉強に遅れたくないから行ってたも同然だったのですが)大学に入ってから見事に3ヶ月に一回ぐらいのペースでドカンと体調を崩すようになりました。多分親の作るごはんと適度な運動がないからなのかなと思います。

 

ずっと前に読んだ記事で

体は資本、体調を崩すたびに人間の体力の幅は減る

っていう言葉を見て、間違いないと。

 

体調を崩す度にどんどん体力とか免疫力の幅が減っていっている気がします。気をつけないと。

この国には、食物繊維(ごぼうとか)とか発酵食品(味噌、豆腐)、鉄分が取れるひじきほうれん草もなかったり、あっても高かったり。大好きな食べ物たちですが、日本人の長生きに貢献してるんちゃうのと心の中で思っています。

 

そろそろ日本食が恋しいので、いつもの定食屋に行こうかなと思います。だいたい焼き魚定食。今回は鯖かな〜。

 

【トップ固定】フィリピン・セブ島でのIT留学に関する記事まとめ

 

後々記事が増えてきて見にくくなるなと思ったのと、カテゴリーだと更新日時での順番になって見にくいため、一覧を作ることにしました。随時更新していく予定です。(リンクが付いていないものはまだ未更新です。)

 

記事一覧

● インターネットにはまったきっかけ⑴
● インターネットにはまったきっかけ⑵
● 私が留学しようと思った理由
● ACTHOUSEの留学プログラムを選んだ理由
● ACTHOUSEは実際どんな感じか
● 1週間を通しての日常
● 1ヶ月半で勉強・習得したweb関連のこと
● 2ヶ月半で勉強・習得したweb関連のこと
● 3ヶ月半で勉強・習得したweb関連のこと
● 5ヶ月で勉強・習得したweb関連のこと
● 実際英会話はどうだったか、英語に関して
● 留学を終えて
今後について

他にも思いついたら更新していきます!
 

久々にコーディングしながら思ったこと

 

同じ留学のメンバーと講師スタッフで、制作チームをつくるため、その制作チームサイトのコーディングを今日していました。

コーディングしながら思ったこと。

⑴コーディングはちょくちょくしていないと忘れる
⑵開発の方もやっぱり面白そうだなってこと

 

⑴コーディングはちょくちょくしていないと忘れる


今回このような1カラムのサイトでスティッキヘッダーとかスライドショーなどの動きをつけるって感じで、とりあえずHTMLとCSSはできたのですが、その過程でもfloatにハマったり、paddingがとか、センターにどう持ってこようとかやっぱりちょくちょく忘れていました。
どれだけ座学で習っても、忘れることは忘れるし、やっぱり手を動かして色んなサイトコピーしまくるのが大切ですね。

 

⑵開発の方もやっぱり面白そうだなってこと

今同時にPHPとかサーバサイドのことも教えてもらっているのですが、上記のような静的なサイトだと、何か情報やメッセージを伝えたり、サービスや会社のことを知ってもらうことができてもユーザーを巻き込むってことはこれではやりにくいなと。コミュニティサイトであったり、掲示板であったり、通販サイトであったり、勉強サイトであったりはユーザーを巻き込んでアクションができるのが面白いなと思いました。だからもっともっとそっち側のことも吸収しよう勉強しようと思います。

 

週末はJavascriptとJQuery漬けです。忘れつつもあるというか、Javascriptは全然なので調べつつ教えてもらいつつ、メモもしつつ、実装していきます。コーディングはイライラもするけどやっぱり楽しいです。
 
ライターをしているフィリピンのポータルサイト「Phil Potal」の記事も更新できたらと思います。最近記事の影響かはわからないけど行きつけのカフェに日本人が増えて嬉しいような悲しいような妙な気分です。笑