2017-03-10

【FullCalendarでイベントをポップアップ】

f:id:wp-lesson:20170209232936j:plain

某Web学習サービスのフロントコーディング。
大きな山場を超えて明日、納品予定です。
　
BootstrapをCSSのグリッドシステムだけでなく、
アイコン（ウェブフォント）やナビゲーション、
スライダー、モーダルなど各種コンポーネントを
ふんだんに活用したサイト構築でした。
　
たぶん今までの案件で一番精密さを求められる
仕事でした。
　
フォントサイズや余白を 0.001vw 単位で調整。
細かい作業が苦にならない性格で良かった。
　
今回の仕事で使った便利なプラグインを１つ
ご紹介します。
　
Full Calendar です。
　
jQuery本体とプラグインのjsを読み込んで、
好きなHTML要素をセレクタとして、
　
$('#calendar').fullCalendar({options});
//optionsには任意で起動オプションを指定
　
とするだけで、指定の場所にカレンダーが
表示されます。
　
↓オプションやコールバックの一覧と説明　
https://fullcalendar.io/docs/
　
jQueryを道具として、いろんなオブジェクトや
メソッドを知り、組み込んで体験して習得する。
　
プログラミングって本当に楽しいです。
　
知らなかったことがわかるようになったり、
どうやったらいいか見当もつかなかった問題を
乗り越える糸口に気付けたり、
　
知ってることを総動員して未知を既知に
塗り替えていくのは本当に楽しい。

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

2017-03-09

【高機能なイベントカレンダープラグイン】

サイト制作実務の話

仕事で出会った便利なカレンダープラグインをご紹介します。

日別にイベントを挿入できるjQueryのカレンダーです。

ビューや日付のレンダリング完了イベント（コールバック関数）が
用意されているので、動的にカレンダーの中身を書き換え可能です。

イベントデータを外部ファイルにして読み込んだり、
システムを構築するのにも使える秀逸な無料プラグインです。

↓Full Calendar 公式サイト
fullcalendar.io

2017-03-09

【出版とプレゼントのお知らせ｜WordPressのツボとコツ】

書籍

f:id:wp-lesson:20170309000131j:plain
お待たせしました。WordPressの本がいよいよ発売です。
　
『WordPressのツボとコツがゼッタイにわかる本』
出版社：秀和システム　定価：２４００円（税別）
　
約３８０ページの大ボリュームです。
　
全国の書店には来週ぐらいに並ぶと思います。
Amazonなら今すぐご予約いただけます。
プレゼントもご用意しております。
　
↓出版記念プレゼントのお受け取り方法
https://goo.gl/forms/XMI3KzsAzSWxnNPx2
　
　
＜こんな方にオススメ＞
WordPressをしっかり理解して、行き詰まりを
自分で解決できるための基礎を身に付けたい方。
　
前著「ホームページ作成のツボとコツ」で自習を
終えていただいた方にピッタリです。
　
↓WordPressに進む前にこの１冊
http://amzn.to/2bXJkbs
　
　
ぜひ、お役立てください。

2017-03-08

【チェックボックスの状態は prop ？ attr ？】

コーディングテクニック

jQueryでチェック状態に応じて処理を分けたいとき
　
$.prop("checked")
$.is(":checked")
$.attr("checked")
　
どっちだったか迷ったときの道しるべ。
http://taneppa.net/jquery-prop/
　
要するに、attr() はDOMの属性にアクセスするもの。
だから、DOMが変化しないchecked属性を attr()
しても意味がないということですね。
　
コードの意味を明確にするなら、
$.is(":checked")
がいいかなと思います。
　
「チェックされているかどうかを調べてますよ」
　
という意図が一目で伝わるからです。
　

2017-03-07

【吹き出しの先端を中央寄せするCSS】

コーディングテクニック

f:id:wp-lesson:20170207145310j:plain

画像でもCSSでもどちらでも可能ですが、
吹き出しなどの先端を中央寄せする方法。
　

<親要素>
  <子要素>
  </子要素>
</親要素>

　
のように、吹き出しの枠に相当するボタンなどを
親要素とし、その内側に子要素を配置して先端を
表示するタグの役目を負わせます。
　
親要素の位置を基準として子要素の位置を
指定できるようにするために、
親要素にはposition:static以外を指定し、
子要素にはposition:absoluteを指定します。
　
子要素の存在が、親要素内の他のテキスト等の
適切な配置を邪魔しないように、子要素自身の
配置は text-align でもなく margin の左右 auto
でもなく、position:absolute で指定します。
　
この場合、left: 50% でいったん親要素の左端から
半分の位置まで子要素を移動させ、子要素の横幅
のちょうど半分だけ左へ引き戻してあげれば、
理屈上も正確な中央寄せになります。
　
吹き出しの先端が横幅16pxの場合だと、

position: asbolute;
left: 50%;
margin-left: -8px;

　
とすればOKです。
　
ただしこの方法は、中央寄せする子要素の横幅に
依存します。レスポンシブで、PCとスマホとで
アイコン等の大きさが異なる場合、margin-leftを
メディアクエリで分岐させるなどいちいち注意を
払わねばなりません。
　
そこでCSS3の transform を使います。
　

position: asbolute;
left: 50%;
transform: translateX(-50%);

　
translateは、指定した要素自身のサイズを100%
とする移動を表すので、吹き出し先端の大きさに
関係なく常に吹き出し先端の横幅の半分だけ左に
移動してくれます。
　
任意のボックスの上下左右中央（ド真ん中）に
配置したいときは、親要素にposition:static以外を
指定した上で、子要素に以下を指定します。
　

position: asbolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

　
CSSデザインにおいて、position プロパティや
margin, padding などボックスモデルの概念は
photoshopなど画像ソフトで必須の「レイヤー」
と同じくらい重要です。

Webサイト専門プログラマの言いたい放題

元システムエンジニアがサイト制作とプログラミングについて好き放題しゃべります。

【FullCalendarでイベントをポップアップ】

【高機能なイベントカレンダープラグイン】

【出版とプレゼントのお知らせ｜WordPressのツボとコツ】

【チェックボックスの状態は prop ？ attr ？】

【吹き出しの先端を中央寄せするCSS】