Search Bloguru posts

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

https://en.bloguru.com/love

🌹ヘタクソ but LOVE_Season4_🍳体調が悪いとき編

May
15
thread

People Who Wowed This Post

🌹うちの近所は猫が多い😻光進丸

Oct
3
thread
🌹うちの近所は猫が多い😻光進丸
広いシートに悠々と寝転ぶ。
まるで大海原に浮かぶ船。

命名：光進丸
#光進丸 #猫

People Who Wowed This Post

🌹マニュアル🌹WEB🌎文字を書く

Jan
1
thread
■文字に色を付ける

青にする
< h5 style="color:blue" >文字青< /h5>
文字青


■文字サイズを変える

h1のサイズ

 

h3のサイズ

 
h6のサイズ



フォントサイズを5にする
< p >< font size="5" >font size="5"< /font >< /p >

font size="5"



フォントサイズを7にする
< p >< font size="7" >Hello< /font >< /p >

font size="7"



https://www.sejuku.net/blog/83918


■太文字にする

< b >太文字< /b >
太文字
< ｂ >< p >< font size="3">フォントサイズ3で太文字の場合< /font >< /p >< /b >

フォントサイズ3で太文字の場合< /font>

 
#WEB #マニュアル #文字を書く

People Who Wowed This Post

🌹マニュアル🌹WEB🌎CSS

Jan
1
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🌎リスト表示

Jan
1
thread
< li >

ListItem
箇条書きしたいことばそれぞれを< li >と< /li >で囲む

< ul >で囲む→中黒。
unordered list:順序がないリスト

< ol >で囲む→数字の連番。
ordered list:順序があるリスト

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

リスト表示で中黒ありとなし

中黒あり

< ul >
< li >萬澄枝さん< /li >
< li >岡　裕美さん< /li >
< li >高石ひかりちゃん< /li >
< /ul >


  • 萬澄枝さん

  • 岡　裕美さん

  • 高石ひかりちゃん



中黒なし

li{
list-style:none;
}

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

< ul >
　 < li >HTML< /li >
　< li >PHP< /li >
　 < li >Ruby< /li >
< /ul >

内容は字下げする（インデントでずらす。tab）

↓


  • HTML

  • PHP

  • Ruby

#HTML #WEB #マニュアル #リスト

People Who Wowed This Post

🌹マニュアル🌹コンテンツの項目の目次

Jan
1
thread
#yoytube #マニュアル

People Who Wowed This Post

🌹マニュアル🌹youtube

Jan
1
thread
■レギュラーとショート

データによって、勝手にショートにかわる。
・縦横比が縦長～正方形まで
・60秒未満

■Youtube動画をブログに表示

①Youtube動画のウインドウの下の「共有」→「埋め込む」
　→「動画の埋め込み」で出てきた構文をコピー

②ブログで表示させたい箇所で、貼り付け。

※※ショートではなく通常のサイトを見る
共有→埋め込む→を押すと、コードが出てくる
ここで見えるのは最初からembed
これを丸ごとコピペ。
→通常サイトのサイズで表示される

■ループ再生

動画の上で右クリック→「ループ再生」にチェック

■再生リスト

動画再生のプレイリストを作ることができる。

最初のリストの作成
動画を選択→右下の「保存」→「+新しい再生リストを作成」

リストの編集（ﾘｽﾄに動画を追加）
追加したい動画を選択→右下の「保存」→再生リストを選択し、右上の×

■コメントを不可にする
「アカウント」→「Youtube studio」→左の「コンテンツ」→無効にしたい動画を選択（サムネイルを選択）
→画面下の「すべて表示」→「コメントと評価」→「コメントを無効にする」→「保存」

■いいねを無効にする
「アカウント」→「Youtube studio」→左の「コンテンツ」→無効にしたい動画を選択（サムネイルを選択）
→画面下の「すべて表示」→「この動画を高く評価した視聴者の数を表示する」のチェックを外す→「保存」

■タグをつける
「アカウント」→「Youtube studio」→左の「コンテンツ」→動画を選択（サムネイルを選択）
→左の「詳細」→「説明」の欄に入力（#**）→「保存」

■クリエイターツール
廃止。youtube studioに変更になっている。
表示させることはできそう。


#youtube #マニュアル

People Who Wowed This Post

🌹マニュアル🌹WEB🌎コード、構造

Jan
1
thread
■属性

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が必要）。

#WEB #コード #マニュアル #構造

People Who Wowed This Post

🌹マニュアル🌹WEB🌎HTML🌎余白指定

Jan
1
thread
■余白調整

-----------------
上下左右に値を反映させる

CSSで、padding:値;　→　上下左右にその値の余白ができる。

HTML
< div class="logo1" >
Progate
< /div >

CSS
.logo1{
padding: 20px;
}

---------------
特定の方向にのみ値を反映させる

HTML
< div class="logo1" >
Progate
< /div >

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;

#html #マニュアル #余白

People Who Wowed This Post

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

Jan
1
thread




  • 永尾まりやちゃん

  • 高石ひかりちゃん

  • 後藤恭子さま

    •



    ---------

    < div class="header" > フッター部を入力するよ
    < div class="header-logo" >Progate< /div > フッターのロゴはProgate
    < div class="header-list" > フッターのリストは、
    < ui > 箇条書きで、
    < li >永尾まりやちゃん< /li >
    < li >高石光ちゃん< /li >
    < li >後藤恭子さま< /li >
    < /ui > 箇条書き終わり
    < /div > フッターリストの部分終わり
    < /div > フッターの部分終わり

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

    横並びにする→cssで「float:left;」
    ・liにかければli要素のみ
    ・header-logoにかければロゴとli要素が並ぶ

    ただし、そのままだとフッターにもかかってしまう。
    ヘッダーだけでよい場合は、「.float-list□ li｛

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

    < !DOCTYPE html>
    < html>
    < head>
    < meta charset="utf-8">
    < title>Progate
    < link rel="stylesheet" href="stylesheet.css">
    < /head>
    < body>
    < div class="header">
    < div class="header-logo">Progate

    < div class="header-list">
    < ul>
    < li>プログラミングとは
    < li>学べるレッスン
    < li>お問い合わせ
    < /ul>
    < /div>
    < /div>

    < div class="main">

    < /div>

    < div class="footer">

    < div class="footer-logo">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;
    }



    People Who Wowed This Post

    Happy
    Sad
    Surprise