- Hashtag "#web" returned 9 results.
■文字に色を付ける
青にする
< h5 style="color:blue" >文字青< /h5>
文字青
■文字サイズを変える
h1のサイズ
h3のサイズ
h6のサイズ
フォントサイズを5にする
< p >< font size="5" >font size="5"< /font >< /p >
font size="5"
フォントサイズを7にする
< p >< font size="7" >Hello< /font >< /p >
font size="7"
https://www.sejuku.net/blog/83918
■太文字にする
< b >太文字< /b >
太文字
HTMLを装飾するもの
HTMLコードがあって、どのように装飾するかをCSSで指定する。
HTMLとCSSは別ファイルに記述する。
HTML＝index.html
< h1 >Progate< /h1 >
CSS＝stylesheet.css
h1{
color:red;
}
--------------------
htmlとcssの関連付け
< link rel="stylesheet"href="style.css" >
---------------
< html >
< head >
< title >< /title >
< link rel="stylesheet" type="text/css"
href="flex1.css" >
< /head >
< li >
ListItem
箇条書きしたいことばそれぞれを< li >と< /li >で囲む
< ul >で囲む→中黒。
unordered list:順序がないリスト
< ol >で囲む→数字の連番。
ordered list:順序があるリスト
----------------
リスト表示で中黒ありとなし
中黒あり
< ul >
< li >萬澄枝さん< /li >
< li >岡 裕美さん< /li >
< li >高石ひかりちゃん< /li >
< /ul >
中黒なし
li{
list-style:none;
}
------------------
< ul >
< li >HTML< /li >
< li >PHP< /li >
< li >Ruby< /li >
< /ul >
内容は字下げする（インデントでずらす。tab）
↓
■属性
fontよりstyleよりclass
style属性＝
指定範囲を直接的に装飾する。
同じ装飾を複数箇所させたいときに都度同じ記述をしなければならず、微調整をしたい場合、すべてを書き直す必要がある。
class属性＝
装飾内容はCSSファイルに記述されているので、HTML等のファイル中での記述が少なく、
修正があった場合CSSファイル内の記述を書き換えれば全てに適用される。
整理と効率化のために一般にはCSSファイルに集約して、class等で指定することが多い。
HTML5以降ではclass属性がよい。
ただし、部分的な装飾だけでいい場合は、cssの方が手間なのでstyle属性で十分。
■CSS
https://udemy.benesse.co.jp/design/web-design/what-is-css.html
Cascading Style Sheets
HTMLのサイトの、見た目（文字色、大きさ、拝啓、配置など）を設定する言語。
コードごとに直接反映させるのではなく、複数のHTMLファイルに一貫したデザインを適用できる。
「CSSでスタイル適用する」。
簡単なアニメーションの記述も可能
・マウスを置くとボタンの色を変更。
・クリックに合わせてラジオボタンの表示
・数秒ごとに画像切り替え
（本格的な動的サイトはjavascriptが必要）。
HTMLの全体構造
■headとbody
head要素→ページに関する情報。ブラウザに表示されない。
body要素→実際に表示する内容
■構造の概要
< !DOCTYPE html >--------------HTMLのバージョン宣言。
< html >
< head >----------------------WEBページの設定に関するする情報。必ず3項目ある。
< meta charset="utf-8" >---------------------------①文字コード
< title>Progate---------------------------②ページのタイトル名（ブラウザのタブに表示）
< link rel="stylesheet"href="stylesheet.css" >-----③CSSの読み込み指示
< /head >
< body >
< h1 >岡 裕美さん< /h1 >
< p >すてきなアナウンサーです< /p >
< /body >
< /html >
※①文字コード（meta charset）
指定することで文字化けを防ぐことができる。
UTF-8はHTMLで推奨されているコード。
■背景色を変える→「background-colorプロパティ」
その行の色の変更
HTML
< h1 >大見出し< /h1 >
< p >段落< /p >
大見出し
段落
↓
CSS
h1{
background-color:#dddddd;
}
p{
background-color:#ffd800;
}
■背景色の幅、高さを変える＝width、heightプロパティをPXで指定。
HTML
< h1 >大見出し< /h1 >
< img src="https://prog-8.com/images/wanko.jpg" >
大見出し
↓
CSS
h1{
width:500px;
height:80px;
background-color:#9de8ea:
}
imag{
width:500px;
height:200px;
}
< img src="url" >
image source
イメージソース
src属性のurlの部分に画像のリンクを指定。
![]()
要素はテキストを囲むことがないため、終了タグ不要。
< img src="https://prog-8.com/images/html/beginner/school.jpg" >
< h >
heading。見出しタグのこと。
< h1 >が大見出し＝サイトのメイン
以下、< h2 >～
< h1 >h1の場合< /h1 >
h1の場合
< h5 >h5の場合< /h5 >
h5の場合
HTMLの構造をわかりやすくする。
検索エンジンが理解しやすい。利便性が高くなる。
→ SEOに良い効果。
大：h1～小：h6
同じ数値の場合は同じランクとして扱われる。
< p >
patagraph。段落を作る。
改行されるが、改行そのものが目的ではない。
< p >1行目< /p >
< p >2行目< /p >
1行目
2行目
＜qa＞
anchor。リンクの埋め込み。
＜li ＞
list item。箇条書き。
ulタグ（中黒タグ）かolタグ（番号タグ）の入れ子として使用する。
< u l> 中黒タグ
< li >項目１< /li >
< li >項目２< /li >
< li >項目３< /li >
< li >項目４< /li >
< /ul >
< ol > 番号タグ
< li >項目１< /li >
< li >項目２< /li >
< li >項目３< /li >
< li >項目４< /li >
- 項目１
- 項目２
- 項目３
- 項目４
< hr >
水平線
https://seolaboratory.jp/12446/
https://html-coding.co.jp/annex/dictionary/html/hx/
〈br〉
改行。break.
終了タグ不要。
< div >
division。ブロック要素のグループ分け。下に摘まれる。
< div >
< p >あいうえお< /p >
< p >かきくけこ< /p >
< /div >
< span >
ブロック要素のグループ分け。横に並ぶ。
< span >あいうえお< /span >
< span >かきくけこ< /span >
あいうえお
かきくけこ
https://zero-plus.io/media/html-tags-and-usage/#p%E3%82%BF%E3%82%B0
< h >と< p >
見出しはh、見出し以外はp
- If you are a bloguru member, please login.
Login
- If you are not a bloguru member, you may request a free account here:
Request Account
