記事検索

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

https://jp.bloguru.com/love
  • ハッシュタグ「#html」の検索結果12件

フリースペース

🌹マニュアル🌎HTML🌎コンテンツ部分

スレッド
コンテンツ部分

< div class^"contents" > → コンテンツ部分をやるよ
< h3 >学べるレッスン< /h3 > → コンテンツ部分の見出し
< div class=" contents item”> → コンテンツアイテムひとつめ(左端とか)
 < img src="https--- " > → 画像はここにある
< P >HTML&CSS < /p > →画像の下のコメント

:

</div >
#HTML #コンテンツ #マニュアル

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

🌹マニュアル🌹WEB🌎リスト表示

スレッド
< 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 #マニュアル #リスト

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

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

スレッド
■余白調整

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

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

--------------
方向別に値を変える

書き方1)上下左右をきちんと表記する
.logo1 {
padding-top: 20px;
padding-right: 10px;
padding-bottom: 20px;
padding-left: 10px;

書き方2)省略計。上右下左(時計回り)で適用される
.logo1{
padding: 20px 10px 20px 10px;
}

書き方3)上下セットと左右セットとして表記する

.logo1{
padding: 20px 10px;

#html #マニュアル #余白

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

🌹マニュアル🌹WEB🌎HTML🌎ヘッダー

スレッド




  • 萬澄枝さん

  • モアメタルちゃん

  • 岡裕美さん





  • ---------

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

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

    一般的には
    < header >< /header >
    < footer >< /footer >
    #html #ヘッダー #マニュアル

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

    🌹マニュアル🌹WEB🌎HTMLのレイアウト

    スレッド
    HTMLのレイアウト

    念頭=ヘッダー、メイン、フッター、という構成

    < div >要素で構成。
    ・division
    ・要素をグループ化するもの。

    < div class="header" >----ヘッダーの< div >要素
    < /div >

    < div class="main >-------メインの< div >要素
    < /div >

    < div class="footer" >----フッターの< div >要素
    < /div >




    ※タグ名→tadキー→で終了タグまで自動入力できる。


    #HTML #マニュアル #レイアウト

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

    🌹マニュアル🌹WEB🌎HTMLの全体構造

    スレッド
    HTMLの全体構造

    ■headとbody

     head要素→ページに関する情報。ブラウザに表示されない。
     body要素→実際に表示する内容

    ■構造の概要

    < !DOCTYPE html >--------------HTMLのバージョン宣言。
    < html >
    < head >----------------------WEBページの設定に関するする情報。必ず3項目ある。
    < meta charset="utf-8" >---------------------------①文字コード
    < title>Progate---------------------------②ページのタイトル名(ブラウザのタブに表示)
    < link rel="stylesheet"href="stylesheet.css" >-----③CSSの読み込み指示
    < /head >
    < body >
    < h1 >岡 裕美さん< /h1 >
    < p >すてきなアナウンサーです< /p >
    < /body >
    < /html >



    ※①文字コード(meta charset)

    指定することで文字化けを防ぐことができる。
    UTF-8はHTMLで推奨されているコード。






    #HTML #WEB #マニュアル #全体構造

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

    🌹マニュアル🌎HTML🌎問い合わせフォーム

    スレッド
    問い合わせフォーム

    < form >
    < p >input要素< /p >→枠のタイトル
    < input>→入力欄(終了タグなし)
    < p>textarea< /p >→枠のタイトル
    < textarea >< /textarea >→複数行入力の入力欄
    < /form >

    < input type="submit" >→送信ボタン
    < input type="submit"value="保存" >
    ブラウザの言語で表示される(日本語ブラウザでは「送信」と表示)
    Value属性に任意の値を入指定すると変更できる。



    問い合わせフォーム


    input要素



    textarea





    →送信ボタン

    ブラウザの言語で表示される(日本語ブラウザでは「送信」と表示)
    Value属性に任意の値を入指定すると変更できる。






    #HTML #マニュアル #問い合わせ

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

    🌹マニュアル🌹HTML🌎メイン部分

    スレッド
    メイン部分の構造

    3つの要素で構成されいてる

    copy-container-------タイトルバナー部
    contents-------------メニュー部
    contact-form---------記述部



    #HTML #マニュアル #メイン

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

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

    スレッド
    ■基本


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





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

    ■そのままだと縦に並ぶ

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



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

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


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

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

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

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

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

    一般的には
    < header >< /header >
    < footer >< /footer >



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

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

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

    スレッド
    < 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 #マニュアル #リンク

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

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