【180505】2週間の報告 ～CSSはじめました～
はじめに
また遅れちゃいました。ごめんなさい。更新曜日を木金にすれば、この失敗もなかったことになるのかなとか考えました。今回土曜更新なんで関係ないですけど。ごめんなさい。もしもう一度遅れるようならば、メインの更新を木曜に、事前に準備できたなら水曜に変更します。
【追記】前回遅れたときも土曜日に更新してました。本当にありがとうございました。
遅れた理由としては、2日に「Deemo」を買ったことが挙げられます。何年も前から言われ続けていることではあるんですが、めちゃくちゃ曲がいいのと譜面もかなり楽しいのでやり続けました。作業に影響が出ない程度で楽しみたいと思います。Deemo、いいですよ。
さて、真面目な話に入りますが、前回のブログでは、僕がやったこと(方法)を紹介しそのレビューみたいなことを書きました。しかし、一番重要な学んだ内容については殆ど触れていませんでした。
ので、今回以降は2週間で学んだことについて、多少の知識がある人が見たときにわかる程度にまとめてみようと思います。
なお、初心者が書く内容ですので、間違っている部分も出てくると思います。それを見つけたときは、できる限り、ブログのコメントかTwitterで報告してもらえるとめちゃくちゃありがたいです。ぜひよろしくおねがいします。
やったことまとめ
この2週間は前回紹介した本を読み進めていました。具体的にはSTEP8～13の途中までです。その間で学んだことをまとめます。
なお、前回学んだことを軽くまとめると、
・HTMLの書き方
・いろんなタグ
・ツリー構造
です。できれば5月中に、このことについてまとめたいですね。
HTMLの勉強
動画・音声の挿入法
上で書いていますが、前回学習したことはふっとばします。いずれまとめるのでそれを読んでもらえるとわかると思います。書いたらリンク貼ります。今回は前回の学習内容がわかっている体での説明になるので、わけわかんないよばーかってなると思います。ごめんなさい。
さて、動画と音声の挿入方法ですが、それぞれ固有のタグを使います。それは動画が<video>、音声が<audio>です。
使い方としては、音声や動画のあるファイルを指定する、ただそれだけです。imgタグと似たような感じですね。属性もimgタグとおなじでsrc属性でファイル先を指定できます。また、どちらも終了タグが必要です。
画像のpタグは、要素内容の通り、音声が再生できなかったときに出てくる文字を書くときなどに使います。動画の場合も同じです。詳しくは後で説明します。
また、audio/video要素に使える属性は他にもあります。全ては書ききれないので、使いそうなやつだけまとめます。
・src属性
上で説明しましたが、ファイルを指定するのに使います。
・controls属性
これは動画や音声の再生や一時停止などができるインターフェースを表示できます。
・wigth・height属性
これはvideoタグで使います。動画の大きさを指定できます。が、cssでも指定できますし、cssで書けば全てのvideoタグに作用するので、そっちのほうがいいかもしれません。強い人教えてください。
こうしてスルッと書きましたが、1つ問題があります。それは、使えるファイルの形式がブラウザによってちがうことです。例えば音声の場合、Chromeは基本どれでもできますが、IEだとWAB形式が使えないなどです。こういうときにpタグの文字が出てきます。
それを解決する方法として、複数のファイルを指定することが挙げられます。そのときに使うのが<source>です。
audio/video要素の子要素にsource要素を書き、src属性でファイルの指定、type属性でMIMEタイプを指定することで、ファイルを指定できます。終了タグは不要です。MIMEタイプとは、どんなファイルかやファイルの形式について表す方法のことです。type属性を書いておけば、ファイルではなくそっちを見て形式を判断します。このsourceタグを連ねて書くことで複数のファイルを指定できます。
複数のファイルを指定した場合、上から順番に見ていきます。画像の場合、mp3形式から最初に見て、次にwebm形式を見て、ここまでで表示できるものがなかったらpタグの要素内容を表示するという感じです。動画も同じです。
余談ですが、chromeを使っているはずなのに動画が表示されないという事が起きました。ファイル名やタイプの指定方法も間違っていなかったので、なぜなのかわかりませんでした。が、後日ソースを確認したら、要素名をmoviesという存在しない要素にしていました。みなさんも気をつけましょう。
CSSの書き方・基本的なこと
上の説明が思った以上に長くなって、書いててきつくなってきたので、簡潔に説明します。より詳しい説明はぐぐったら沢山の人がしているのでそちらを見てください。
CSS(Cascading Style Sheet)とは、HTMLを装飾する言語のことです。例えばですが、pタグで書いた文字って黒で面白くないですよね？
それを
こう書くだけで、
こんな感じの派手な字に変えられます。
他にもただのHTMLだけでは単調なものも、CSSを書くことで、見やすく、見ていてとても楽しいサイトを作れます。基本的にすべての人気なサイトはCSSで装飾されています。
そんなCSSの書き方ですが、
セレクタ{プロパティ: 値;}
のようにして書きます。それぞれについて軽く説明します。
・セレクタ
見た目を適用する対象を表しています。HTMLのタグ名だったりを書きます。
・プロパティ
見た目の変更点を表しています。例えば、最初のCSSのコードのcolorプロパティでは文字の色を変更できます。他にも、文字の大きさや背景色など様々なプロパティが規定されています。
・値
プロパティで書いた点について、具体的にどのように変更するかを表しています。この部分には、プロパティによって書ける内容が決まっており、そこを間違えると正しく反映されなくなります。文字の大きさのこと言ってるのに「赤」って答えても、は？ ってなるだけだよねって話です。
これをたくさん書いて修飾していきます。この説明ではわからなかったかもしれませんが、実際に書いてみればわかっていくと思います。CSSやHTMLは書いたことがすぐに反映されるので、実際に勉強していて、わかりやすいし納得しやすいです。
上のCSSのコードを見るとわかりますが、選択したセレクタに対しては、1度に複数のプロパティ・値を選択できます。記述を少なくできるので楽ですね。
そのCSSの適用の仕方には、3つの方法があります。
1つ目はHTMLのheadタグの中にstyle要素として書く方法です。
このように、そのまま書きます。簡単ですね。
2つ目はタグの中にstyle属性として書く方法です。普通に属性を書くように「style＝””」と書いて、ダブルクォーテーションの中に上と同じように書きます。
3つ目はHTMLファイルとは別にCSSのファイルを作り、そこに書く方法です。拡張子が.cssのファイルを作り、そこに記述していきます。このとき、headタグの中に、link要素でスタイルシートのファイルを適用させる記述をしないと反映されないので、注意が必要です。
この3つの内、基本的に3つ目を使うことが多いです。理由としては、後から見直したときに見やすいこと、編集しやすいこと等が挙げられます。
で、こうやって3つの方法を挙げたわけですが、もちろん違いがあります。それは優先度の違いです。
HTMLは上から1行ずつ順番に読んでいきます。そのため、上で書いていたことでも、下で書き直せば上書きされます。だから、下に書いたものほど優先度が高くなります。
ので、３つの方法で優先度を大きい順に並べると、2＞1＞3になります。もしそれ以外に違いがあったら教えてください。
他にも規則はまあまあありますが、書ききれないので自分で調べてください。
ボックスモデルについて
これについてなんですが、上でstep13の途中って書いているように、まだ終わっていないんですね。また、説明できるほどよく理解できていないので、まとめられる程度に理解できるようになったら、別で記事を書きます。説明しようとするとかなり長くなりそうな感じがするんですが、いい感じでまとめられるようにがんばります。
最後に
いい感じにまとめられたんじゃないかなと思います。大部分は本を参考にして、一部ウェブから補うという形でまとめたつもりです。なにか意見等がありましたら、いつでもお待ちしています。
今のところ2週間に1回で更新してますけど、それに加えて何か書けたらいいですね。今回書いてて、以前やったことを再確認できてよかったと思います。
ただし、長くなるので、書いててかなり時間がかかりますね。このブログを書くのに数日かかってます。遅れたのも仕方がないですね。ブログ自体は続けたいんですけど…。それなりの時間が取られてなかなかにきついので、なにか思いついたらやるかもしれないです。
次の2週間では、とりあえずこの本を読破するのと、やってみたいことがあるのでそれをできたらと思います。
ここまでご覧いただきありがとうございました！ ぜひ次回もみていただけると嬉しいです！ さすがに次回は遅れないようにします！
【180421】2週間の報告 ～初回で3日間も遅れてすみませんでした～
はじめに
すみませんでした(初手土下座)。
4月18日に報告する予定でしたが、いろいろ忙しく更新できませんでした。m(_ _)mｺﾞﾒﾝﾅｻｲ
しかも水木で更新できなかったから4月20日にやりますって言ったはずなんですけどね…
もともと4/18に更新する予定だったブログですが、いろいろ遅れまして、今日の午後に更新すると思います。
— 鈴木 (@szknab) 2018年4月19日
初回で遅れてしまい、本当に申し訳ありません！！
あと7分でブログ更新できるかなぁ…？(多分無理)(ごめんなさい)
— 鈴木 (@szknab) 2018年4月20日
はい！間に合いませんでした！！！！
— 鈴木 (@szknab) 2018年4月20日
こんなことにならないよう、以降は水曜、遅くても木曜には更新するようにします。
やったことまとめ
◯HTMLの勉強
・Progate(プロゲート)のHTML&CSS初級編
・本のサンプルコードを写して、わからないことを調べる
・サイト(HTMLのみ)をつくってみる
それぞれについてまあまあ詳しく説明します。
Progate(プロゲート)のHTML&CSS初級編
まずはじめに、株式会社Progateが提供している、「Progate」という記述式のプログラミングの学習サイトをしました。やったあとで知ったんですが、最近かなり人気があるサイトだそうです。
その中でも「HTML&CSS初級編」をやってみました。
そして…
HTML & CSS 学習コース 初級編を修了しました！ https://t.co/x41XOPOXMY #Progate
— 鈴木 (@szknab) 2018年4月12日
初級編を修了しました！
だいたい1日に1～2時間やって3日で終わりました。これくらいの量だったら、時間がある日ならば1日でも終われると思います。
(初級編を)完走した感想
HTMLの入りとしてやるならば、プログラミング初心者でもとてもわかり易いと思います。
やってみればわかるんですが、最初にスライドで説明があって、その後実際に書いてみるんですね。で、エディタに書くんですけど、普通に書きやすくていいなと思いました。
あと、エディタの横の部分にやらなければいけないことが説明してあり、どこに書けばいいかわからないという人もエディタ上にコメントとして書いてあるし、目標のプログラム(完成したプログラム)が書いてあるので、次にしなければならないこととどこまでやればいいのかがすぐわかると思います。
1周したらHTMLとCSSについての基本的なことは知れるかなー、数周したらなんとなく覚えられるのかなーって感じです。
ただし、本で勉強したあとに思ったことなんですが、重要なことをまとめてある分そこでわかった気になるので、その先まで学習しようとする意欲がなければ教えられたこと以上のことがしづらいのかなー？と思いました。ただし、中級編以降が有料でやっていないので、そちらの方にあるのかもしれないです。もしそうならごめんなさい。
ちなみに、有料のコースは有料プランに入るとできます。月額980円ですので、初級編をやってみて良さそうだと思ったらやってみるといいかもしれないです。
本のサンプルコードを写して、わからないことを調べる
とある先輩からHTMLとCSSの本を借りたので、そのサンプルコードと説明書きをいろいろ書いたり試したりをやってみました。
本は磯博著の「演習で力がつく HTML/CSSコーディングの教科書」をお借りしました。まだ全ては読んでいませんが、とてもわかり易い本なので、ぜひ調べてみてください。
- 作者: 磯博
- 出版社/メーカー: SBクリエイティブ
- 発売日: 2015/05/16
- メディア: 単行本
- この商品を含むブログ (1件) を見る
やってみた感想
内容は、HTMLとCSSのサンプルコードを最初に書いて、その説明等をあとから書いてみるという形式です。そして、最後までできれば強そうな感じのサイトを自分で作れるみたいな感じです。
事前にProgateで基本を学んでいたからかもしれませんが、内容がすんなり入ってきてかなりためになりました。
サンプルコードを写して、解説のところを読み込んでコード書いて、わからないところがあったらインターネットで調べてコードを書くをずっと繰り返していただけなのですが、実際にコードを書いて覚えるから、次に書くときもちゃんと覚えてるってのがすごくいいなと思いました。
しかも、もしインターネットでもわからないことがあったら、先輩に聞けば教えてもらえるという最強のムーブがあるので、知りたいと思った部分はかなり理解できたのではないかと思います。
サイト(HTMLのみ)をつくってみる
前の2つ共そうなんですが、言われたとおりにするだけ、コードを写すだけだから、応用力というか実践力的なものはつかないと思うんですね。だから、勉強したことを使ってなにか作ってみるというのはめちゃくちゃ重要だと思うんです。
ので、毎回何かを作っていけたらいいなと思っています。
作ったやつ
スクショで紹介します。
タイトルは「おすすめなろう作品」です。
見てわかると思いますが、CSSを全く使っていません。理由としては、上記の本による勉強がHTMLのところまでしか終わっていないからです。終わったら、このサイトにCSSで装飾してビフォー・アフターみたいにするのも面白いかなと思ったのも理由の１つです。
そのため、非推奨とされているbrタグを使ったり、CSSでやったほうがいいらしい、文の強調をstrongタグを使ってやっています。
「ソースコード見ないとわかんねーぞクソが」という意見もあるかもしれません。
記事を書いた場合、文章でソースが長くなることによって見にくくなるので、見た人側からしたらどうなんだろうと言う感じなんですが…。
もし載せたほうがいいみたいな意見やアドバイス等があれば、ブログのコメントかTwitterの方にリプかDM投げてもらえるとありがたいです。
記事の中身については気にしないでください。
最後に
久しぶりにプログラミングの勉強ができたという感じがしました(HTMLは正式にはプログラミング言語ではないんですが)。
やはり、コードを書くことはとても重要ですね。本を読んでへーとかほーとか言ってるだけでは、自分の場合あまり身につくことはありませんでした。
今かなり学びたい欲が強いので、こうして調子が出ているときにしっかり勉強しようと思います。
ちなみに、このブログも少し進化していたことにお気づきでしょうか？ 良ければお探しください。
はてなブログはHTMLを使えるので、この勉強をするにつれてブログの方もみやすくなるかと思います。
次回までの目標として、本を読み終えて、また何か作れたらいいなと考えています。
ここまで長々と書いたものを最後まで見ていただき、本当にありがとうございました。
次回は遅れないようにしますので、鈴木先生の次回にご期待下さい！
【お知らせ】プログラミングの記録を投稿することにしました！
4ヶ月ぶりのブログ
みなさん、お久しぶりです。鈴木です。
前回から4ヶ月もたってブログは放置し続けると思っていたのですが、久しぶりに書いてみることにしました！
今回のブログは面白みはない＆短いです。
話は変わりますが、うどんって美味しいですよね。
お知らせの中身
さて、今回記事を書くことにした理由は、これからプログラミングの勉強の報告をこのブログで行おうと思ったからです。
経緯としては、めちゃくちゃ優しい先輩にプログラミングをやるコミュニティに誘われたのがきっかけです。
そこで学んだことやなんとか等をここで報告(備忘録的な)をしていこうと考えています。
今の所の予定では、2週間に1回・水曜or木曜日に2週間でやった勉強の成果をこのブログで報告できたらいいなという感じです。
おそらく次の更新は1週間後の18日にやると思います(時間帯は不明)。
記事を見てくれるとやる気の向上にも繋がりますので、これからもぜひ見てもらえると嬉しいです！よろしくおねがいします！
リーダーの重要性を甘く見て死んだ話
はじめに
このブログを書き始めたきっかけでもあるんですが、7月終わり頃から†くろねこ†くんと九州アプリチャレンジキャラバンというアプリ開発のイベントに参加したんですね。
そこでは一応リーダーになったんですね(2人だけですが)。それで進めていく中で、ものすごくやばい失敗をしたんです。そういうイベントには初参加だったから、仕方ないこととは思うのですが、自分や他の方に同じ轍を踏んでほしくないと思いまして、今回書くに至ったのでありました。
challecara.jp
あと、少し長めですので、読み飛ばしたい方は最後のまとめだけでも読んでもらえればありがたいです。
最初に結果を…
僕たちは家計簿アプリをつくることにしまして、ガーッとやりまして、最終的に完成まではしなかったものの、お披露目できるくらいにはなりました。
結果としては、何かの賞を取れたというわけではないです。しかし、アプリ開発という初めての経験に加え、初めてHTML、CSS、Javascriptに触れる機会を得たため、とても貴重な経験になったと思います。
…くろねこくんにとっては。
くろねこくんを恨んでるみたいなことではないです。むしろその逆で、僕は感謝しなければならない立場にあります。本当にありがとうございます。
なぜこうなったかは自分の失敗が原因とだけ言っておきます。
↑ロゴはこんな感じ。僕が描きました！
半年間の振り返り
約半年前から取り組んできたチャレキャラですが、とりあえずどんな感じで過ごしてきたかを公開したいと思います。もしよければ、どこで失敗したのかを考えながら見てもらえるとありがたいです。
7月
○最初のコアイベント
・そこでなにを作るか決めた。
・Javascriptという新しい言語を使ってアプリ開発をすると決めた(メンターさんからのすすめ)。
・次回のコアイベントまでに軽くでもJavascriptが書けるように練習すると言った。
・ピザ美味しかった。
9月
○2回目のコアイベント
・は、PCKとかぶったため行けませんでしたー！
○前記期末試験
・勉強に時間をかけたため、試験終わるまでJavascriptには一切手を付けず。
○試験後
・はじめてJavascriptを触る
・その3週間後くらいに中間発表があると知って焦り始める。
・福さんに教えてもらいながら頑張る。
・くろねこくんと福さんとまずはカレンダー作らなきゃって言ってた気がする。
○秋休み
・開発しようとしても、どのタグ、どの方法、あとデバッグのやり方などなどがわからず撃沈。
・あとこの辺りから、援団の練習が始まる。
10月
○10/1～
・援団の練習が本格化。
・放課後プログラミングできる時間が減る+帰ってきても疲れて寝る が続き、無事死亡。
○中間発表1週間前
・このあたりでくろねこくんがどこを作っているかわからなくなる。
○中間発表
・プレゼン頑張る。
・この時点で進捗は20%くらい。
・これ終わったあとも援団のせいで作業はあまり進まず。
11月
○高専祭なり体育祭なり
・竹取最高！！！()
・神輿最高！！！()
・援団最高！！！()
○後期期末試験
・大イベント終わったと思ったらこれが続けてくるから、なんかもう壊れる。
・このときくろねこくんがめちゃくちゃ頑張ってくれた。
・僕がアプリロゴやアイコンを作ると言い出す。
12月
○試験後
・急いでロゴ描き始める。
○本番間近
・ロゴ・アイコン作成。
・くろねこくんの作ったものの仕上がりにかなり驚く。
○本番当日
・発表は僕がやった。
・進捗は80％くらい
・発表した物のプログラムは全てくろねこくんが書いた。
なんの失敗をしたか
はい、ついに本題です。とりあえず大きく5つかなと思ってます。もしかしたら他にもあるかもしれません。とりあえず順にあげていくと、
1.最初の2ヶ月間に何もしなかった
2.2人で1つの作品を作るはずなのに、なぜかそれぞれが別のものを作ってた
3.自分だけでプログラムを書く時間が少なかった
4.リーダーとしての仕事をしていなかった。
5.お互いの役割を明確にしていなかった。
これぜんぶやばいので簡単に解説します。上の年表からじゃわかんねえよってのもありますが気にしないでください。
問題1：2ヶ月何もしない
まあ夏休みだししょうがないよねっても思うんですが、Javascriptをどうやって勉強すればいいかわからなかったんです…。調べてもでてこないし…。
なんですが、今考えてみればslackで聞けばやっさしい先輩方が教えてくれただろうなって思います。
問題2：2人で別のものを作る
これが1番闇が深いです。
最初は僕が福さんに教えてもらっていました。僕がAを作っています。そこにくろねこくんがやってきて、一緒に教えてもらうようになりました。彼がBを作ります。おめでとう！分裂しました！
みたいな流れでやっちゃいました。ほんと怖いですね。こうなる前になぜ止めなかったのか不思議でなりません。
問題3：プログラム書けない
あるところを作ろうとしてもそれがどういう作りなのか、調べるにしても何を調べればよいかが全くわからず、とりあえず書いてみることさえできない状況が続きすぎて萎えました。これは、はじめての言語で、しかも今まで触ったことがない開発用言語だったからわからないことが多すぎたということで言い訳させてください。
問題4：リーダーの仕事放棄
例えばですが、お互いの進捗を確認するだったりとか、1週間に1回以上会議の時間を取って報告会をするとか、そういうことをやりませんでした。というか、お互い寮生でいつでも話せるから大丈夫って後回しにしてました。実際話した回数はほぼ0に近いです。
問題5：お互いの役割確認
これはチャレキャラに参加していた他のチームの話なんですが、プログラムを書く人、ロゴなどの絵を描く人、プレゼンや広告をする人みたいな感じでがっつりわけてるところもありました。ここまでわけなくても、しっかりとお互いの役割を確認しておけなよかったと思いました。
ちなみに僕たちのチームは、最初は、両方ともプログラムを書く、僕が発表するみたいな感じだったんですが、最後は、くろねこくんがプログラムを書く、僕がロゴとか描いて発表するみたいになりました。おいおい変わってるぞ～？おっかしいな～～～？？
これらの原因
さて問題です。上の5つの問題のうち、根本的な原因となっているのはどれでしょーーか？？
答えは４と５です！
長くしてすみません。クイズっぽいのしたかったんです。
まあそれは置いときまして、最初のイベントのときに役割を決めておくことで、自分がやるべき仕事をより意識することができたと思うんです。そして、そのための勉強やった？とか進捗どう？とかちょくちょく聞いていれば、焦って夏休み何もしないなんてことにはならなかったと思うんです。
そのあともちょくちょく確認して、お互いにどこを作るかとかも決めて、わからないところは尋ね合いながら…みたいなことができたと思うんです。
そのためには？
プロジェクト管理ツールなどを使って、やりたいことを整理していればよかったのかな？と。そういうやらなきゃいけないことの可視化って重要だと思うんです(まあどれがいいとかは触ったことないのでわかりませんけど)。
あとは、お互いに話し合う場を設けるべきだと思います。そこで進捗や次に手をつけるとこについて色々話し合っていけば、やる気の向上にもつながるのかなー？と思います。
思うばっかでしたが、これらって必要なことだと思います。
まとめ
書きすぎて何言えば言いたいのかわからなくなってきましたが、まとめです。
チャレキャラのような開発イベントに参加した際、多人数のときはお互いの役割をしっかり決め、特にリーダー(まとめ役)の存在を決めておくこと！
リーダーが進捗の状況を整理・確認し、みんなで話し合う時間を作ること！
もうこんな感じでいいじゃないんでしょうか。はい、解散！！！
最後に宣伝
はい再集合！！
というわけでお知らせなんですが、最近よく絵を描いてまして。それで絵のお題を募集するためにお題箱を作ったんですね。
odaibako.net
ここまで読んでくれたやさしい方には、ぜひなにかお題をかいてもらえると嬉しいです！
お題箱の方にはジャンルフリーって書いてるんですけど、できればFGO関連かデレマス関連だとありがたいです。他のジャンルでわからないものだった場合はかなり遅くなる場合がありますのでよろしくお願いします。
というわけで、本当に終了！ここまで読んでくださり、本当にありがとうございました！！！
明日はあの宮野さんですからね！楽しみですね！０時待機してます！！
昨日の記事：本を読もう - 電柱のブログ
