パソコン教室の講師っても、個人経営なので色々な仕事を頼まれます。
今回、ちょっと手を焼いたのがホームページの修正。
ホームページの管理もやっているのですが、作業するパソコンがWindows8.1でIE11。この表示を正としていたのですが、ホームページ管理の依頼元の方と打ち合せをした時にWindows10のエッジ（Edge）での表示を見せてもらうとデザインが崩れてる・・・
前職ではIEの表示を正として作業していたのですが、Windows10が出回ってからEdgeでの確認もやらなきゃダメだなって痛感。
最近は、jimdoとかWordPressと言うデザインを自動的に作ってくれる仕組みを利用しているので、古いhtmlで書かれたホームページの事は全然気にしていなかったです。(ーー;)
と、言う事で今回作業に使った内容の忘却録おば書かせていただきます。
最新のホームページ言語「html5」では廃止になったタグがあります
今回色々とありますが、今回引っかかったのが「font」タグです。
文字サイズの指定があったのですが、そのあたりが細かく指定出来るようになったので、Edgeでは対応しきれて居なかったのでしょうね。
html5ではスタイルシートを使って文字サイズ等の文字に関する設定を行うのですが、古いホームページをhtml5の形式に変えてスタイルシートを設定するのには費用が・・・先方も費用は極力抑えたいって事なので、タグの中に「文字のサイズ・色・太さ」の要素を記述して対応する事に。
この方法で、逃げて対応する事にしました。
「font」タグを「span」タグに変えてhtml5対応
ホームページのレイアウトが崩れていた原因が、fontタグで文字サイズを指定していたからでした。
このため１行で収まっていたのが、２行になってレイアウトが崩れてる。
例えば
<font size=”2″>ほげほげ</font>
の部分を
<span style=”font-size : x-smaller“>ほげほげ</span>
て感じです。
フォント関連で使うものを忘却録
文字の色
<span style=”color : カラーコード又はカラー名“>ほげほげ</span>
カラーコードは赤の場合「FF0000」、カラー名「red」ってな感じです。
カラーコードでは以前は「#FF0000」って書いてたと思うのですが「#」無しでも大丈夫でした（正しいかどうかは別として）
文字の大きさ
<span style=”font-size : 文字サイズ“>ほげほげ</span>
文字サイズは大きい方から
xx-large
x-large
large
larger
medium
small
smaller
x-small
xx-small
ですね。
文字の太さ
<span style=”font-weight:文字の大きさ“>ほげほげ</span>
今回は普通の太字で大丈夫だったので「bold」を使いました。
複数指定も可
<span style=”font-size:small; color:ff0000; font-weight:bold“>ほげほげ</span>
複数指定をする場合は、「style=””」の要素を「;」で区切ります。
こんな感じです。
「html5」＋スタイルシートは様々な表現ができます。
今回は、文字関係を忘却録と言う事で書きましたが、スタイルシートでは様々なデザインを作る事が出来ます。
本物のデザインを作るのでしたら、かなりお勉強が必要です。
私は本を見ながら必要な事を探してスタイルシートを作っています。
パソコン教室のホームページでは「ホームページも作ります」ってな事を書いていますが、通常はjimdoかWordPressをお勧めしています。
htmlタグを覚える必要は無し、文字や写真を入れ替えたりの作業も簡単なので、ご自分で作業された方には持って来いです。
オリジナルで他ではない素敵なデザインを希望される方には、私のお友達に素晴らしいデザインのホームページを作る方がいらっしゃいますのでその方にお願いしています。
ホームページを作られる時には、更新の簡便さを選ぶか、デザインを選ぶか考えてご相談くださいね。
