Search Bloguru posts

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

https://en.bloguru.com/love
  • Hashtag "#css" returned 5 results.

🌹マニュアル🌹WEB🌎CSS

thread
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 #マニュアル

People Who Wowed This Post

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

thread
全体を赤にする

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
.selected{  ← 頭に.がつく。
color:red;
}
li{
color:#444;
}






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

People Who Wowed This Post

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

thread
■背景色を変える→「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 #マニュアル #背景色

People Who Wowed This Post

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

thread
■文字の大きさを変える→「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 #マニュアル #文字

People Who Wowed This Post

🌹マニュアル🌹WEB🌎html,CSS基本

thread
https://www.xserver.ne.jp/bizhp/homepage-creation-by-html/

■html
Hyper Text Markup Languag。意味を付ける役割。

< h2 >ここは見出し< /h2 >
< p >ここは文章< /p >

ここは見出し


ここは文章






■HTML構成の意味

< !DOCTYPE html > : HTML5を使う
< html lang="ja" > : ここからHTMLを使う。言語はジャパニーズ。
< head > :HTMLの範囲指定スタート
< meta charset="UTF-8" >
< meta http-equiv="X-UA-Compatible" content="IE=edge" >
< meta name="viewport" content="width=device-width, initial-scale=1.0" >
< title>サンプルHTML< /title >
< /head > :HTMLの範囲指定終了
< body >:ホームページに表示させる範囲スタート
< h2 >見出し< /h2 >
< p >文章を書く場所< /p >
< /body >:ホームページに表示させる範囲終了
< /HTML >:ここまでがHTML








タイトル


見出し


文章を書く場所








■CSS

HTML→色みなし。文字と画像が並んでいるだけのもの
CSS→デザインする言語

HTMLで書かれたものを装飾する
Cascading Style Sheets
スタイルシート言語
表現できるパターンが多い→習得には時間がかかる→テンプレートを使えば簡単。





■役立つサイト

・テンプレート

TEMPLATE PARTY
無料版もあるが、著作権表示が必要となる。
質が高い。
https://template-party.com/index.html

・学習サイト

Progate
HTML、CSS初級編が学習できる。
https://prog-8.com/




■CMS

Contents Management Syst
HTML、CSSの習得が難しい→CMSを使う。

・WordPressなど。
 HTML、CSSのスキルはなくてもできるが、あったほうが役立つ。
 =分析できる。追加できる。バグを解決できる。





#CSS #HTML #マニュアル #基本

People Who Wowed This Post

  • 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
Happy
Sad
Surprise