まず軽く自己紹介を、、、
私は2016/04までは一切プログラミングに触れたことがなく、パソコンもどちらかと言えば苦手な分野です。
しかし、この4月から仕事でプログラミングを扱うこととなりました。
そんな私がこれからの投稿では自戒の念を込めて現状のアウトプットなど、つらつらと書いていきたいと思います。
現在までの1か月
今までに取り組んできたことを列挙していきます。
それぞれにかかった時間は定かではないですが、どれも1日前後で終わったような気が
ネットサービス
ドットインストール (http://dotinstall.com/)
- html入門
- css入門
- PHP入門
→ ひとつ3分前後の動画が15本ほどあります。
どの事項もまんべんなく教えるので、初学者にはどこが基礎でどこが応用かといった判断がつきにくい。
動画も短く流しっぱなしに出来るのは良かった。
progate (https://prog-8.com/)
- HTML&css 初級編
- PHP 基礎編
→ 数枚のスライドの後、その知識を使ったコードを打ち込む。
すべてを丁寧に打たなければならないので、細かな点を意識するが出来た。
無料では利用できるコースが限られるのが痛いかな
sololearn (http://www.sololearn.com/)
- PHP
→ 英語サイトだが英語が簡単で、そのスライドのまとめの1文も記述してあり読みやすい。
PHPを全く知らない状態だと、いくら英語が簡単とはいえ把握しにくい場所もあった。PHPでなくても他の言語を知っていれば感覚的にわかるのかも。
codeprep (http://codeprep.jp/)
- はじめてのHTML
- はじめてのCSS
→ ヒントスライドが常にあり穴埋めでコードを打ち込むタイプなので、サクサク進んでしまう。
コードがウィンドウ上でどう動作するかを見ながら進めれるので、どのような構造になっているかが大まかに把握できる。ただ良く分からないうちに終わることも・・・
書籍
- HTML5&CSS3辞典 第2版 (株式会社アンク) → タイトル通りhtmやcssについて網羅的に抑えてはいるが、ただの紹介にすぎない。
- Gitが、おもしろいほどわかる基本の使い方33 (大串 肇) → sourcetreeを使いコマンドを打ち込むことなく、gitを使うことを教えてくれた。linuxに非対応だが大枠を掴むといったら最初の1冊なのか。
実技
既存の擬似サイトを２つ作成。(各々1週間ほど)
PHPで年月指定移動可能なカレンダーの作成。(3日)
最近の学習内容
既存の擬似サイトを作成中(4日目)。 今までとは一味も二味も違う・・・
html・css → php → html・cssと交互にしたので感覚的には分かっていない為か、取り掛かり初めはなかなかの忘却っぷりであった。
今までの擬似サイトでは無かった新事項
レスポンシブの登場 → 今まで作ったサイトはレスポンシブではなかった。
サイトの1から構造を考えること → 今まではbodyのheaderやfooter部分は記述していなかった。
困った点
margin: 0 auto;・text-align: center;
どちらも真ん中に寄る、といった漠然とした考えしか持っていなかったので違いがよく分かっていなかった。margin: 0 auto;はそれ自体を、text-align: center;はその子要素を中央に揃えるものだと分かった。ただし、widthが既知でありブロック要素に限られる。
favicon
以前作成したサイトと同じサーバーに接続していたために、そのサイトのfaviconが表示されていた。head要素の中をいじってもfaviconが消えないので不思議だった。だがなんてことはない。キャッシュとして残っていたのだから、新たに画像を指定することで解消された。
float・position
floatやpositionを付けた子要素の親要素にmarginやpaddingをかけても、言うことを聞いて動いてくれないことが半日に1回くらいあった。それは親要素にwidthやheightが0と認識されているからだ。親要素に.clearfixかoverflow:hidden;を適用すればいいんですよね。
あーこのミスは散々やり過ぎて自分に腹が立ってくる・・・
擬似要素
:hoverは今までopacityや単なるcolorの変化しかしてこなかったので、ゆっくり変化することはどうしたら良いのかから始まった。思い通りの動きには時間がかかるが、transition要素を通常時とhover時の両方につけることで現れる・消えるの動作が別々に指定できると分かった。
セレクタ
「>」セレクタを用いて指定した場合に直下の子要素のみではなく、孫要素にも適用されてしまった。何となく使ってはいたが、継承という概念があり、そのために孫要素にも適用されていたのであった。ただし継承する要素と継承しない要素がある。
これから
レスポンシブを作る事で、レイアウトやアニメーションを付けることが必要となるのでJavaScriptやwordpressが分かればもっと出来る幅が広がるんだなと思う。そこの知識を早く入れてしまわないと