■レギュラーとショート
データによって、勝手にショートにかわる。
・縦横比が縦長～正方形まで
・60秒未満
■Youtube動画をブログに表示
①Youtube動画のウインドウの下の「共有」→「埋め込む」
→「動画の埋め込み」で出てきた構文をコピー
②ブログで表示させたい箇所で、貼り付け。
※※ショートではなく通常のサイトを見る
共有→埋め込む→を押すと、コードが出てくる
ここで見えるのは最初からembed
■属性
fontよりstyleよりclass
style属性＝
指定範囲を直接的に装飾する。
同じ装飾を複数箇所させたいときに都度同じ記述をしなければならず、微調整をしたい場合、すべてを書き直す必要がある。
class属性＝
装飾内容はCSSファイルに記述されているので、HTML等のファイル中での記述が少なく、
修正があった場合CSSファイル内の記述を書き換えれば全てに適用される。
整理と効率化のために一般にはCSSファイルに集約して、class等で指定することが多い。
HTML5以降ではclass属性がよい。
ただし、部分的な装飾だけでいい場合は、cssの方が手間なのでstyle属性で十分。
■CSS
https://udemy.benesse.co.jp/design/web-design/what-is-css.html
Cascading Style Sheets
HTMLのサイトの、見た目（文字色、大きさ、拝啓、配置など）を設定する言語。
コードごとに直接反映させるのではなく、複数のHTMLファイルに一貫したデザインを適用できる。
「CSSでスタイル適用する」。
簡単なアニメーションの記述も可能
・マウスを置くとボタンの色を変更。
・クリックに合わせてラジオボタンの表示
・数秒ごとに画像切り替え
（本格的な動的サイトはjavascriptが必要）。
■余白調整
-----------------
上下左右に値を反映させる
CSSで、padding:値; → 上下左右にその値の余白ができる。
HTML
Progate
CSS
.logo1{
padding: 20px;
}
---------------
特定の方向にのみ値を反映させる
HTML
Progate
CSS
.logo1{
padding-top: 20px;
}
上＝top
下＝bottom
左＝left
右＝right
--------------
方向別に値を変える
書き方１）上下左右をきちんと表記する
.logo1 {
padding-top: 20px;
padding-right: 10px;
padding-bottom: 20px;
padding-left: 10px;
書き方２）省略計。上右下左（時計回り）で適用される
.logo1{
padding: 20px 10px 20px 10px;
}
書き方３）上下セットと左右セットとして表記する
.logo1{
padding: 20px 10px;
---------
フッター部を入力するよ
Progate フッターのロゴはProgate
フッターのリストは、
箇条書きで、
永尾まりやちゃん
高石光ちゃん
後藤恭子さま
箇条書き終わり
フッターリストの部分終わり
フッターの部分終わり
-------------------
横並びにする→cssで「float:left;」
・liにかければli要素のみ
・header-logoにかければロゴとli要素が並ぶ
ただし、そのままだとフッターにもかかってしまう。
ヘッダーだけでよい場合は、「.float-list□ li｛
----------------------------------
Progate
Progate
プログラミングとは
学べるレッスン
お問い合わせ
Progate
--------
body {
font-family: "Avenir Next";
}
li {
list-style: none;
/* 以下の2行を削除してください */
}
.header {
background-color: #26d0c9;
color: #fff;
height: 90px;
}
.header-logo {
float: left;
font-size: 36px;
padding: 20px 40px;
}
/* header-listの中のli要素にのみ適用したいCSSを記述してください */
.header-list li{
float: left;
padding: 33px 20px;
}
.main {
background-color: #bdf7f1;
height: 600px;
}
.footer {
background-color: #ceccf3;
height: 270px;
}
html> head> title> body> ul> li> li> li>
---------
ヘッダー部を入力するよ
Progate ヘッダーロゴはProgate
ヘッダーリストは、
箇条書きで、
萬澄枝さん
モアメタルちゃん
岡裕美さん
箇条書き終わり
ヘッダーリストの部分終わり
ヘッダーの部分終わり
-------------------
横並びにする→cssで「float:left;」
・liにかければli要素のみ
・header-logoにかければロゴとli要素が並ぶ
ただし、そのままだとフッターにもかかってしまう。
ヘッダーだけでよい場合は、「.float-list□ li｛
-----------------------------
一般的には
HTMLのレイアウト
念頭＝ヘッダー、メイン、フッター、という構成
要素で構成。
・division
・要素をグループ化するもの。
----ヘッダーの要素
-------メインの要素
----フッターの要素
※タグ名→tadキー→で終了タグまで自動入力できる。
■Bloguruの方針
ブログルの著作権、肖像権についての回答
applications@pspinc.com
9月28日(水) 8:09 (23 時間前)
To 自分
お問合せいただいた件につきましての弊社の回答は
D）運営会社は関与せず。あくまでも開設者の自己責任
でございます。
著作権、肖像権につきましてはご自身でご確認、ご判断の上
ご使用下さい。
運営としては一切の責任を負いかねますのであらかじめご了承くださいますよう
お願い申し上げます。
ブログルサポート
■サイトから
YouTubeの動画を共有する際は、埋め込み用のコードを取得してください。
この埋め込みコードを利用して紹介したい動画を掲載すれば、基本的にはすべてのYouTube動画を著作権を害する事なくアップロードできます。
理由は「貼り付けたのはURLやHTMLコードであり、著作物である動画自体を掲載したわけではない」という前提ができるためです。YouTubeも、動画をアップロードしたユーザーも、動画を拡散されることにメリットがあると考えられるため、動画共有サイトを経由しての動画掲載は問題無いと言えます。
しかし、YouTubeなどにアップロードされている動画をダウンロードして、自分のブログやWebサイトに掲載する事はNGです。自分が最初にアップロードした動画ではなくても、違法アップロードを斡旋している事になるため、著作権侵害につながってしまいます。
よって、動画共有サイトから動画を掲載する際は埋め込みコードを利用して掲載する、自らWebページに動画をアップロードする際は自分が作成した動画だけ掲載して良いと考えておくのが良いでしょう。
■リンクを貼ることについて
リンクは著作物ではないので、著作権の許諾はいらない。
リンク貼り付け禁止の表記があれば違反。
リンク先が違法の場合、著作権侵害のほう助になる
■BGM
JASRAC管理下のBGMは許諾契約が必要。
背景でBGMとして流れていても違反になる
個人サイトで非営利の場合、サイト運営者が許諾を取っていれば
個人の許諾は必要なし
https://www.jasrac.or.jp/info/network/pickup/blog.html
事業目的の場合はだめ。
■ダンス
・ダンスにも著作権がある
■Twitter
＜リツイート＞
・著作者人格権の侵害にあたる
・スクショの引用は侵害にあたる。
・埋め込みは許可されている。
「ツイートの引用について。コンテンツを他の媒体やサービスで配給、放送、
配信、リツイート、プロモーションまたは公表することを目的として、
その他の企業、組織または個人に提供する権利が含まれていることに同意する
ものとします」。
・ただし独自で禁止しているアカウントもあるので注意
（カメラマン、画家、出版物など注意）
＜ツイートを埋め込む手順＞
※パソコンで操作可能、スマホからは不可。
通常モードの場合（白い背景）
ツイートの右上の「…」
→「ツイートを埋め込む」
→コードが表示されるので「CopyCode」
→ブログで表示させたいところで貼り付け。
ダークモードにしたい場合（黒い背景）
ツイートの右上の「…」
→「ツイートを埋め込む」
→コードが表示されるが、「set customization options」.
→標準がLightになっている→Darkに変更
→Update
→コードが表示されるので「CopyCode」
→ブログで表示させたいところで貼り付け。
※注意点
①表示速度が遅くなる
②Twitterの公式コードを使用する（違うコードにすると規約違反になることがある）
③著作権
HTMLの全体構造
■headとbody
head要素→ページに関する情報。ブラウザに表示されない。
body要素→実際に表示する内容
■構造の概要
--------------HTMLのバージョン宣言。
----------------------WEBページの設定に関するする情報。必ず3項目ある。
---------------------------①文字コード
Progate---------------------------②ページのタイトル名（ブラウザのタブに表示）
-----③CSSの読み込み指示
岡 裕美さん
すてきなアナウンサーです
※①文字コード（meta charset）
指定することで文字化けを防ぐことができる。
UTF-8はHTMLで推奨されているコード。
title>
- ブログルメンバーの方は下記のページからログインをお願いいたします。
ログイン
- まだブログルのメンバーでない方は下記のページから登録をお願いいたします。
新規ユーザー登録へ
