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

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

【全ブラウザ対応 CSS3で作る「流れるテキスト」】

コーディングテクニック

HTML4にあった「marquee」タグを使うと、タグの中に書いたテキストを
右から左へ自動でスクロールさせることができます。

ホームページの「新着情報」などによく使われていますね。

しかし、「marquee」タグは元々、IE（インターネットエクスプローラー）独自のタグ。
そのため、現在のHTML5では非推奨とされており、将来的に廃止されるかも知れません。

そこで、CSS3のアニメーションの仕組みを応用すれば「marquee」タグと同様のことが
実現できます。

on-ze.com

【ECサイトの送料ルール変更プログラム】

サイト制作実務の話

f:id:wp-lesson:20170214170505j:plain
某スイーツショップのECサイトで
複数エリアへの配送に対応するように
プログラムをカスタマイズしています。
　
プログラムは考え方１つ間違えると
どこかで必ず不具合が起こるので、
通常のパターンだけ動作確認してOKでも
安心できません。
　
プログラムが想定通りに動くことを
確かめるために、組み合わせパターンを
洗い出してテストケースを作成します。
　
そしてテスト結果（画面コピー）を
きちんと残して納品します。
　
プログラム自体は、筋道さえ考え付けば
あとは使う言語に沿った文法に置き換える
だけですが、むしろテストのパターンを
漏れなく正確に洗い出して実施するほうが
時間がかかります。
　
プログラムを書くスキルだけでなく、
品質を保証するためのテストパターンを
作成するスキルも大事です。

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

【2カラムを3カラムに変更するカスタマイズ】

WordPress/プログラミングレッスン

f:id:wp-lesson:20170213135851g:plain
　
最新記事のサムネイルが２列（２カラム）で表示される
テンプレートをカスタマイズして、３列（３カラム）に
なるようにスタイルシートを追加しました。
　
２カラムのレイアウトでは、
１つ１つのサムネイルが、50％ずつの表示幅を持つよう
スタイルシートが記述されています。
　
ですから、３カラムに変更しようと思ったら、
１つ１つのサムネイルの表示幅が33.33％になるような
スタイルシートを追加すればいいんですね。
　
しかし、それだけでは足りません。
　
２カラムの場合は、左の列（奇数番目のサムネイル）で
次の行へ折り返すように、横並びを解除するスタイルが
入っています。
　
ですから、３カラムに変更しようと思ったら、
奇数番目のサムネイルの横並びを「解除しない」
スタイルを追加する必要があります。
　
その上で、１番左の列（３の倍数＋１番目のサムネイル）に
横並びを解除するスタイルを追加します。
　
どんなスタイルシートが設定されているのかを見る方法と、
それを読み取るスキルを学んでおけば、
　
「じゃあ、このスタイルを打ち消して・・・」
「このスタイルを追加すればいいだろう・・」
　
という予想を立てて、自分で考えながら自由にカスタマイズ
していくことが可能になります。
　
『やり方』を知るのではなく、『考え方/筋道の立て方』を
理解できるようになることがレッスンの目的です。
　
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

【データベースの見方を知っておく理由】

WordPress/プログラミングレッスン

f:id:wp-lesson:20170211152507p:plain
今日は生徒さんからワードプレスのページで
不具合があるとご連絡をいただきました。
　
とあるプラグインを入れたあと、
プログラムが正しく動かなくなったのです。
　
でも、そのプラグインを停止しても症状は
変わらないので、何が原因なのかわからない
状態でした。
　
１．自分が書いたプログラムの間違い
２．プラグインの不具合
３．データが壊れている
　
原因を大別するとこのどれかになりますが、
もし「３」なら、いくら「１」や「２」を
調べても時間のムダになります。
　
そこでレッスンでは、サーバーの管理画面から
データベースソフトにログインして、
ワードプレスの記事やカテゴリーのデータが
正しく紐づいているのかどうかを確認しました。
　
その結果、「３」は原因ではないことが判明し、
「２」が原因ということがわかりました。
　
このように、正しく動かないときは原因を的確に
絞り込めるかどうかが解決のカギとなります。
　
　
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