Search Bloguru posts

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

https://en.bloguru.com/love
  • Hashtag "#マニュアル" returned 37 results.

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

Dec
31
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

🌹マニュアル🌹WEB🌎改行、行間調整

Dec
31
thread
■改行のコード＜br>

■< br >を続けると行間が不自然にあいてしまう。
行間を詰める手順。

< p >段落は一つの意味を持つ文章のかたまりです。< br >
こうして途中で改行しても、同じグループとしてみなされます。< /p >
< p >このように段落を分けると、上の段落とは違う意味を持つかたまりとなります。わかりづらければ、「しかし」や「ところで」などが挿入されるタイミングと考えてください。< /p >

段落は一つの意味を持つ文章のかたまりです。

こうして途中で改行しても、同じグループとしてみなされます。


このように段落を分けると、上の段落とは違う意味を持つかたまりとなります。わかりづらければ、「しかし」や「ところで」などが挿入されるタイミングと考えてください。



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

< p >段落は一つの意味を持つ文章のかたまりです。< br >
こうして途中で改行しても、同じグループとしてみなされます。< br >
< br >
このように段落を分けると、上の段落とは違う意味を持つかたまりとなります。わかりづらければ、「しかし」や「ところで」などが挿入されるタイミングと考えてください。< /p >



段落は一つの意味を持つ文章のかたまりです。

こうして途中で改行しても、同じグループとしてみなされます。



このように段落を分けると、上の段落とは違う意味を持つかたまりとなります。わかりづらければ、「しかし」や「ところで」などが挿入されるタイミングと考えてください。




https://re-inx.com/br
#br #マニュアル #行間

People Who Wowed This Post

🌹マニュアル🌹WEB🌎リンクを貼る（同一ページ）

Dec
31
thread
リンク元のコード
abcにジャンプ

リンク先のコード

到達点



※IDの注意点
・ひとつのIDは同じ文書内で1か所だけ。重複不可。
・使用できる文字は、半角の英数字と、-　_　 :　 .
　（ハイフン以外の記号は使わない方が無難）
・アルファベットで始める。数字や記号で始めるのは不可。
・大文字小文字の区別あり。
#マニュアル #リンク

People Who Wowed This Post

🌹マニュアル🌹WEB🌎線を引く

Dec
31
thread
※hrは立体感のある線になる。立体感をなくすためにはnoshadeを付ける。

■黒線
< hr >


立体感のない黒線
< hr noshade >


■装飾：border＝太さ、色、スタイルをセットで指定する

1ピクセル、1本線、プラム色
< hr style="border: 1px solid plum;" >


5ピクセル、1本線、太線、シアン
< hr style="border: 5px solid cyan;" >


3ピクセル、点線、レッド
< hr style="border: 3px dotted red;" >


■装飾：セットの必要がない場合は該当項目だけを指定できる。

< hr width="400" >


< hr size="10" >



※カラーコード
https://beginners-hp.com/color-code.html

※線の種類
solid 通常の線
double 二重線
ridge 山形の線
groove 谷型の線
dotted 点線
dashed 大きな点線
inset 内側にくぼんだ線
outset 外側に突出した線
https://hmaster.net/chorizon2.html



#マニュアル #線

People Who Wowed This Post

🌹マニュアル🌹WEB🌎枠線をつける。

Dec
31
thread
■枠内の配置
・左右→text-align: left;　text-align:center; text-align:righet

■線を引く

小さい点線。

< div style="padding: 10px; margin-bottom: 10px; border: 1px dotted #333333;" >
小さい点線。
< /div >



普通の点線

< div style="padding: 10px; margin-bottom: 10px; border: 1px dashed #333333;" >
普通の点線
< /div >



実線。

< div style="padding: 10px; margin-bottom: 10px; border: 1px solid #333333;" >
実線。
< /div >


角丸小さい点線。

< div style="padding: 10px; margin-bottom: 10px; border: 1px dotted #333333; border-radius: 5px;" >
角丸小さい点線。
< /div >


角丸小さい点線。


< div style="padding: 10px; margin-bottom: 10px; border: 1px dashed #333333; border-radius: 5px;" >
角丸小さい点線。
< /div >


細かい点線/背景黄色

< div style="padding: 10px; margin-bottom: 10px; border: 1px dotted #333333; background-color: #ffff99;" >
細かい点線/背景黄色
< /div >


点線/背景黄色。


< div style="padding: 10px; margin-bottom: 10px; border: 1px dashed #333333; background-color: #ffff99;" >
点線/背景黄色。
< /div >


実線/背景黄色

< div style="padding: 10px; margin-bottom: 10px; border: 1px solid #333333; background-color: #ffff99;" >
実線/背景黄色
< /div >





https://jim-do-it-yourself.jimdofree.com/4-%E3%83%97%E3%83%81-%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%82%A4%E3%82%BA/%E6%9E%A0%E3%82%92%E3%81%A4%E3%81%91%E3%82%8B/


https://3z1k.hatenablog.com/entry/2020/10/02/213000









#マニュアル #枠線

People Who Wowed This Post

🌹マニュアル🌎カラーコード

Dec
31
thread
#カラーコード #マニュアル

People Who Wowed This Post

🌹マニュアル🌹WEB🌎タグ

Dec
31
thread


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




  1. 項目１

  2. 項目２

  3. 項目３

  4. 項目４










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

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