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

Jan

1

■文字に色を付ける

青にする
< h5 style="color:blue" >文字青< /h5>

文字青

■文字サイズを変える

h1のサイズ

h3のサイズ

h6のサイズ

フォントサイズを5にする
font size="5"

font size="5"

フォントサイズを7にする
Hello

font size="7"

https://www.sejuku.net/blog/83918

■太文字にする

太文字太文字

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

フォントサイズ3で太文字の場合

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

🌹マニュアル🌹WEB🌎CSS

Jan

1

HTMLを装飾するもの
HTMLコードがあって、どのように装飾するかをCSSで指定する。
HTMLとCSSは別ファイルに記述する。

HTML＝index.html
Progate

CSS＝stylesheet.css
h1{
color:red;
}

--------------------
htmlとcssの関連付け

---------------

#WEB #css #マニュアル

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

Jan

1

ListItem
箇条書きしたいことばそれぞれをとで囲む

で囲む→中黒。
unordered list:順序がないリスト

で囲む→数字の連番。
ordered list:順序があるリスト

----------------

リスト表示で中黒ありとなし

中黒あり

萬澄枝さん
岡　裕美さん
高石ひかりちゃん

萬澄枝さん

岡　裕美さん

高石ひかりちゃん

中黒なし

li{
list-style:none;
}

------------------

　 HTML
　PHP
　 Ruby

内容は字下げする（インデントでずらす。tab）

↓

HTML

PHP

Ruby

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

■属性

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要素→実際に表示する内容

■構造の概要

--------------HTMLのバージョン宣言。

----------------------WEBページの設定に関するする情報。必ず3項目ある。
---------------------------①文字コード
Progate---------------------------②ページのタイトル名（ブラウザのタブに表示）
-----③CSSの読み込み指示

岡　裕美さん
すてきなアナウンサーです

※①文字コード（meta charset）

指定することで文字化けを防ぐことができる。
UTF-8はHTMLで推奨されているコード。

title>

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

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

Dec

31

#WEB #マニュアル

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

Dec

31

■背景色を変える→「background-colorプロパティ」

その行の色の変更

HTML
大見出し
段落

大見出し

段落

↓

CSS
h1{
background-color:#dddddd;
}
p{
background-color:#ffd800;
}

■背景色の幅、高さを変える＝width、heightプロパティをPXで指定。

HTML
大見出し

大見出し

↓
CSS
h1{
width:500px;
height:80px;
background-color:#9de8ea:
}
imag{
width:500px;
height:200px;
}

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

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

Dec

31

image source
イメージソース

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

#WEB #マニュアル #画像

🌹マニュアル🌹WEB🌎タグ

Dec

31

heading。見出しタグのこと。

が大見出し＝サイトのメイン
以下、～

h1の場合

h1の場合

h5の場合

HTMLの構造をわかりやすくする。
検索エンジンが理解しやすい。利便性が高くなる。
→　SEOに良い効果。

大：h1～小：h6
同じ数値の場合は同じランクとして扱われる。

patagraph。段落を作る。
改行されるが、改行そのものが目的ではない。

1行目
2行目

1行目

2行目

＜qa＞
anchor。リンクの埋め込み。

＜li ＞
list item。箇条書き。
ulタグ（中黒タグ）かolタグ（番号タグ）の入れ子として使用する。

　中黒タグ
項目１
項目２
項目３
項目４

項目１

項目２

項目３

項目４

　番号タグ
項目１
項目２
項目３
項目４

項目１

項目２

項目３

項目４

水平線

https://seolaboratory.jp/12446/
https://html-coding.co.jp/annex/dictionary/html/hx/

〈br〉
改行。break.
終了タグ不要。

division。ブロック要素のグループ分け。下に摘まれる。

あいうえお
かきくけこ

あいうえお

かきくけこ

ブロック要素のグループ分け。横に並ぶ。

あいうえお
かきくけこ

あいうえお
かきくけこ

https://zero-plus.io/media/html-tags-and-usage/#p%E3%82%BF%E3%82%B0

と

見出しは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