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

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

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

f:id:wp-lesson:20170213135851g:plain
 
最新記事のサムネイルが2列(2カラム)で表示される
テンプレートをカスタマイズして、3列(3カラム)に
なるようにスタイルシートを追加しました。
 
2カラムのレイアウトでは、
1つ1つのサムネイルが、50%ずつの表示幅を持つよう
スタイルシートが記述されています。
 
ですから、3カラムに変更しようと思ったら、
1つ1つのサムネイルの表示幅が33.33%になるような
スタイルシートを追加すればいいんですね。
 
しかし、それだけでは足りません。
 
2カラムの場合は、左の列(奇数番目のサムネイル)で
次の行へ折り返すように、横並びを解除するスタイルが
入っています。
 
ですから、3カラムに変更しようと思ったら、
奇数番目のサムネイルの横並びを「解除しない」
スタイルを追加する必要があります。
 
その上で、1番左の列(3の倍数+1番目のサムネイル)に
横並びを解除するスタイルを追加します。
 
どんなスタイルシートが設定されているのかを見る方法と、
それを読み取るスキルを学んでおけば、
 
「じゃあ、このスタイルを打ち消して・・・」
「このスタイルを追加すればいいだろう・・」

 
という予想を立てて、自分で考えながら自由にカスタマイズ
していくことが可能になります。
 
『やり方』を知るのではなく、『考え方/筋道の立て方』を
理解できるようになることがレッスンの目的です。

 
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