％、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で簡易的なプログラムが組み込まれているので、カスタマイズにとても費用や時間がかかる場合がある事が挙げられます。

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

パソコンにiPhone 画像を利用して取り込む操作してみましょう。

今回のホームページ制作講座ではPCを保存する一連の流れについてアイフォンの写真画像データで取り込む操作に関して説明しています。

[第1の工程]

ここではiPhoneをパソコンに接続を使用して、データ通信が可能なUSBケーブルでiPhoneとパソコンを接続してみます。

 

[第2の工程]

次工程では画像のインポートにて、パソコンからエクスプローラーを開きiPhoneを右クリックして『画像とビデオのインポート』をクリックという作業を行います。

[第3の工程]

最終工程として、画像の保存にて、ダイアログが表示されるので、画像をすべて保存する場合は『すべての新しい項目のインポート』、日付やファイルタイプにより自動的にフォルダ分けしたい場合は『インポートする項目を確認、整理、グループ化する』を選択という工程でこの講座内容は完了します。

この記事内容について注意したい点がありますが、それはiTunesが自動で起動した場合、スマホ本体とiTunesの『自動同期』になっていると操作方法によってはデータが消失してしまうので、事前にiTunesの設定から、『iPod、iPhone、および iPad を自動的に同期しない』に設定しておく事に関しては留意しておいた方がよいでしょう。