img画像下余白をCSS flexboxで消去する知識

ホームページ制作講座のブログ記事として今回は、イメージ画像したの空白を編集する方法に関してCSS3のレイアウトモジュールflexboxで消去についてレポートしてみました。わりと初歩的な知識や基本情報に関して記事にすることが多いです。

《ホームページ制作講座の手順の流れ1》
まずはじめに、CSSセレクタ指定します。

余白が出ているimgタグの親要素タグにCSSセレクタを指定
ここではclass=""del_img_pad""と指定してみましょう。

《ホームページ制作講座の手順の流れ2》
次の流れとしては、確認用の背景色指定します。

imgタグの余白をわかりやすくするために親タグのセレクタに背景色赤を指定
.del_img_pad{
background:red;}という操作をしていきます。

《ホームページ制作講座の手順の流れ3》
さいごに、表示確認と背景色の消去します。

さらにCSSプロパティと値をvertical-align: bottom;で指定し表示確認後、余白が消えていたらbackground:redを削除
.del_img_pad{
background:red;
vertical-align: bottom;}という流れでこの記事の説明は終了です。

このホームページ制作講座の記事に関しては注意点があります。ブラウザのバグによる余白の隙間がでるのでfont-size:0でも対処可能だが他のフォント表示に影響等があるためvertical-align: bottom;での設定を推奨という点については認識しておいたほうがよいでしょう。

％、em、remについて-CSS プロパティ値における違いを理解するWeb制作講座

今回のホームページ制作講座ではCSS(カスケードスタイルシート)でパーセントやemまたはrem指定において、それぞれの相違点する一連の流れについてプロパティ値における違いを理解することに関して解説しています。

[第1の解説]
まずは、％(パーセント)について

親タグ要素のフォントサイズを相対的に参照。指定がない場合はデフォルトで16px＝100％でサイズ指定となります。

[第2の工程]
次に、em(エム)について

文字の高さを1emとして親タグ要素のフォントサイズを相対的に参照。％とほぼ同義でデフォルトでは16px＝1emでサイズ指定となります。

[第3の工程]
最終に、rem(root em)について

CSS3から実装された値で絶対的にrootタグであるhtmlの指定していされた値を参照。デフォルトでは16px＝1remでサイズ指定となります。

この解説記事について補足したい点がありますが、それはemやremは小数点以下が換算しずらくなるので、参照親要素の指定値を62.5%とすることで1em=10pxなどに暗算しやすくなるが、煩雑になるだけなのであまり推奨できない点に関しては留意しておいた方がよいでしょう。

WordPressでテーマ導入する際に抑えておきたいこととポイント

今回のホームページ制作講座ではオープンソースCMSのワードプレスの有料・無料のテンプレートを利用する際に注意すべきポイントについてに関して説明しています。

第1の注意ポイントはデザインとテーマのマッチングです。

イメージするWebサイトのデザインイメージと導入したいテーマファイルのレイアウトやデザイントーンが似ていること。大きくレイアウトなどが違っていると編集にとても手間がかかる事が挙げられます。

 

第2の注意ポイントは情報配置とテーマの構造です。

コンテンツの情報配置のレイアウトとテーマファイルのデザインがあまり異なっていると、内部のレイアウト編集やコーディングによっては、レイアウト崩れやデザイン崩れの原因になる事が挙げられます。

 

 

第3の注意ポイントとしては、機能仕様とテーマ特長です。

WordPressはプラグインなどを利用することで様々な追加機能を実装することができますが、反面テーマファイルのカスタマイズが必要になります。有料のテーマテンプレートには、JavaScriptやPHPで簡易的なプログラムが組み込まれているので、カスタマイズにとても費用や時間がかかる場合がある事が挙げられます。

そのほかの注意ポイントについては、見た目がかっこいい手頃な価格の有償テーマ購入後、編集やカスタマイズができなくなる場合があり、結局余計な費用がかかる場合がある事に関しては留意しておいた方がよいでしょう。