🌹マニュアル🌹WEB🌎文字を書く

Jan

1

■文字に色を付ける

青にする
< 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 >
太文字

< ｂ >< p >< font size="3">フォントサイズ3で太文字の場合< /font >< /p >< /b >

フォントサイズ3で太文字の場合< /font>

#WEB #マニュアル #文字を書く

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 >

#WEB #css #マニュアル

🌹マニュアル🌹WEB🌎リスト表示

Jan

1

< 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）

↓

HTML

PHP

Ruby

#HTML #WEB #マニュアル #リスト

🌹マニュアル🌹WEB🌎コード、構造

Jan

1

■属性

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が必要）。

#WEB #コード #マニュアル #構造

🌹マニュアル🌹WEB🌎HTMLの全体構造

Dec

31

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で推奨されているコード。

#HTML #WEB #マニュアル #全体構造

🌹マニュアル🌹WEB項目の目次ページ

Dec

31

#WEB #マニュアル

🌹マニュアル🌹WEB🌎CSS🌎背景色と、背景色の縦横サイズ変更

Dec

31

■背景色を変える→「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;
}

#CSS #WEB #マニュアル #背景色

🌹マニュアル🌹WEB🌎画像表示

Dec

31

< img src="url" >

image source
イメージソース

src属性のurlの部分に画像のリンクを指定。
要素はテキストを囲むことがないため、終了タグ不要。

< img src="https://prog-8.com/images/html/beginner/school.jpg" >

#WEB #マニュアル #画像

🌹マニュアル🌹WEB🌎タグ

Dec

31

< 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

#WEB #タグ #マニュアル

こんにちは。紫のバラの人です。

freespace

🌹マニュアル🌹WEB🌎文字を書く

文字青

h1のサイズ

h3のサイズ

h6のサイズ

🌹マニュアル🌹WEB🌎CSS

🌹マニュアル🌹WEB🌎リスト表示

🌹マニュアル🌹WEB🌎コード、構造

🌹マニュアル🌹WEB🌎HTMLの全体構造

🌹マニュアル🌹WEB項目の目次ページ

🌹マニュアル🌹WEB🌎CSS🌎背景色と、背景色の縦横サイズ変更

大見出し

大見出し

🌹マニュアル🌹WEB🌎画像表示

🌹マニュアル🌹WEB🌎タグ

h1の場合

h5の場合

introduction

calendar

latest comments

hashtags

history

freespace

文字青

h1のサイズ

h3のサイズ

h6のサイズ

People Who Wowed This Post

People Who Wowed This Post

People Who Wowed This Post

People Who Wowed This Post

People Who Wowed This Post

People Who Wowed This Post

大見出し

大見出し

People Who Wowed This Post

People Who Wowed This Post

h1の場合

h5の場合

People Who Wowed This Post

introduction

calendar

latest comments

hashtags

history