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

Dec

31

#WEB #マニュアル

🌹マニュアル🌹WEB🌎CSS🌎特定の要素にCSSを適用する（箇条書きの一部のみなど）

Dec

31

全体を赤にする

HTML
< ul >
< li >萬澄枝さん< /li >
< li >モアメタルちゃん< /li >
< li >永尾まりあちゃん< /li >
< /ul >

CSS
li{
color:red;
}

---------------------------------
↓
萬澄枝さんだけ赤にする
該当の文字をclass（指定範囲）として任意の名前を付けて、
そこだけにCSSを反映させる。

HTML
< ul >
< li class="selected">萬澄枝さん< /li >
< li >モアメタルちゃん< /li >
< li >永尾まりあちゃん< /li >
< /ul >

CSS
.selecteｄ{　　←　頭に.がつく。
color:red;
}
li{
color:#444;
}

#CSS #マニュアル #特定の要素

🌹マニュアル🌹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🌎CSS🌎文字を変える（大きさ、種類）

Dec

31

■文字の大きさを変える→「font-sizeプロパティ」を使う

< h1 >赤で10px< /h1 >
< p >青で40px< /p >
↓
HTML

赤で10px

青で40px

CSS
h1{
color:#ff0000:
font-size:10px:
}

p{
color:#0000ff;
font-size:40px;
}

■文字の種類を変える→「font-familyプロパティ」を使う

HTML
< h1 >hello< /h1 >
< p >hello< /p >
↓
CSS
h1｛
fomt-fa,ily:serif:
}
p{
fomt-size:"Avenir Next";
}

※明朝体：serif、YuMincho
※ゴシック体：sans-serif、"Lucida Grande"

■要素の一部にだけ反映させる→< span >を使う。

#CSS #マニュアル #文字

🌹マニュアル🌎HTML🌎問い合わせフォーム

Dec

31

問い合わせフォーム

< form >
< p >input要素< /p >→枠のタイトル
< input>→入力欄（終了タグなし）
< p>textarea< /p >→枠のタイトル
< textarea >< /textarea >→複数行入力の入力欄
< /form >

< input type="submit" >→送信ボタン
< input type="submit"value="保存" >
ブラウザの言語で表示される（日本語ブラウザでは「送信」と表示）
Value属性に任意の値を入指定すると変更できる。

問い合わせフォーム

→送信ボタン

ブラウザの言語で表示される（日本語ブラウザでは「送信」と表示）
Value属性に任意の値を入指定すると変更できる。

#HTML #マニュアル #問い合わせ

🌹マニュアル🌹HTML🌎メイン部分

Dec

31

メイン部分の構造

3つの要素で構成されいてる

copy-container-------タイトルバナー部
contents-------------メニュー部
contact-form---------記述部

#HTML #マニュアル #メイン

🌹マニュアル🌹Bloguru

Dec

31

幅480＊高さ640

400*533

標準.1280.960

1000.750

800.600

500.375

■画像の位置の変更

画像を差し込むと、画像が先に来て、文字は画像のあとになってしまう。画像を任意に位置に差し込むことはできるが、画像をbroguruのサーバにアップロードしておく必要がある。容量制限がある。

「画像、画像、文字」→「文字、画像、文字」にしてみる。

< div class="text-center" >< img src="★" >< /div >

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

この文字は画像の前

この文字は画像の後

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

※動画は最大10MB（5秒ぐらい）
※全部で50MB
※このやり方だと、写真にコメントは入れられない。
※フォント、文字色・サイズは変更できない。
※画像の選択、選択後のダウンロードできない。

■画像のサイズ
　PCだと表示の大きさが変わる。
　スマホだと同じサイズになる。

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

＜動画＞

■スマホで動画を取るとき
・カメラは横向きが良い。

■スマホの高画質→20秒でGIF高画質が限界ぐらい。
・1秒1Mとして、20秒20Mぐらい。→これがよさそう。
40秒だと11Mぐらい→長くなるほど自動的に小さくなる。

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

#操作

🌹マニュアル🌹WEB🌎HTML🌎フッター

Dec

31

■基本

< div class="footer" >-----------------------フッターの部分をやる。
< div class="footer-logo" >Progate< /div >----ロゴの部分はProgate
< div class="footer-list" >-----------------リストの部分は次の通り
< ul>-------------------------------------unorderdlist（順序無関係のリスト）
< li >会社概要< /li >
　 < li >採用< /li >
　 < li >お問い合わせ/li >
< /ul >------------------------------------listの内容終わり
< /div >------------------------------------listの部分終わり
< /div >-------------------------------------フッターの部分終わり

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

■そのままだと縦に並ぶ

Progate
会社概要
採用
お問い合わせ

↓

■アレンジ１）リストを横並びにしたい

Progate 会社概要　採用　お問い合わせ

li{
float: right;------------listの要素を右に横並びになる
}

■アレンジ２）ロゴは左寄せ、リストは右寄せにしたい

Progate　　　　　　　　　　　　会社概要
　　　　　　　　　　　　　　　採用
　　　　　　　　　　　　　　　お問い合わせ

左端に配置したい「footer-logo」にはfloat: left;を、
右端に配置したい「footer-list」にはfloat: right;を指定

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

一般的には
< header >< /header >
< footer >< /footer >

#html #フッター #マニュアル

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

Dec

31

< img src="url" >

image source
イメージソース

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

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

#WEB #マニュアル #画像

🌹動画項目の目次

Dec

31

🌹編集：横向きの動画を切り取って縦向きにする（クロップ）
https://jp.bloguru.com/love/455354/web

🌹動画の向きを変える
https://jp.bloguru.com/love/485861/2023-11-10

#マニュアル #動画

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

freespace

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

🌹マニュアル🌹WEB🌎CSS🌎特定の要素にCSSを適用する（箇条書きの一部のみなど）

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

大見出し

大見出し

🌹マニュアル🌹WEB🌎CSS🌎文字を変える（大きさ、種類）

赤で10px

🌹マニュアル🌎HTML🌎問い合わせフォーム

🌹マニュアル🌹HTML🌎メイン部分

🌹マニュアル🌹Bloguru

🌹マニュアル🌹WEB🌎HTML🌎フッター

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

🌹動画項目の目次

introduction

calendar

latest comments

hashtags

history

freespace

People Who Wowed This Post

People Who Wowed This Post

大見出し

大見出し

People Who Wowed This Post

赤で10px

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

introduction

calendar

latest comments

hashtags

history