HTMLの基礎の基礎07
作成日：
簡単なHTMLを書き、実際に無料サーバーにアップロードして、ホームページを作るまでをやりましょう。
実際にやってみることで、本当の基礎の基礎、HTMLの規則が実体験として理解できます。
【31】font-size(css)
- 指定方法は「px」「～small,medium,large～」「%」「em」「rem」などがあります。
- 「rem」が1番ややこしくなくて最適。
- 「%」「em」が2番目に使いやすい。ただし、同じ数値でも親要素の影響で大きさが変わります。
- 「px」は使わない方が良い。
- 見る側はブラウザ上のフォントサイズを見やすいサイズに変更している場合があるけれど、px指定はそれを無視して大きさを強制してしまう。
- 弱視や目の不自由な方、ご高齢の方、目の調子が悪い方、常に疲れ目の方など、様々な状況の方が居られますから。
- 基本的にbodyにはfont-sizeを設定せず、copyrightやmenuやh1,h2,h3などの一部のフォントサイズのみに設定するのが最適。
【32】top,right,bottom,left
- padding,margin,border に特によく使います。
- 例）cssの margin : 1em 1em 1em 1em; 4つ並んでる数字が、top,right,bottom,left の数字になります。
whitebox {
padding: 1em; /* top,right,bottom,left */
margin: 1em; /* top,right,bottom,left */
}
whitebox {
padding: 1em 1em 1em 1em; /* top,right,bottom,left */
margin: 1em 1em 1em 1em; /* top,right,bottom,left */
}
whitebox {
padding-top: 1em;
padding-right: 1em;
padding-bottom: 1em;
padding-left: 1em;
margin-top: 1em;
margin-right: 1em;
margin-bottom: 1em;
margin-left: 1em;
}
- 上記はすべて同じです。
- top,right,bottom,left すべてが同じ値の場合は1つ書くだけでOKです。
- 値がそれぞれ違う場合、上右下左という時計回りの順番で値が当てはめられるので、連続して値を書くこともできます。
- /* 文字 */ ←これはcssの中にコメントや注釈を書く時に使用します。この間に書かれた文字はcssに影響を与えません。
【33】X(旧Twitter)用metaタグ
- X(旧Twitter)にURLを投稿した時にサムネイル画像と内容テキストが表示されます。
- <head></head>の間に書き込みます。
<head>
<meta name="twitter:card" content="summary" />
<meta name="twitter:url" content="ホームページURL" />
<meta name="twitter:title" content="ホームページ名" />
<meta name="twitter:description" content="内容紹介テキスト" />
<meta name="twitter:image" content="サムネイル用画像、URL（https～）" />
</head>
- twitter:cardの設定には2種類あります。「summary」と「summary_large_image」
- 「summary」は1：1の小さめの画像が表示されます。ファイルデータサイズ最大5MB。
- 「summary_large_image」は2：1の大きな画像が表示されます。ファイルデータサイズ最大5MB。
- X(旧Twitter)側でよく起こる現象ですが、この設定がちゃんとできていても投稿してしばらくは表示されないことが多々あります。
【今回はここまでです】
今回は「font-size」「top,right,bottom,left」「X(旧Twitter)用metaタグ」を解説しました。
X(旧Twitter)に投稿したい人には重要なmetaタグですね。
次回は「favicon（ファビコン）とは」「favicon用の画像サイズ」「copyright（コピーライト）とは」を紹介します。
