【コーダーに求められるスキル】

スマホユーザー層を取り込むために、
Webのアプリやシステムのフロントを
レスポンシブにする需要が多い模様。
　
必然的に、スマホでの操作に反応して
スライドやメニューを動かす「動作」を
組み込むことも求められています。
　
かつての、デザイン通りの「静止画面」
を作るコーディングから、
　
スクリプトを組んだりライブラリを
活用できるコーディングへと、
　
コーダーに求められるスキルも変わって
きているように感じます。
　
また、
　
バックエンドにサーバー側のシステムが
存在するアプリでは、コーダーが作った
HTML等をサーバー側のエンジニアが
書き換えてデータベースと連動させるので、
　
コーダーも、自分の仕事の成果物が後工程で
どのような技術でどのように加工されるのか
「私は知りません」では済みません。
　
デザインを忠実にコードで再現できるのは
当然として、機能的な要件も考慮しながら
ファイルの分け方やコードの適切な構造を
決めていくことができる人。
　
そういうコーダーが求められていることを
強く感じます。
　
　
P.S.
　
添付はデザイナーさんとやり取りするため
デザインをA3印刷し、フォント名やカラー、
画像をどのように切り出すかという仕様を
決めているところです。
　
JPGにした静止画像だけ渡されても
コーディングできませんからね。
　
photoshopで使ってあるフォントが
Webで使えない特殊なフォントだったり、
マウスオーバーしたときの配色とか、
ヒアリングしないと出てこない情報が
結構あるんです。

【CSSはセレクタを先に書いてしまうのがポイント】

HTMLでタグを構造化したあと、
その構造を外側から内側に向かって過不足なく
辿りながら、CSSのセレクタを書き出します。
　
そうすると、
　
「あ！ここもスタイル付けなきゃ！」
「えっと、ここはどういうセレクタがいいかな？」
　
とか、行き当たりバッタリに悩む時間を
劇的に減らすことができます。
　
HTMLの構造に沿って書くから、
あとで自分で見ても他人が見ても分かりやすい
綺麗な（＝保守性が高い）コードになります。
　
このセレクタだけ書き並べたものを、
ディベロッパーツールの編集欄に貼り付けると、
ディベロッパーツールを開いたまま
HTMLの階層を１つ選択してはCSSを入れ、
次のタグを選択してはCSSを入れ・・・
　
というように、流れ作業的にホームページの
見栄えを組み立てていくことができます。
　
このやり方が非常に便利なので、
レッスンを受けていただいた方にも
なるべくお教えするようにしています。

CODEMYのマンツーマンレッスンでは、
HTML5やCSS3を基礎からしっかり学びたい方のために、
コース学習の中でカリキュラムをご提案致します。
　
▼無料相談をお気軽にご利用ください。
http://codemy-lesson.office-ing.net/contact
　
━━━━━━━━━━━━━━━━━━
講師が執筆した本が発売されました
━━━━━━━━━━━━━━━━━━
　
『ホームページ作成のツボとコツがゼッタイにわかる本』
定価： 2,400円（税別）出版社：秀和システム
　
▼Amazon購入ページはこちら
http://amzn.to/2bXJkbs
　
━━━━━━━━━━━━━━━━━━
CODEMYのオンラインレッスン
━━━━━━━━━━━━━━━━━━
　
【1】自宅でマンツーマンレッスン
http://codemy-lesson.office-ing.net/
知りたいことだけ学べる個人レッスンです。
　
【2】動画と個別添削のプログラミング講座
http://bit.ly/2h7ZeRJ
HTML/CSS/JavaScriptの基本が身に付くレッスンです。
↓動画講座を無料体験してください
http://bit.ly/2hw7mIy

【ツールチップ連動＆レスポンシブなプログレスバー】

達成率を表すとき使われるプログレスバー。
バーの表示原理は意外とシンプルです。
　
・背景色の違う２枚のボックスを重ねる
・手前のボックスに style="width:80%;" のように
　横幅をパーセントで指定する
　
これだけです。
バーの幅をCSSファイルに記述しないのは、
パーセンテージを変更する際にHTMLを動的に
書き換える必要があるためです。
　
ちょっと工夫したのは進捗率の数字と
平均点を表すツールチップの表示位置が、
進捗率の数値に応じて自動的に最適化される
という仕組み。
　
レスポンシブなので、画面サイズが変わると
位置を再計算しなければなりません。
　
進捗率とツールチップの座標を再計算する
関数を作り、loadイベントとresizeイベントが
発生したときに関数を呼び出すように仕込む。
　
肩がこります・・・

【WordPressにヘッダー画像を組み込もう】

苦労して探してやっと見つけたテンプレート。
でもヘッダー画像が入る場所がありません。
　
WordPressのテンプレートを探していて、
希望通りのパーツが全部揃ったものが見つかる
ことはまずありません。
　
オリジナリティを求めれば求めるほど、
テンプレートという「型が決まったもの」とは
かけ離れていくからです。
　
少しヤル気を出してHTMLとCSSを学びさえすれば、
テンプレートに付いていないパーツを、
好きな場所に好きなレイアウトで組み込むことが
できるんです。
　
今日のレッスンでは、PCとスマホで配置が換わる
レスポンシブなヘッダー画像をテンプレートに
追加しました。
　
「テンプレートって触るのが怖い」
「どこをどう変えたらいいのか分からない」
　
それはどのページにどのテンプレートが使われて、
どのパーツがどのタグに対応しているのかという
着眼点を知らないからそう感じるだけなのです。
　
特定のテンプレートで、特定のカスタマイズをする
具体的なやり方を説明しているサイトや本はありますが、
　
あなたが選んだテンプレートで、あなたが思うような
カスタマイズをするための具体的な方法なんて、
ネットや本には絶対に載っていません。
　
それが自分でできるようになるためには、
　
例えば
　
どのテンプレートファイルが該当するのかを
確かめるには、どこに目を付ければいいのか？
　
といった着眼点を知ることが大切です。
　
　
CODEMYのマンツーマンレッスンでは、
HTML5やCSS3を基礎からしっかり学びたい方のために、
コース学習の中でカリキュラムをご提案致します。
　
▼無料相談をお気軽にご利用ください。
http://codemy-lesson.office-ing.net/contact
　
━━━━━━━━━━━━━━━━━━
講師が執筆した本が発売されました
━━━━━━━━━━━━━━━━━━
　
『ホームページ作成のツボとコツがゼッタイにわかる本』
定価： 2,400円（税別）出版社：秀和システム
　
▼Amazon購入ページはこちら
http://amzn.to/2bXJkbs
　
━━━━━━━━━━━━━━━━━━
CODEMYのオンラインレッスン
━━━━━━━━━━━━━━━━━━
　
【1】自宅でマンツーマンレッスン
http://codemy-lesson.office-ing.net/
知りたいことだけ学べる個人レッスンです。
　
【2】動画と個別添削のプログラミング講座
http://bit.ly/2h7ZeRJ
HTML/CSS/JavaScriptの基本が身に付くレッスンです。
↓動画講座を無料体験してください
http://bit.ly/2hw7mIy

【CSSで繰り返しブロックの余白設定に使えるセレクタ「+」】

こんなページがあったとします。
　

＝＝＝＝＝＝＝＝＝＝＝＝＝＝
ヘッダー
＝＝＝＝＝＝＝＝＝＝＝＝＝＝
<section>ブロックA</section>
＝＝＝＝＝＝＝＝＝＝＝＝＝＝　←ここ
<section>ブロックB</section>
＝＝＝＝＝＝＝＝＝＝＝＝＝＝　←ここ
<section>ブロックC</section>
＝＝＝＝＝＝＝＝＝＝＝＝＝＝　←ここ
<section>ブロックD</section>
＝＝＝＝＝＝＝＝＝＝＝＝＝＝

「ここ」の３箇所だけCSSで余白を空けたい場合、
３通りの考え方があると思います。
　
＜方針１＞
A～D全部に上側の余白を設定し、Aのみ解除する。
　
section { margin-top: 30px; }
section:first-child { margin-top: 0; }
　
＜方針２＞
A～Dのうち最初のブロック以外に余白を設定する。
　
section:not(:first-child) { margin-top: 30px; }
　
＜方針３＞
同じブロックが連続した場合のみ余白を設定する。
　
section+section { margin-top: 30px; }
　
【解説】
どれも結果は同じです。
　
１は疑似クラス「:first-child」を利用して、
最初のブロックのみ余白の設定を解除しています。
　
２は１と同じことを疑似クラスの「:not」を使って
コンパクトに記述したものです。
　
「:first-child ではないもの」という意味ですね。
　
３は隣接セレクタ「+」を使って、
直前のsectionタグに続く次のsectionタグだけに
余白を設定するという考え方で、
最初のブロックだけはこのルールに該当しないので、
２つ目以降のブロックにだけ余白が設定されます。
　
　
CODEMYのマンツーマンレッスンでは、
HTML5やCSS3を基礎からしっかり学びたい方のために、
コース学習の中でカリキュラムをご提案致します。
　
▼無料相談をお気軽にご利用ください。
http://codemy-lesson.office-ing.net/contact
　
━━━━━━━━━━━━━━━━━━
講師が執筆した本が発売されました
━━━━━━━━━━━━━━━━━━
　
『ホームページ作成のツボとコツがゼッタイにわかる本』
定価： 2,400円（税別）出版社：秀和システム
　
▼Amazon購入ページはこちら
http://amzn.to/2bXJkbs
　
━━━━━━━━━━━━━━━━━━
CODEMYのオンラインレッスン
━━━━━━━━━━━━━━━━━━
　
【1】自宅でマンツーマンレッスン
http://codemy-lesson.office-ing.net/
知りたいことだけ学べる個人レッスンです。
　
【2】動画と個別添削のプログラミング講座
http://bit.ly/2h7ZeRJ
HTML/CSS/JavaScriptの基本が身に付くレッスンです。
↓動画講座を無料体験してください
http://bit.ly/2hw7mIy