CSSでfontの大きさをResponsive対応に変えてみたメモ

CSS font

気になったところは日本語、英語の文章にも一応意味があります。

URL encoding replace non-ASCHII characters with a % followed by hexadicimal digits.

URL cannnot contain spaces. URL encoding normally replaces a space with a Plus(+)sign, or $20.

"heyあいうえお" convert to "hey%E3%81%82%E3%81%84%E3%81%86%E3%81%88%E3%81%8A"

URLに日本語などが含まれていると%のあとに数字やアルファベットが並んでいるのは”あいうえお”を16進法に変換している。

Processing input procedure needs to know PHP computer language.

retrieve 検索する例文weblio 898件
frtch 検索 16件で、fetchは動詞というよりフェッチデータなどと名詞として使われるようだ。retrieveはlook for,seekより頻度は低いが”探って取ってくる”という意味で”検索する”を表現したい場合でも使えそう。retrieveはゴールデン・レトリバーのレトリバーで獲物(特定の対象)を取って戻ってくる。fetchだと漠然となにかを取ってくる・戻ってくる、といった感じだろうか。

This painting will fetch a good price.
この絵は良い値段で売れるだろう。
こんな使い方は、完全に頭から抜けてしまってた。

CSS default font-size of paragraph is 16px(16px=1em). body{ font-size:100%;}のときにいい感じに表示される。

 <h1> 用ならbody font-size: 100%;のとき
 例 font-size:2.5em; 
      16x2.5=40 40px
  2.5emで大きくなる。
  <h2> 1.8em 
  <p> 0.9em  という具合で大きさが変化する。

HTML Entitiesnon breaking space nbsp   less than, greater than, ampersand &,


Responsive Font Size

the test size can be set with a vw unit, means "viewpoint width".

resposiveの例通りに CSSで h1 font-size:10vw; だと1文字辺り4cm以上あり大きすぎる。43cmの画面の場合。


 <style>
   h1 {font-size:4vw/ 1.6;}
   h2 {font-size:3vw/ 1.6;}
   p  {font-size:2vw/ 1.6;}
   span.red {font-size:2.2vw/1.6; color:red;}
   </style>
   
 で24インチ画面横置き100%で意図した大きさに。
  

head value head2 value paragraph value span.red value
h1 4vw h2 3vw p 2vw red 2.2vw
h1 4em h2 3em p 1em red 1.5em

pre先頭のタグで一度改行、そこから文頭を揃え始めると上のように文頭が揃った状態になる。

The font propaty

This is a paragraph. The font family is arial.

This paragraph is set to 12px of size,and italic blod of font family, the line height is set to 1.6, and font family is Georgia.

style="font: italic blod 12px/1.6 ;"

font: とすることでfamilyやsizeの指定なく複数を一度に指定出来る。1.6 はフォントサイズに相対的な割合で変化する。16px=1emは変化しないがfont:x(変数)/1.6;だと行間が適度にあいてくれる。

フォントの太さ font-weight:normal|bold|bolder|lighter|initial|inherit;
CSS font-weight:[100-900]; 1000より上の値はnormalと同じように表示された。

正しくは、100から900まで100ごとの数字で太さが変化する。

フォントの形 font-style:normal|italic|oblique|initial|inherit;

フォントの個別の種類と名前 font-family:family-name フォントの名前 cursive/筆記体 monoscape/等幅 selif/明朝体 san-selif/ゴシック体

以下のフォームはテスト用で送信されずに選ぶだけのものです。送信機能はPHP言語などの知識が必要なようです。

Male
Female
other

target attribute default "_self(default)" submit the currrent window/tab. "_blank" opening new window/tab

action attribute something~~.php
method atttribute :GET(default) or POST.varidate:検証


To select mulitple options, you can hold down the key of Ctrl(windows), if you use Machintosh hold down the key Command.



好きな果物は?

コメント

このブログの人気の投稿

スタートアップフォルダとAmatsukazeのエンコード設定

EDCB Recname_MacroのRMで文字削除がうまく行かない

冠山トンネル周辺のライブカメラ