Kai Hajimeのおすそわけ

子育てサラリーマンのInputとOutputをおすそわけ

HTML&CSS初心者の救世主!? 子どもでもレスポンシブルデザインのサイトが簡単に作れるアプリ

おはようございます。

今朝iPhoneで簡単にloop musicを作れるアプリがあると知り検索すると、とても興味深いアプリケーションを発見しました。まさに「瓢箪から駒」です。

 

f:id:kaihajime:20160422091018j:plain

 

 

Blocs Wave - Make & Record Music

Blocs Wave - Make & Record Music

  • Novation
  • ミュージック
  • ¥600

最初はこのアプリを探してたのですが、、、今回おすそわけしたいのはコレじゃないです。まあとりあえず、、、

通勤電車やちょっとした空き時間にピコピコといじれるアプリ。ちょっと高いけど面白そうなんでポチちゃいました。

 

本命はコレ!

で、何を見つけたかというとコチラです。上の音楽アプリと同じ名前で検索に引っかかったというわけで偶然見つけました。

 

blocsapp.com

 

これは初心者でも簡単にレスポンシブルデザインのサイトがが作れる「Blocs」というMac専用のアプリです。3日間の無料トライアルがあるそうなので早速この週末にチャレンジしてみようと思います。

 

HTMLとCSSを独学中ですが、理解できてるところもあれば、まだまだ始めたばかりでとても仕事ができるレベルではありません。

今の勉強方法を継続しつつこの「Blocs」で自分好みのサイトを作ってみて、作ったサイトがどんな風に作られているか参考にしたいと思います。

 

普通この手のアプリケーションで作られたコードはグチャグチャになることが多いそうですが、「Blocs」はそういうこともないということで勉強になると思います。

実際に「Blocs」でサイトを作ってみた方がレビューされているブログ記事があります。コチラです。

 

誰にでも手軽にレスポンシブデザインのサイトが作れてしまう時代。「HTMLやCSSはわからないけど、ウェブサイト作ってみたい」という方は試す価値ありです!

HTMLやCSS初心者でも綺麗なウェブサイトが作れる「Blocs」がスゴい - AIUEO Lab2

 参考にさせていただきます。akiueoさんありがとうございます。

 

Webデザインを仕事にするとなると、HTMLとCSSのスキルは必須です。しかし初心者がコードの構造などを学ぶのにお手本が必要だと思います。

ネットで好きなサイトのHTMLやCSSを見ることもできますが、実際に自分が作ったサイトのHTMLやCSSが見れるとなるとコレは非常に便利で面白いことだと思います。

週末はコレで1つサイトを作ってみようと思います。

 

読んでいただいた方へ

ありがとうございました。

 

Kai Hajime

 

=追記=

最初に紹介した音楽アプリのことを調べてみると、コチラのブログで使い方が紹介されています。僕も参考にさせてもらいます。

 

www.musirak.com

現状に満足しているサラリーマンは読むべからず! 孤独とは学びに不可欠な精神構造である

今日は最近読み始めた「孤独のチカラ・齋藤孝 著」を読んでグサッと刺さるところがありまくりなので、その一部を抜粋して「学びの質」についておすそわけしたいと思います。

 

f:id:kaihajime:20160421115905j:plain


僕は40歳を超えて脱サラを目指し、一日の中から何か一つでも成果をあげるために毎日試行錯誤しています。周囲からは「無謀な事はよせ」と言われていますが、死ぬ間際になって「やりたいことをやらずに終わった人生だった」と後悔したくないので往生際が悪いと言われようが構いません。しばらくは悪あがきしようと思っています。

タイトルにもしましたが、現状に満足している方、特にサラリーマンはこの本「孤独のチカラ」は読まなくて良いと思われます。

つるむ関係はいわば談合状態だ

『とりあえずいまのままの自分でいい』という安きに流れて、お互いに「いいよね」「いいよね」と入札価格を低く抑えたままで安心している。だが、自分に期待するものが大きい単独者であれば、談合して自分への入札価格を低くしてしまうことはなく、非常に高めの設定をするだろう。そうして高くしてしまった自分を落札するには、いまのままでいいわけがない。自分自身に大変な負担がかかっていくことになるが、力を伸ばすためには不可欠の精神構造だと私は思う。

 

いきなりグサッときました。

ウチの会社は福利厚生も充実していて、給料も賞与も超一流企業並みです。

安心してください、僕は例外です(約3分の1です)。

ウチは同じ正社員でも雇用形態によって表面的には見えない社内カーストが存在します。これについてはまたいつか、、、

待遇面ですでにお腹いっぱいの社員たちはこの「談合状態」に陥っています。全く同じ業務をこなし、談合状態の社員たち以上の成果をあげても評価は上がらない僕ら飢えた社員たちは、現状打破するために、虎視眈々とその機会を逃すものかと狙っています。しかし、カースト制なのでそう簡単には崩れません。組合を持ってしてでもです。

そうなると自ら力をつけて飛び出すことしか他に方法はないと僕は考えます。

自分に少し重めの負荷をかけ高く落札できるようになる必要があります。

 

単独者とは

著者は「単独者」を次のように言い表しています。


登山家はチームであっても単独者である。誰かが登らせてくれるわけではない。代わりに登ってくれるわけでもない。実際の山登りは、つら過ぎて私は苦手だが、精神の山登りはなぜか得意で、結構ひとりで歩いている。そこに、もしほかの人がいてくれればいいものだが、あくまで単独者同士がたまたま一緒に登っているという形でありたい。

 

つるむというネガティブな関係

著者は講師という立場で友達同士で授業を受ける学生たちに対し一斉に席替えをするそうです。

 

実際に友達同士がばらばらにされて、ひとりひとりが私と向き合ってみると、そこで初めてつるんで行動している時には得られなかった感覚がわかってくる。〈差し〉とも言うが、一対一での対話が重要なのだ。

 また

 群れて成功した人はいない。何かを勉強しよう、学ぼうというときには、まずは群れから離れて一人で立つ。これが基本姿勢だ。頭のよし悪しや、本をたくさん読んできたかどうかより、単独者になれるかどうかが問われる。

 

著者は「友達をつくるな!」と言っているわけではありません。

何かを学ぶのに孤独な単独者として学ぶのと、慣れ合いでつるんで学ぶのとでは「学びの質」に違いがあるといっています。慣れ合いでつるむことにあまり意味がないということです。

 

ふだんは仲がよくていい。だがそもそも学びの第一の構えは単独者であるということを理解してもらわなくてはいけない。

 

まとめ

僕は「脱サラ」するために必要なスキルを身につけるために勉強してしたり、考え方をアップデートするため、または知識を得たり情報収集のための読書を積極的に生活の中に取り入れています。この著者が語る「単独者」という立ち位置、気概は心に刺さりました。これからの自分の在り方の根幹となる考え方になると思います。

タイトルが「孤独のチカラ」とあり、なんだか暗い内容なのかという印象でしたが、全く違います。
一人、孤独になることが実は成長する過程でとても大切な時間であることが著者の経験を元に語られています。真面目に書いていると思われますが、真面目過ぎで真剣な文面から時折見える著者のユーモラスな一面が読んでいて楽しくなる一冊です。たまたま出会った一冊でしたが、久々に良い本に出会ったと思います。

 

学びの質を変えたいと思ってる方、学校や会社で周りになじめず一人でいること、孤独であること、対人関係で悩んでいる方は是非読んでみてください。

一人でいること、孤独であることがネガティブなことと考えがちですが、この本を読むと「孤独」についての考え方が変わってくると思います。

将来子どもたちが悩んだ時はこの本「孤独のチカラ」を薦めたいと思う良書です。

まだ途中ですが読みやすいボリュームなので、サッサと読んでまた感想を書きたいと思います。


読んでいただいた方へ
ありがとうございました。

 

Kai Hajime

 

 

孤独のチカラ (新潮文庫)

孤独のチカラ (新潮文庫)

 

  

孤独のチカラ [ 齋藤孝(教育学) ]
価格:464円(税込、送料無料)


 

スピード・省スペース! 場所を選ばないHTML・CSSの勉強法

f:id:kaihajime:20160408115714j:plain

書籍(HTML&CSSレッスンブック)での勉強がほぼ終わったところでProgateの中級編に登録しました。僕がProgateの入門編を始めた時は、入門編と応用編しか無かったのですが、いつの間にか「初級編・中級編・上級編」という構成になってました。しかも中級編からは有料に、、、ここは思い切って「月額¥980のプラスプラン」に登録しました。

prog-8.com

 

Progateで学ぶ2つのメリット

場所を選ばない

書籍だと荷物になりますし、開くスペースが必要です。外出時はその都度パソコンと本を開いてる時間がもったいなしスペースの確保も一手間。会社でも少ない休憩時間の無駄になります。

ProgateだとiPhoneでディザリングしてノートパソコンを開けばすぐに始めることができます。通勤電車の往復など、スキマ時間で学ぶにはProgateはスペースを気にせず学べます。

ちなみにわからないことは以下の「HTML・CSS早見表」サイトで調べています。辞書も持ち歩く必要はありません。右上にある検索スペースにわからない、知りたい用語などを入れて検索すれば最新のHTML5やCSS3に準拠した用語が出てきます。

 

www.htmq.com

 

わからないところを確実に学べる

書籍だと、どうしてもわからなかったり、ほんの少しのコード書き間違えがあっても先へ進めてしまいます。しかしProgateだと間違えると前に進めません。加えて自分の間違いがどこなのかを教えてくれる「ヒント」が適宜表示されます。的確なアドバイスをくれる講師がいるようなもんです。「どこが?どのように?」違うのかを自分の書いたコードから的確に学べるので、書籍のように「わからなかったら飛ばす」みたいなことも無く、一つずつステップアップできます。超初心者の自分はこの機能に本当にお世話になっています。

 

本を一冊分だと思えば高い買い物ではない

1ヶ月以内に終わればの話ですが、月額¥980でアドバイス付きの講義が受けれるなんて安いもんです。スクールに通うこと無く確実に学べるのであれば投資としては格安じゃないでしょうか?

ここは1ヶ月と言わず、気合を入れて少しでも早く終わらせましょう。

 

毎日少しづつやって理解が深まっていくと「早く自分でサイトを作りたい!」という先走る欲望にかられますが、グッと我慢して基本をしっかり固めようと思います。

 

読んでいただいた方へ

ありがとうございました。

 

Kai Hajime

 

 

HTML5&CSS3レッスンブック

HTML5&CSS3レッスンブック

 

 

まず一歩! HTML・CSSの勉強の備忘録・雑感

HTML・CSSの勉強を始めて今日で10日目です。

備忘録的に僕がやったことを書きたいと思います。

f:id:kaihajime:20160401080154j:plain

準備したもの

  • HTMLレッスンブック
  • HTMLデザインブック
  • できる大辞典 HTML&CSS

以上3点、とパソコンです。

まずは書籍から始めようと思い「HTMLデザインブック」をAmazonで購入したのですが、HTML・CSSに関しては全くの素人の自分には内容が合ってないことに気づき「HTMLレッスンブック」を改めてポチリ。

HTMLレッスンブック」のことを調べていると「Progate」というHTML・CSSの勉強がブラウザだけでできるWebサービスの存在を知り、書籍で学ぶ前に「Progate」で始めることにしました。この「Progate」で入門して良かったと後々気づくことになります。

 

kaihajime.hatenablog.com

 

Progateで始めて良かったこと

Progate → 書籍の順でやった感想ですが、全くの素人が書籍で一から学ぶとなると「これわかりにくいな〜」と感じることがありました。

 

入門編でもボリュームがあり、今はいらない!ということも有

書籍だと序盤からブラウザの仕様やレンダリングエンジンがどうだみたいな、いい意味でも悪い意味でも「丁寧に細かく」情報があり過ぎです。テキストエディターの準備やサーバーのことまで書かれています。重要なことですが、サーバーなんて後からでもなんとでもなります。テキストエディターもネットで検索すれば自分の環境に合ったモノはすぐ出てきます。今から始めようという時に「後からでも済むこと」は出来るだけ排除したいところ。

 

やっていること(書いたコード)が正解かどうかの判断が難しい

Progate」だと書いたコードが間違っていたら先へ進めません。正解するまでヒントをみたりHTML・CSSの辞書で調べたり、ネットで調べたりしながら進めました。時にはギブアップで答えを見たりしながら。書籍でもいろいろ調べながらできると思いますが、最終的に次のスッテプに進むにはProgate」の中の先生がOKというまで進めません。この先生がいるというのは初心者にとってかなり重要で助けにもなります。

スタートもアカウント登録するだけです。途中で作業を止めても再度始めるときは止めたところから始めることができます。これ以外と便利です。

 

今後の勉強の進め方

今日で10日目、現在Progate」の基礎編を2周(2周目は復習のつもりで)と「HTMLレッスンブック」が「CHAPTER 3」まで終了。

残り本が3CHAPTERなので3日間(1日1CHAPTER)とProgate」応用編を一日でやるとして合計4日間で一区切りつきます。その後4月の上旬末までには「HTMLデザインブック」へ進んで右往左往してる感じが良いかなと思います。

 

素直に楽しんでる!

サクサクとはいきません。だけど少し慣れると「ここはこんな感じに変えても良いんでない?」という具合にコードを書き換えたり、値を変えてみたり。色々試してみて思ったように表示されるとメチャメチャ達成感あります。まだまだスタートしたばかりで試行錯誤の連続ですが面白いから全然苦になりません。

 

補足というか疑問点

Progate」と「書籍」では多少違う点があります。CSSで「.」ドットや「;」セミコロンを入れたり、入れなかったり、、、一応どちらのパターンも試してみて、念の為入れる方でコードを書くようにしてますが、HTML・CSSのバージョン的な問題でしょうか?

まあ細かいことは後から修正するとして、ここは駒を先に進めることに集中します。

おすすめのテキストエディター

僕は入力補助がついたフリーソフトの「Atom」を使っています。コードを書くと次に予想されるコードの候補が小窓に出てきます。「初心者のウチはコードは全て打ったほうがイイかな?」と思いましたが、ここはスピード重視です。どっちみち間違った時など手打ちしているので良しとします。

 

atom.io

 

コチラのブログで詳しい使い方が載ってます。僕も参考にさせていただいています。

この場を借りてありがとうございます。

blog.codecamp.jp

 

とにかく毎日少しでも書く! ということで

 

読んでいただいた方へ

ありがとうございました。

 

Kai Hajime

 

 

HTML5&CSS3レッスンブック

HTML5&CSS3レッスンブック

 

 

HTML5&CSS3デザインブック (ステップバイステップ形式でマスターできる)

HTML5&CSS3デザインブック (ステップバイステップ形式でマスターできる)

 

 

 

できる大事典 HTML & CSS

できる大事典 HTML & CSS

 

 

 

 

 

ヤル気とネットがあれば、本がなくても勉強はできる!

やってしまいました。

意気込んでwebデザインの勉強を始めようと思って教科書として買った本が、今の自分には少々早かったみたいです。

 

kaihajime.hatenablog.com

 

早速調べ直して今の自分にあったモノをAmazonで購入。

HTMLやCSSの基礎もわかってない自分にはこっちが先でした。

 

HTML5&CSS3レッスンブック

HTML5&CSS3レッスンブック

 

 届いたら再度仕切り直して取り掛かろうと思いましたが

「ヤル気が盛り下がらないうちに少しでもやりたい!」

じっと待ってて失速するのもなんだかな〜

と思い、以前から頭の片隅にあった「あること」ふと思い出したのでちょっと調べてみました。

 

Progate(プロゲート)

ブラウザーだけでHTMLやCSSの勉強ができるサイトです。もちろん無料です。

このサービスに辿り着いたのは、いつも拝見しているブログ「俺の食べログ」さんが記事のなかでオススメされていたからです。

僕が間違って購入した本のことを調べていると、「俺の食べログ」さんも同じ本で勉強されていました。と同時にProgate」のことも書かれていたので「コレだ!」と思い早速登録しました。

 

www.2dgod.com

 

やってみた感想としてHTMLやCSSのことを全く理解してない自分でも出来ると思えるWebサービスです。用語の説明やその意味、使用方法も初心者にもわかるよう丁寧に教えてくれます。

prog-8.com

 

もう一つ同じようなサービスがあります

dotinstall.com

 

コチラもProgate」同様、HTMLやCSSをブラウザのみで学べるWebサービスです。

そのうちチャレンジしてみようと思います。

 

鉄は熱いうちに打て

ということで意気消沈しない内にやっちゃいましょう。

 

読んでいただいた方へ

ありがとうございました。

 

Kai Hajime

 

 

HTML5&CSS3レッスンブック

HTML5&CSS3レッスンブック

 
HTML5 & CSS3レッスンブック [ エ・...

HTML5 & CSS3レッスンブック [ エ・...
価格:2,592円(税込、送料込)