記事検索

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

https://jp.bloguru.com/love

フリースペース

🌹マニュアル🌹Bloguru

スレッド
幅480*高さ640 幅480*高さ640 400*533 400*533 標準.1280.960 標準.1280.960 1000.750 1000.750 800.600 800.600 800.600 800.600 500.375 500.375
■画像の位置の変更

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

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



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

この文字は画像の前



この文字は画像の後

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

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


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

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

<動画>

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

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

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


#操作

ワオ!と言っているユーザー

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

スレッド
■基本


-----------------------フッターの部分をやる。
Progate----ロゴの部分はProgate
-----------------リストの部分は次の通り
-------------------------------------unorderdlist(順序無関係のリスト)
会社概要
  採用
  お問い合わせ/li >
------------------------------------listの内容終わり
------------------------------------listの部分終わり
-------------------------------------フッターの部分終わり





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

■そのままだと縦に並ぶ

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



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

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


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

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

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

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

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

一般的には





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

ワオ!と言っているユーザー

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

スレッド


image source
イメージソース

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


#WEB #マニュアル #画像

ワオ!と言っているユーザー

🌹動画項目の目次

スレッド
#マニュアル #動画

ワオ!と言っているユーザー

🌹マニュアル🌹WEB🌎動画

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

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

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

#マニュアル #動画

ワオ!と言っているユーザー

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

スレッド
< a >progate
<a>progate


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


progate
progate

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

ワオ!と言っているユーザー

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

スレッド

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

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

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

ワオ!と言っているユーザー

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

スレッド
アンダーラインを引く

普通のライン
普通のライン

太めの赤ライン
太めの赤ライン

ワオ!と言っているユーザー

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

スレッド

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

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

ここは見出し
ここは文章

ここは見出し


ここは文章






■HTML構成の意味

: HTML5を使う
 : ここからHTMLを使う。言語はジャパニーズ。
 :HTMLの範囲指定スタート



サンプルHTML
 :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のスキルはなくてもできるが、あったほうが役立つ。
 =分析できる。追加できる。バグを解決できる。





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

ワオ!と言っているユーザー

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

スレッド
■改行のコード<br>

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

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

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

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


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



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

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



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

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



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




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

ワオ!と言っているユーザー

  • ブログルメンバーの方は下記のページからログインをお願いいたします。
    ログイン
  • まだブログルのメンバーでない方は下記のページから登録をお願いいたします。
    新規ユーザー登録へ
ハッピー
悲しい
びっくり