Search Bloguru posts

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

https://en.bloguru.com/love

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

thread
< img src="url" >

image source
イメージソース

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

< img src="https://prog-8.com/images/html/beginner/school.jpg" >
#WEB #マニュアル #画像

People Who Wowed This Post

🌹動画項目の目次

thread
#マニュアル #動画

People Who Wowed This Post

🌹マニュアル🌹WEB🌎動画

thread
■編集:横向きの動画を切り取って縦向きにする(クロップ)

Avidemux→動画を選択
→「VideoOutput」を「Mpeg4 AVC (x264)」→「フィルタ」
→「変換」→「Crop」をダブルクリック
→トップ画面が出てクロップする部分が赤枠で囲まれる。
→「Lock Aspect Ratio」を9:16にする。

※コンテンツ別推奨
Youtube 16:9 /1280*720
Instagram ストーリーズ 9:16 /1080*1920


#マニュアル #動画

People Who Wowed This Post

🌹マニュアル🌹WEB🌎リンク

thread
< a >progate< /a >
<a>progate


リンクの飛び先を指定するには、href属性を追加
Hypertext Reference
a href=アンカーエイチレフ

< a href="url" >
< a href="https://prog-8.com">progate< /a >
progate

< a href="https://google.com" >googleへ< /a >
googleへ
#html #マニュアル #リンク

People Who Wowed This Post

🌹マニュアル🌹WEB🌎HTML🌎レクチャー

thread

■レクチャー
SKILL HUB
無料
初心者向けの内容っぽいが、ざっくりでも流れがわかっていないとわからない。
しかし、コードを書きながらプレビューしていくので
要するに覚えたいことをやってくれる。

※行間とかインデントは関係ないようだ

■エディター
SUBLIME TEXT2
一部無料
アクセスするとOSのダウンロードが始まる
https://eng-entrance.com/sublimetext-start

#HTML #マニュアル #レクチャー

People Who Wowed This Post

🌹マニュアル🌹WEB🌎アンダーライン

thread
アンダーラインを引く

< u >普通のライン< /u >
普通のライン

< span style="border-bottom: solid 5px red;" >太めの赤ライン< /span >
太めの赤ライン

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

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

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🌎リンクを貼る(同一ページ)

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

リンク先のコード

到達点



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

People Who Wowed This Post

🌹マニュアル🌹WEB🌎文字配置

thread
■1文字開ける
 
&emsp;全角
&nbsp;半角
 
■左右:水平方向:align

< p style="text-align: left" > 左寄せ< /p >

左寄せ


< p style="text-align: center" >中央寄せ< /p >

中央寄せ


< p style="text-align: right" > 右寄せ< /p >

右寄せ




https://www-creators.com/archives/4672#CSS
https://www.tagindex.com/html_tag/table/td_align.html

■上下:垂直方向:valign

< p style="text-valign:top" >上揃え< /p >

上揃え


< p style="text-valign:middle" > 中央< /p >

中央


< p style="text-valign:bottom" >下詰め< /p >

下詰め



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