今さら聞けないHTML　2020年06月01日 │ f@ctor

1. program

【Netlify】HTMLファイルを1秒でデプロイする方法

#1 　デプロイしたいフォルダを用意

“`
pokemon-site/
|- src/
└ img/
└ poke.jpg
|- index.html
|- styles.css
“`

“index.html“にJavaScriptも書いています。

#2　Netlifyにアクセスしてドラッグ&ドロップ

[Netlify Drop](https://app.netlify.com/drop) にアクセスし、「Drag and drop your site folder here」と書かれている部分に

元記事を表示

html学習がてらコードなどまとめてみた

# はじめに
今回は完全備忘録です。
## 階層構造について
この「〇〇ファイル」はここと決まっているらしい
以下表がその通り

| ファイル | Htmlファイル | 画像ファイル | CSSファイル | JavaScriptファイル |
|:———–|————:|————:|————:|————:|
|フォルダ|階層トップ |images | styles | scripts |

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/397376/9ab24c31-54c4-7780-68d4-6d28e6495439.png)
[Web サイトのデイレクトリ構成参照](http://www.asahi-net.or.jp/~gx4s-kmgi/web05.html)
## コードについて
### ページのタイトル

“`html:test.html
Test
“`
### 段

元記事を表示

AMP はじめ方

## この内容について
この内容は、AMPをはじめたい方に向けた基礎的な記事になります。

## AMPとは ( アンプ )
**A**ccelerated **M**obile **P**agesの略で、
モバイル端末向けに最適化したWebページの読み込みを高速化できるフレームワーク。
AMPは、WebページのデータをGoogle側がキャッシュしてくれており、リクエストがあった場合に
そのデータをレスポンスするので高速化が実現されています。

ちなみにAMPは、2015年10月7日に発表された新しめな技術です。

[AMP公式サイト](https://amp.dev/ja/)

## 導入方法
### HTMLファイルを用意する
作成するAMPページ用にHTMLファイルを用意します。
この後の説明は全てそのHTMLファイル内に記述してください。

### 必要な記述をする
#### DOCTYPE宣言

“`html:HTML

“`

#### htmlタグ
ページをAMPコンテンツとして識別します。
html開始タグの小なりの前に「⚡️(雷マーク

元記事を表示

input type=”text”からtextareaに変更した時のvalueどうするの問題解決メモ

表題の対応メモです。

“`html

“`

こんな感じのを複数行の入力フィールドにしたい場合、textareaにするのが手っ取り早いですが、
\タグにvalueは使えないので。</p> <p>“`html<br /> <textarea placeholder="hoge" name="hoge">ああああ
“`

タグで囲むことで解決出来ます。</p> <p>##参考</p> <p>http://www.htmq.com/html/textarea.shtml </p></blockquote> </blockquote> <aside class='widget widget-post'> <div class='tag-cloud-link'>HTML</div> </aside> <div><a style='width:100%;' class='btn__link' href='https://qiita.com/shimajiri/items/55b65100dc2f23e7c804'>元記事を表示</a></div> <h3 id="outline__0_0_5"><a href='https://qiita.com/TOMARU4400/items/a6b22f4b3cf33597f661'>【初心者向け】【Javascrript】FizzBuzz問題</a></h3> <blockquote><p> 今回はFizzBuzz問題をHTMLのscriptタグ内に書きました。</p> <p># FizzBuzz問題とは？<br /> 1から30まで順に数えて出力して行き、3で割り切れる数は「Fizz」5で割り切れる数は「Buzz」両方で割り切れる数は「FizzBuzz」と出力する、ようにプログラムを書く問題です。</p> <p>これが書けるか書けないかでプログラマー志願者を仕分けられるようになったようです。実際今でも使われていますから押さえておいて損はないと思います。[FizzBuzz詳細](https://ja.wikipedia.org/wiki/Fizz_Buzz)</p> <p># 私が書いたコード</p> <p>“`html:sample.html<br /> <!DOCTYPE html><br /> <html lang="ja"><br /> <head><br /> <meta charset=UTF-8><br /> <title>loop</title><br /> </head><br /> <body><br /> <script></p> <p> var i = 0; </p></blockquote> </blockquote> <aside class='widget widget-post'> <div class='tag-cloud-link'>HTML</div> <div class='tag-cloud-link'>JavaScript</div> <div class='tag-cloud-link'>初心者</div> </aside> <div><a style='width:100%;' class='btn__link' href='https://qiita.com/TOMARU4400/items/a6b22f4b3cf33597f661'>元記事を表示</a></div> <h3 id="outline__0_0_6"><a href='https://qiita.com/yudapinokio/items/05a368d9afe8c5cfda27'>初心者によるプログラミング学習ログ 331日目</a></h3> <blockquote><p>#100日チャレンジの331日目<br /> twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。<br /> すでに100日超えましたが、継続。<br /> 100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。<br /> 331日目は、</p> <blockquote class="twitter-tweet"> <p lang="ja" dir="ltr">おはようございます<br />331日目　8h<br />・ポートフォリオ作成<br />cssのアニメーションいれたり、なんかいろいろ。<a href="https://twitter.com/hashtag/%E6%97%A9%E8%B5%B7%E3%81%8D%E3%83%81%E3%83%A3%E3%83%AC%E3%83%B3%E3%82%B8?src=hash&ref_src=twsrc%5Etfw">#早起きチャレンジ</a><a href="https://twitter.com/hashtag/%E9%A7%86%E3%81%91%E5%87%BA%E3%81%97%E3%82%A8%E3%83%B3</p></blockquote> </blockquote> <aside class='widget widget-post'> <div class='tag-cloud-link'>HTML</div> <div class='tag-cloud-link'>CSS</div> </aside> <div><a style='width:100%;' class='btn__link' href='https://qiita.com/yudapinokio/items/05a368d9afe8c5cfda27'>元記事を表示</a></div> <h3 id="outline__0_0_7"><a href='https://qiita.com/masa_mf3qt/items/305c29b98eca47b0ab82'>JavaScriptでチャットボットを作る</a></h3> <blockquote><p>#JavaScriptでチャットボットを作る<br /> ##はじめに<br /> 今回作るのは、簡単に質問応答してくれるチャットボットです。<br /> 言語はHTML，CSS，JavaScript（約50行）です。<br /> 応用次第で、より複雑なものを作ることも、もちろん可能です！</p> <p>##目標<br /> - 自分の名前を送信したら、それを含めたメッセージが返す<br /> - 自分にランダムなメッセージを返す<br /> - （様々な会話パターンを作ってみる）<br /> - （相手から選択肢のボタンを送信され、それぞれに応じた結果を返す）</p> <p>##この記事の対象者<br /> JavaScriptで様々なものを作ってみたい人。チャットボットやAIに興味がある人などなど。<br /> [チャットボット](http://mf3px.sakura.ne.jp/chatbot/)</p> <p>ここでは必要最低限の部分だけ説明します。**詳細は下のCodePenをご覧ください**。</p> <p class="codepen" data-height="413" data-theme-id="default" data-default-tab="css,result" data-user="masa_mf3rs" da</blockquote> </blockquote> <aside class='widget widget-post'> <div class='tag-cloud-link'>HTML</div> <div class='tag-cloud-link'>JavaScript</div> <div class='tag-cloud-link'>AI</div> <div class='tag-cloud-link'>チャット</div> <div class='tag-cloud-link'>チャットボット</div> </aside> <div><a style='width:100%;' class='btn__link' href='https://qiita.com/masa_mf3qt/items/305c29b98eca47b0ab82'>元記事を表示</a></div> <h3 id="outline__0_0_8"><a href='https://qiita.com/megumi_ohashi/items/5196f6bfd9c622af9ace'>2020/05/31 プログラミング学習1日目メモ</a></h3> <blockquote><p># 本日の学習範囲<br /> ### ドットインストール<br /> ・HTML/CSSの学習環境を整えよう [macOS編] #01〜#05<br /> ・はじめてのHTML #01〜#07<br /> （学習時間：2時間）<br /> ## 環境構築<br /> ドットインストールで推奨していた<br /> ・Google Chrome（ブラウザ）<br /> ・Visual Studio Code（コードエディター）<br /> ・Ricty Diminished(フォント)<br /> を準備した<br /> ### Visual Studio Code<br /> https://azure.microsoft.com/ja-jp/products/visual-studio-code/<br /> Microsoftが提供しているコードエディター<br /> Windows以外でも動作する<br /> ### Ricty Diminished<br /> https://rictyfonts.github.io/diminished<br /> プログラミング用フォント<br /> ## HTML学習メモ<br /> ### HTML<br /> Hyper Text Markup Languageの略<br /> Webページ作成に使用するマークアップ言語<br /> ### マークアップ<br /> 文章をタグで囲むことで、文章を構造化す</p></blockquote> </blockquote> <aside class='widget widget-post'> <div class='tag-cloud-link'>HTML</div> <div class='tag-cloud-link'>ドットインストール</div> <div class='tag-cloud-link'>VSCode</div> <div class='tag-cloud-link'>VisualStudioCode</div> </aside> <div><a style='width:100%;' class='btn__link' href='https://qiita.com/megumi_ohashi/items/5196f6bfd9c622af9ace'>元記事を表示</a></div> <h3 id="outline__0_0_9"><a href='https://qiita.com/kazuko___3o3___/items/a6c35572530d1d0b4abe'>【マークアップ】デザインボタン</a></h3> <blockquote><p># 概要<br /> ボタンに少しデザインを付けることで、サイトがカッコ良くなる〜:laughing:<br /> と思い実装しました！</p> <p>今回紹介するのは、立体的に見えて押し込み式のボタンとなります:bulb:</p> <p># 実装<br /> ```HTML:views/index.html.haml<br /> .btn<br /> .new__dispaly--commit<br /> = f.submit "Submit", class:"commit-btn"<br /> ```</p> <p>```scss:index.scss<br /> .btn {<br /> input.commit-btn {<br /> display: inline-block;<br /> position: relative;<br /> padding: 0.5em 1.4em;<br /> text-decoration: none;<br /> background: #1d4d8b;/*ボタン色*/<br /> color: $white;<br /> border-bottom: solid 5px #123158;/*ボタンの下　色*/<br /> border-right: sol</p></blockquote> </blockquote> <aside class='widget widget-post'> <div class='tag-cloud-link'>HTML</div> <div class='tag-cloud-link'>Rails</div> <div class='tag-cloud-link'>scss</div> </aside> <div><a style='width:100%;' class='btn__link' href='https://qiita.com/kazuko___3o3___/items/a6c35572530d1d0b4abe'>元記事を表示</a></div> <h3 id="outline__0_0_10"><a href='https://qiita.com/ishi720/items/6163b2a23c7a6ce89754'>divタグをカスタマイズしてWYSIWYGエディタっぽいものを自作する</a></h3> <blockquote><p># 概要</p> <p>divタグをカスタマイズしてWYSIWYGエディタっぽいものを作りたい。<br /> WYSIWYGエディタ**っぽい**ものということで、WEBサイトの装飾ごとコピペができるようになるまで作ります。</p> <p># 環境<br /> - html<br /> - scss<br /> - javascript</p> <p># 実装</p> <p>### まずは見た目をテキストエリアに近づける</p> <p>```html:html</p> <div class="textarea"></div> <p>```<br /> ```scss:scss<br /> .textarea {<br /> width: 200px;<br /> height: 100px;<br /> border: solid 1px #a9a9a9;<br /> padding: 3px;<br /> overflow: auto;<br /> }<br /> ```</p> <p>### 入力を可能にする</p> <p>devタグに`contenteditable="true"`を指定すると入力できるようなります</p> <p>```html:html</p> <div class="textarea" contenteditable="true" ></div> <p>```<br /> ```scss:</p></blockquote> </blockquote> <aside class='widget widget-post'> <div class='tag-cloud-link'>HTML</div> <div class='tag-cloud-link'>wysiwyg</div> </aside> <div><a style='width:100%;' class='btn__link' href='https://qiita.com/ishi720/items/6163b2a23c7a6ce89754'>元記事を表示</a></div> <h3 id="outline__0_0_11"><a href='https://qiita.com/Naoki33/items/e4e51edc8f75cb37c13e'>Django　ページネーションについて教えていただきたいです</a></h3> <blockquote><p>Python Djangoという参考書で勉強していたのですが<br /> ４−３ページネーションの「ページの移動はどうするの？」で躓いてます。<br /> firstはちゃんと動くのですが、prev,next,lastがどうしてもPage not foundになってしまいます。<br /> 何方か教えてくれませんか？<br /> ソースはこんな感じです<br /> 初投稿なのでうまく使えてないと思います。すみません<br /> django_app/hello/url.py<br /> from django.urls import path<br /> from . import views</p> <p>urlpatterns=[<br /> path('',views.index,name='index'),<br /> path('<int:num>',views.index,name='index'),<br /> path('create',views.create,name='create'),<br /> path('edit/<int:num>',views.edit,name='edit'),<br /> path('delete/<int:num>',views.delete,name='</p></blockquote> </blockquote> <aside class='widget widget-post'> <div class='tag-cloud-link'>Python</div> <div class='tag-cloud-link'>HTML</div> <div class='tag-cloud-link'>Django</div> <div class='tag-cloud-link'>ページネーション</div> </aside> <div><a style='width:100%;' class='btn__link' href='https://qiita.com/Naoki33/items/e4e51edc8f75cb37c13e'>元記事を表示</a></div> <h3 id="outline__0_0_12"><a href='https://qiita.com/161abcd/items/764a9d23da2751d1bac5'>webサイトを中心に配置する</a></h3> <blockquote><p>#やり方<br /> 横幅の大きさを指定します。横幅の大きさを指定しないと中央寄せできません。marginはautoにします。すると中央に要素を配置できます。</p> <p>```html<br /> .content {<br /> max-width: 500px;<br /> margin: auto;<br /> }<br /> ```</p> <p>#ソースコード<br /> ```html<br /> <!DOCTYPE html><br /> <html><br /> <head><br /> <meta name="viewport" content="width=device-width, initial-scale=1"></p> <style> body { background: #555; }</p> <p>.content { max-width: 500px; margin: auto; background: white; padding: 10px; } </style> <p></head><br /> <body></p> <div class="content"> <h1>This page is horizontally centered on screens that are wider than 500 </p></blockquote> </blockquote> <aside class='widget widget-post'> <div class='tag-cloud-link'>HTML</div> </aside> <div><a style='width:100%;' class='btn__link' href='https://qiita.com/161abcd/items/764a9d23da2751d1bac5'>元記事を表示</a></div> <h3 id="outline__0_0_13"><a href='https://qiita.com/teradonburi/items/1e23ff5c2941e8801b84'>中二病CSS</a></h3> <blockquote><p>かっこいいエフェクトをCSSアニメーションだけで作れないかなと色々模索したので<br /> いくつか作ったサンプルを載せておきます。<br /> Chromeで動作はしますが、ブラウザによっては動かないと思います。</p> <p>過去にこんな記事も書きましたのでよかったらこちらもどうそ<br /> [イケてるアニメーションを研究してみる](https://qiita.com/teradonburi/items/677509e4ce9b752bf6a2)</p> <p># カラー→セピア<br /> 画像を退廃的な感じに見せます。<br /> ブラーのエフェクトとノイズ画像を重ねることで更に劣化の表現を増しています。</p> <p class="codepen" data-height="265" data-theme-id="light" data-default-tab="css,result" data-user="teradonburi" data-slug-hash="bGVXgmo" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-c</blockquote> </blockquote> <aside class='widget widget-post'> <div class='tag-cloud-link'>HTML</div> <div class='tag-cloud-link'>CSS</div> <div class='tag-cloud-link'>CSS3</div> </aside> <div><a style='width:100%;' class='btn__link' href='https://qiita.com/teradonburi/items/1e23ff5c2941e8801b84'>元記事を表示</a></div> <h3 id="outline__0_0_14"><a href='https://qiita.com/shi_ma_yu/items/6fc6f16fff83f2b6687e'>予測変換を非表示にする</a></h3> <blockquote><p>##フォームの予測変換機能をオフにする<br /> 問題を解くアプリを作成しているときに、フォームに文字を打ち込むときに予測変換が出てしまい、答えが事前にわかってしまうケースがあったため調べた。<br /> ##結果<br /> ＜input＞のautocomplete属性をoffにすると予測変換が消えるみたいです。<br /> `autocomplete: 'off'`<br /> 予測変換のことをオートコンプリートと言うと。</p> <p>```ruby:form.rb<br /> <%= text_field_tag "word#{word.id}","", {class: 'form-control',autocomplete: 'off'} %><br /> ``` </p></blockquote> </blockquote> <aside class='widget widget-post'> <div class='tag-cloud-link'>Ruby</div> <div class='tag-cloud-link'>HTML</div> </aside> <div><a style='width:100%;' class='btn__link' href='https://qiita.com/shi_ma_yu/items/6fc6f16fff83f2b6687e'>元記事を表示</a></div> <h3 id="outline__0_0_15"><a href='https://qiita.com/kkkei257/items/b3292b443699ecfb148f'>Djangoを用いてhtmlからPythonファイルを実行する</a></h3> <blockquote><p>#ここで書くこと<br /> この記事では「Djangoを用いてWebページからサーバ上に用意したPythonファイルを実行し、htmlから渡したデータをcsvファイルに出力する方法」について書いています。</p> <p>また、執筆環境は<br /> OS：macOS Catalina バージョン 10.15.4<br /> Python：3.7.6<br /> Django：3.0.3<br /> となっています。</p> <p>#Djangoについて<br /> [前回の記事](https://qiita.com/kkkei257/items/40fa58849125e389f466)にてDjangoのインストール→htmlの表示までの流れについて書かせていただきましたので、Djangoの導入等についてはそちらをご参考ください。</p> <p>#Pythonファイルの準備<br /> ###Pythonファイルの作成<br /> まず、実行したいPythonファイルをDjangoのサーバ上に用意します。説明のために今回は以下のようなPythonファイルを用意します。</p> <p>```write_data.py<br /> # coding:utf-8<br /> import os<br /> import csv</p> <p># htmlからのデータをcsvファ</p></blockquote> </blockquote> <aside class='widget widget-post'> <div class='tag-cloud-link'>Python</div> <div class='tag-cloud-link'>HTML</div> <div class='tag-cloud-link'>JavaScript</div> <div class='tag-cloud-link'>Django</div> </aside> <div><a style='width:100%;' class='btn__link' href='https://qiita.com/kkkei257/items/b3292b443699ecfb148f'>元記事を表示</a></div> <h3 id="outline__0_0_16"><a href='https://qiita.com/kazuko___3o3___/items/37579db477c5f398c472'>マークアップ共通化：アクション毎にurlパスの変更</a></h3> <blockquote><p># 概要<br /> 前回の記事で、マークアップの共通化を掲載しました<br /> コチラ↓↓<br /> https://qiita.com/kazuko___3o3___/items/019174474f4f258ba19b</p> <p>実は、この記事がメインでございましたっ:triumph:</p> <p>newアクション、editアクション毎に指定したいURLが異なり、最初はif文でコードを書くもエラー続きでした:cold_sweat:<br /> その解消法を備忘録として残します！</p> <p># 事象<br /> 以前、【form_forが自動的に生成してくれるパスは複数形のみ】という記事を書かせていただきました（https://qiita.com/kazuko___3o3___/items/cf8e6966772d629d5927 ）</p> <p>そのため、HTMLは下記のように記載されています。</p> <p>```html:_form.html.haml<br /> #省略<br /> .new_display<br /> = form_for @task, url: group_tasks_path do |f|<br /> ＃省略<br /> ```</p> <p>【group_tasks_path】はnewアクションの時のみに有効で、edi</p></blockquote> </blockquote> <aside class='widget widget-post'> <div class='tag-cloud-link'>Ruby</div> <div class='tag-cloud-link'>HTML</div> <div class='tag-cloud-link'>Rails</div> </aside> <div><a style='width:100%;' class='btn__link' href='https://qiita.com/kazuko___3o3___/items/37579db477c5f398c472'>元記事を表示</a></div> <h3 id="outline__0_0_17"><a href='https://qiita.com/kazuko___3o3___/items/019174474f4f258ba19b'>マークアップの共通化【new,edit】</a></h3> <blockquote><p># 概要<br /> 新規登録画面(newアクション)や編集画面(editアクション)は登録項目は同じなので画面共通にしちゃた方が楽:relaxed:ということで備忘録のため残します。</p> <p># 変更点<br /> ①viewフォルダ内に _form.html.hamlファイルを作成し、表示内容を記載する<br /> ②viewフォルダ内にある edit.html.hamlと new.html.hamlに下記のコードを記載する</p> <p>```html:new.html.haml/edit.html.haml<br /> = render "form"<br /> ```</p> <p># 感想<br /> あら！簡単:smile:<br /> 何ということでしょう！いとも簡単に画面の表示ができました！</p> <p>しかし、、、<br /> 私が実装しているアプリには問題が発生。。。<br /> form_forにurlを指定していたためエラーが発生してしまいました。。。。<br /> こちらの解決法は下記URLをご覧くださいませ:rolling_eyes:</p> <p>URL<br /> https://qiita.com/kazuko___3o3___/items/37579db477c5f398c472</p> </blockquote> </blockquote> <aside class='widget widget-post'> <div class='tag-cloud-link'>HTML</div> <div class='tag-cloud-link'>Rails</div> </aside> <div><a style='width:100%;' class='btn__link' href='https://qiita.com/kazuko___3o3___/items/019174474f4f258ba19b'>元記事を表示</a></div> <h3 id="outline__0_0_18"><a href='https://qiita.com/yomogenium/items/881a55417dc047756e78'>Javascriptをユーザーから見られないようにしてみた。</a></h3> <blockquote><p> #はじめに</p> <p>javascriptはいやおうなしに見られてしまうので、<br /> APIキーとかソースとか隠せないかな、と考えて色々調べてみた結果、ここに行き着いた。</p> <p>現状のままではPHPにJsソースを書くことになる欠点がある……ので、これの対策verもそのうち記事にします。</p> <p>※完成形のコードは[Github](https://github.com/Yomogenium/SourceHide-lite)に置いています。<br /> 「Clone or download」→「Download ZIP」でダウンロードできます。<br /> PHPを含むので、PHPが動く実行環境が必要というのは言わずもがな。</p> <p>#どうやって実装するの？</p> <p>まずもって、ユーザーがJavascriptのソースコードをのぞき見する主な手段は以下の２パターンある。</p> <p>- URLバーに該当するJsのURLを直接打ち込んで、ページとして見る<br /> - 右クリック→検証→左メニューの「Sources」から閲覧する</p> <p>逆に言えば、今回やるべきはこの２つの手段を両方とも潰すことである。<br /> それを踏まえて、本システムの要件は以下のとおりとする。</p> <p>###要</p></blockquote> </blockquote> <aside class='widget widget-post'> <div class='tag-cloud-link'>PHP</div> <div class='tag-cloud-link'>HTML</div> <div class='tag-cloud-link'>JavaScript</div> </aside> <div><a style='width:100%;' class='btn__link' href='https://qiita.com/yomogenium/items/881a55417dc047756e78'>元記事を表示</a></div> <h3 id="outline__0_0_19"><a href='https://qiita.com/yudapinokio/items/6dcd06d123fb5970fdc1'>初心者によるプログラミング学習ログ 330日目</a></h3> <blockquote><p>#100日チャレンジの330日目<br /> twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。<br /> すでに100日超えましたが、継続。<br /> 100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。<br /> 330日目は、</p> <blockquote class="twitter-tweet"> <p lang="ja" dir="ltr">おはようございます<br />330日目 2h<br />・ポートフォリオ作成2h:制作物一覧部分作成<a href="https://twitter.com/hashtag/%E6%97%A9%E8%B5%B7%E3%81%8D%E3%83%81%E3%83%A3%E3%83%AC%E3%83%B3%E3%82%B8?src=hash&ref_src=twsrc%5Etfw">#早起きチャレンジ</a><a href="https://twitter.com/hashtag/%E9%A7%86%E3%81%91%E5%87%BA%E3%81%97%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8</p></blockquote> </blockquote> <aside class='widget widget-post'> <div class='tag-cloud-link'>HTML</div> <div class='tag-cloud-link'>CSS</div> </aside> <div><a style='width:100%;' class='btn__link' href='https://qiita.com/yudapinokio/items/6dcd06d123fb5970fdc1'>元記事を表示</a></div> <h3 id="outline__0_0_20"><a href='https://qiita.com/mzmz__02/items/b5ff6467b31226c27622'>HTML&CSS~初級編~, JavaScript Ⅰ,Ⅱ,Ⅲ</a></h3> <blockquote><p># プログラミングの勉強日記<br /> 今までのまとめ（2020年5月14日から5月23日まで）<br /> これから勉強した内容をQiitaでまとめていきたいと思います。</p> <p>## HTML&CSS~初級編~</p> <p>##### HTMLの全体構造</p> <p>```HTML:全体構造<br /> <!DOCTYPE html>　<br /> <html><br /> <head><br /> </head><br /> <body></p> <h1 id="outline__1">program</h1> <p>HTML</p> <p> </body><br /> </html><br /> ```</p> <p>1行目はDOCTYPE宣言と呼ばれるHTMLのバージョンを宣言する<br /> <head>要素にはwebページの設定に関する情報（ここに記述した内容はWebページには表示されない）<br /> <body>要素の中には実際に表示したい内容を入れる</p> <p>######paddingとmarginの使い分け</p> <p>〇padding：borderの内側の余白を作る<br /> 〇margin：borderの外側の余白を作る</p> <p>1.paddingは背景の色や背景画像が設定されるが、marginで設定された余白には背景の色や背景画像が表示されない。<br /> 　→背景画像や背景の</p></blockquote> </blockquote> <aside class='widget widget-post'> <div class='tag-cloud-link'>HTML</div> <div class='tag-cloud-link'>CSS</div> <div class='tag-cloud-link'>JavaScript</div> <div class='tag-cloud-link'>プログラミング勉強日記</div> </aside> <div><a style='width:100%;' class='btn__link' href='https://qiita.com/mzmz__02/items/b5ff6467b31226c27622'>元記事を表示</a></div> </div> </section>  <aside> <ul class="socialList"> <li class="socialList__item"><a class="socialList__link icon-facebook" href="http://www.facebook.com/sharer.php?u=https%3A%2F%2Fmiofactor.com%2F2020%2F06%2F01%2Fpost-5315%2F&t=%E4%BB%8A%E3%81%95%E3%82%89%E8%81%9E%E3%81%91%E3%81%AA%E3%81%84HTML%E3%80%802020%E5%B9%B406%E6%9C%8801%E6%97%A5" target="_blank" title="Facebookで共有"></a></li><li class="socialList__item"><a class="socialList__link icon-twitter" href="http://twitter.com/intent/tweet?text=%E4%BB%8A%E3%81%95%E3%82%89%E8%81%9E%E3%81%91%E3%81%AA%E3%81%84HTML%E3%80%802020%E5%B9%B406%E6%9C%8801%E6%97%A5&https%3A%2F%2Fmiofactor.com%2F2020%2F06%2F01%2Fpost-5315%2F&url=https%3A%2F%2Fmiofactor.com%2F2020%2F06%2F01%2Fpost-5315%2F" target="_blank" title="Twitterで共有"></a></li><li class="socialList__item"><a class="socialList__link icon-line" href="http://line.naver.jp/R/msg/text/?%E4%BB%8A%E3%81%95%E3%82%89%E8%81%9E%E3%81%91%E3%81%AA%E3%81%84HTML%E3%80%802020%E5%B9%B406%E6%9C%8801%E6%97%A5%0D%0Ahttps%3A%2F%2Fmiofactor.com%2F2020%2F06%2F01%2Fpost-5315%2F" target="_blank" title="LINEで送る"></a></li></ul> </aside>   <aside class="widgetPost widgetPost-bottom"><aside class="widget widget-post"><h2 class="heading heading-primary">タグ</h2><div class="tagcloud"><a href="https://miofactor.com/tag/%e3%81%9d%e3%81%ae%e4%bb%96/" class="tag-cloud-link tag-link-13 tag-link-position-1" style="font-size: 8pt;" aria-label="その他 (1個の項目)">その他</a></div> </aside></aside>   <aside class="related"><h2 class="heading heading-primary">関連する記事</h2><ul class="related__list"> <li class="related__item"> <a class="related__imgLink" href="https://miofactor.com/2021/01/01/post-9527/" title="アマゾン売れ筋ランキング（本）2021年01月01日"> <img src="https://miofactor.com/wp-content/themes/lionmedia/img/img_no_thumbnail.gif" alt="NO IMAGE" width="160" height="160" > </a> <h3 class="related__title"> <a href="https://miofactor.com/2021/01/01/post-9527/">アマゾン売れ筋ランキング（本）2021年01月01日</a> <span class="icon-calendar">2021.01.01</span> </h3> <p class="related__contents">目次 1. アマゾン売れ筋ランキング（本）アマゾン売れ筋ランキング（本） #1 ￥1,320 ブスな自分殺すの結構がんばってる。 #2 ￥968 絶[…]</p> </li> <li class="related__item"> <a class="related__imgLink" href="https://miofactor.com/2021/06/24/post-11394/" title="WEBエンジニアが読んでおきたい技術書　2021年06月24日"> <img src="https://miofactor.com/wp-content/uploads/2019/11/967637031-book-168824_1920-YEnY-1920x1280-MM-100-150x150.jpg" alt="WEBエンジニアが読んでおきたい技術書　2021年06月24日" width="150" height="150" > </a> <h3 class="related__title"> <a href="https://miofactor.com/2021/06/24/post-11394/">WEBエンジニアが読んでおきたい技術書　2021年06月24日</a> <span class="icon-calendar">2021.06.24</span> </h3> <p class="related__contents">目次 1. [プリンシプルオブプログラミング] セオリーと基本原則2. [プリンシプルオブプログラミング] プログラミングに特効薬は無い。コードの原則[…]</p> </li> <li class="related__item"> <a class="related__imgLink" href="https://miofactor.com/2024/03/13/post-31724/" title="Node.js関連のことを調べてみた"> <img src="https://miofactor.com/wp-content/uploads/2019/10/nodejs-150x150.png" alt="Node.js関連のことを調べてみた" width="150" height="150" > </a> <h3 class="related__title"> <a href="https://miofactor.com/2024/03/13/post-31724/">Node.js関連のことを調べてみた</a> <span class="icon-calendar">2024.03.13</span> </h3> <p class="related__contents">目次 1. SendGrid Webhookを用いて送信失敗メールをキャッチする2. Lambda Node.js serverlessを使うほどでも[…]</p> </li> </ul></aside>      </main>   <div class="l-sidebar"> <aside class="widget"> <div class="searchBox"> <form class="searchBox__form" method="get" target="_top" action="https://miofactor.com/" > <input class="searchBox__input" type="text" maxlength="50" name="s" placeholder="記事検索"><button class="searchBox__submit icon-search" type="submit" value="search"> </button> </form> </div></aside><aside class="widget"><h2 class="heading heading-widget">Category</h2> <ul> <li class="cat-item cat-item-1"><a href="https://miofactor.com/category/other/">OTHER</a> </li> </ul> </aside><aside class="widget"><h2 class="heading heading-widget">Back number</h2> <ul> <li><a href='https://miofactor.com/2024/09/'>2024年9月</a></li> <li><a href='https://miofactor.com/2024/08/'>2024年8月</a></li> <li><a href='https://miofactor.com/2024/07/'>2024年7月</a></li> <li><a href='https://miofactor.com/2024/06/'>2024年6月</a></li> <li><a href='https://miofactor.com/2024/05/'>2024年5月</a></li> <li><a href='https://miofactor.com/2024/04/'>2024年4月</a></li> <li><a href='https://miofactor.com/2024/03/'>2024年3月</a></li> <li><a href='https://miofactor.com/2024/02/'>2024年2月</a></li> <li><a href='https://miofactor.com/2024/01/'>2024年1月</a></li> <li><a href='https://miofactor.com/2023/12/'>2023年12月</a></li> <li><a href='https://miofactor.com/2023/11/'>2023年11月</a></li> <li><a href='https://miofactor.com/2023/10/'>2023年10月</a></li> <li><a href='https://miofactor.com/2023/09/'>2023年9月</a></li> <li><a href='https://miofactor.com/2023/08/'>2023年8月</a></li> <li><a href='https://miofactor.com/2023/07/'>2023年7月</a></li> <li><a href='https://miofactor.com/2023/04/'>2023年4月</a></li> <li><a href='https://miofactor.com/2023/03/'>2023年3月</a></li> <li><a href='https://miofactor.com/2023/02/'>2023年2月</a></li> <li><a href='https://miofactor.com/2023/01/'>2023年1月</a></li> <li><a href='https://miofactor.com/2022/12/'>2022年12月</a></li> <li><a href='https://miofactor.com/2022/11/'>2022年11月</a></li> <li><a href='https://miofactor.com/2022/10/'>2022年10月</a></li> <li><a href='https://miofactor.com/2022/09/'>2022年9月</a></li> <li><a href='https://miofactor.com/2022/08/'>2022年8月</a></li> <li><a href='https://miofactor.com/2022/07/'>2022年7月</a></li> <li><a href='https://miofactor.com/2022/06/'>2022年6月</a></li> <li><a href='https://miofactor.com/2022/05/'>2022年5月</a></li> <li><a href='https://miofactor.com/2022/04/'>2022年4月</a></li> <li><a href='https://miofactor.com/2022/03/'>2022年3月</a></li> <li><a href='https://miofactor.com/2022/02/'>2022年2月</a></li> <li><a href='https://miofactor.com/2022/01/'>2022年1月</a></li> <li><a href='https://miofactor.com/2021/12/'>2021年12月</a></li> <li><a href='https://miofactor.com/2021/11/'>2021年11月</a></li> <li><a href='https://miofactor.com/2021/10/'>2021年10月</a></li> <li><a href='https://miofactor.com/2021/09/'>2021年9月</a></li> <li><a href='https://miofactor.com/2021/08/'>2021年8月</a></li> <li><a href='https://miofactor.com/2021/07/'>2021年7月</a></li> <li><a href='https://miofactor.com/2021/06/'>2021年6月</a></li> <li><a href='https://miofactor.com/2021/05/'>2021年5月</a></li> <li><a href='https://miofactor.com/2021/04/'>2021年4月</a></li> <li><a href='https://miofactor.com/2021/03/'>2021年3月</a></li> <li><a href='https://miofactor.com/2021/02/'>2021年2月</a></li> <li><a href='https://miofactor.com/2021/01/'>2021年1月</a></li> <li><a href='https://miofactor.com/2020/12/'>2020年12月</a></li> <li><a href='https://miofactor.com/2020/11/'>2020年11月</a></li> <li><a href='https://miofactor.com/2020/10/'>2020年10月</a></li> <li><a href='https://miofactor.com/2020/09/'>2020年9月</a></li> <li><a href='https://miofactor.com/2020/08/'>2020年8月</a></li> <li><a href='https://miofactor.com/2020/07/'>2020年7月</a></li> <li><a href='https://miofactor.com/2020/06/'>2020年6月</a></li> <li><a href='https://miofactor.com/2020/05/'>2020年5月</a></li> <li><a href='https://miofactor.com/2020/04/'>2020年4月</a></li> <li><a href='https://miofactor.com/2020/03/'>2020年3月</a></li> <li><a href='https://miofactor.com/2020/02/'>2020年2月</a></li> <li><a href='https://miofactor.com/2020/01/'>2020年1月</a></li> <li><a href='https://miofactor.com/2019/12/'>2019年12月</a></li> <li><a href='https://miofactor.com/2019/11/'>2019年11月</a></li> <li><a href='https://miofactor.com/2019/10/'>2019年10月</a></li> </ul> </aside> </div>  </div>  <div class="categoryBox"> <div class="container"> <h2 class="heading heading-primary"> <span class="heading__bg u-txtShdw bgc-darkgray">OTHER</span>カテゴリの最新記事 </h2> <ul class="categoryBox__list"> <li class="categoryBox__item"> <div class="eyecatch eyecatch-archive"> <a href="https://miofactor.com/2024/09/19/post-36890/"> <img src="https://miofactor.com/wp-content/uploads/2019/10/js-554x410.png" alt="JavaScript関連のことを調べてみた" width="554" height="410" > </a> </div> <ul class="dateList dateList-archive"> <li class="dateList__item icon-calendar">2024.09.19</li> </ul> <h2 class="heading heading-archive "> <a class="hc-darkgray" href="https://miofactor.com/2024/09/19/post-36890/">JavaScript関連のことを調べてみた</a> </h2> </li> <li class="categoryBox__item"> <div class="eyecatch eyecatch-archive"> <a href="https://miofactor.com/2024/09/19/post-36891/"> <img src="https://miofactor.com/wp-content/uploads/2019/10/java.jpg" alt="JAVA関連のことを調べてみた" width="540" height="270" > </a> </div> <ul class="dateList dateList-archive"> <li class="dateList__item icon-calendar">2024.09.19</li> </ul> <h2 class="heading heading-archive "> <a class="hc-darkgray" href="https://miofactor.com/2024/09/19/post-36891/">JAVA関連のことを調べてみた</a> </h2> </li> <li class="categoryBox__item"> <div class="eyecatch eyecatch-archive"> <a href="https://miofactor.com/2024/09/19/post-36894/"> <img src="https://miofactor.com/wp-content/uploads/2019/10/ios-554x410.png" alt="iOS関連のことを調べてみた" width="554" height="410" > </a> </div> <ul class="dateList dateList-archive"> <li class="dateList__item icon-calendar">2024.09.19</li> </ul> <h2 class="heading heading-archive "> <a class="hc-darkgray" href="https://miofactor.com/2024/09/19/post-36894/">iOS関連のことを調べてみた</a> </h2> </li> <li class="categoryBox__item"> <div class="eyecatch eyecatch-archive"> <a href="https://miofactor.com/2024/09/19/post-36888/"> <img src="https://miofactor.com/wp-content/uploads/2019/10/rails-725x410.png" alt="Rails関連のことを調べてみた" width="725" height="410" > </a> </div> <ul class="dateList dateList-archive"> <li class="dateList__item icon-calendar">2024.09.19</li> </ul> <h2 class="heading heading-archive "> <a class="hc-darkgray" href="https://miofactor.com/2024/09/19/post-36888/">Rails関連のことを調べてみた</a> </h2> </li> <li class="categoryBox__item"> <div class="eyecatch eyecatch-archive"> <a href="https://miofactor.com/2024/09/19/post-36884/"> <img src="https://miofactor.com/wp-content/uploads/2019/10/lambda.png" alt="Lambda関連のことを調べてみた" width="360" height="230" > </a> </div> <ul class="dateList dateList-archive"> <li class="dateList__item icon-calendar">2024.09.19</li> </ul> <h2 class="heading heading-archive "> <a class="hc-darkgray" href="https://miofactor.com/2024/09/19/post-36884/">Lambda関連のことを調べてみた</a> </h2> </li> <li class="categoryBox__item"> <div class="eyecatch eyecatch-archive"> <a href="https://miofactor.com/2024/09/19/post-36886/"> <img src="https://miofactor.com/wp-content/uploads/2019/10/python-640x410.png" alt="Python関連のことを調べてみた" width="640" height="410" > </a> </div> <ul class="dateList dateList-archive"> <li class="dateList__item icon-calendar">2024.09.19</li> </ul> <h2 class="heading heading-archive "> <a class="hc-darkgray" href="https://miofactor.com/2024/09/19/post-36886/">Python関連のことを調べてみた</a> </h2> </li> </ul> </div> </div>  <script type="application/ld+json"> { "@context": "http://schema.org", "@type": "Article ", "mainEntityOfPage":{ "@type": "WebPage", "@id": "https://miofactor.com/2020/06/01/post-5315/" }, "headline": "今さら聞けないHTML　2020年06月01日", "image": { "@type": "ImageObject", "url": "https://miofactor.com/wp-content/uploads/2019/10/python-640x410.png", "height": "410", "width": "640" }, "datePublished": "2020-06-01T14:54:43+0900", "dateModified": "2020-06-01T14:54:43+0900", "author": { "@type": "Person", "name": "editor" }, "publisher": { "@type": "Organization", "name": "f@ctor", "logo": { "@type": "ImageObject", "url": "", "width": "", "height":"" } }, "description": "目次 0.0.1. 【Netlify】HTMLファイルを1秒でデプロイする方法0.0.2. html学習がてらコードなどまとめてみた0.0.3. AMP はじめ方0.0.4. input type=”text”からtextareaに変更した時のvalueどうするの問題解決メモ0.0.5. 【初心者向け】【Javascrript】FizzBuzz問題0.0.6. 初心者による […]" } </script>   <footer class="l-footer"> <div class="container"> <div class="pagetop u-txtShdw"><a class="pagetop__link" href="#top">Back to Top</a></div> <div class="widgetFoot"> <div class="widgetFoot__contents"> </div> <div class="widgetFoot__contents"> <aside class="widget widget-foot"><h2 class="heading heading-footer">タグ</h2><div class="tagcloud"><a href="https://miofactor.com/tag/%e3%81%9d%e3%81%ae%e4%bb%96/" class="tag-cloud-link tag-link-13 tag-link-position-1" style="font-size: 8pt;" aria-label="その他 (1個の項目)">その他</a></div> </aside> </div> <div class="widgetFoot__contents"> </div> </div> <div class="copySns "> <div class="copySns__copy"> © Copyright 2024 <a class="copySns__copyLink" href="https://miofactor.com">f@ctor</a>. <span class="copySns__copyInfo u-none"> f@ctor by <a class="copySns__copyLink" href="http://fit-jp.com/" target="_blank">FIT-Web Create</a>. Powered by <a class="copySns__copyLink" href="https://wordpress.org/" target="_blank">WordPress</a>. </span> </div> </div> </div> </footer>  <script type="text/javascript" src="https://miofactor.com/wp-includes/js/comment-reply.min.js?ver=6.4.1" id="comment-reply-js" async="async" data-wp-strategy="async"></script> <script type="text/javascript" src="https://miofactor.com/wp-includes/js/wp-embed.min.js?ver=6.4.1" id="wp-embed-js" defer="defer" data-wp-strategy="defer"></script> <script> function toggle__search(){ extra__search.className="l-extra"; extra__menu.className="l-extraNone"; menuNavi__search.className = "menuNavi__link menuNavi__link-current icon-search "; menuNavi__menu.className = "menuNavi__link icon-menu"; } function toggle__menu(){ extra__search.className="l-extraNone"; extra__menu.className="l-extra"; menuNavi__search.className = "menuNavi__link icon-search"; menuNavi__menu.className = "menuNavi__link menuNavi__link-current icon-menu"; } </script><script>Array.prototype.forEach.call(document.getElementsByClassName("css-async"),function(e){e.rel = "stylesheet"});</script> </body> </html>

今さら聞けないHTML 2020年06月01日

【Netlify】HTMLファイルを1秒でデプロイする方法

html学習がてらコードなどまとめてみた

AMP はじめ方

input type=”text”からtextareaに変更した時のvalueどうするの問題解決メモ

今さら聞けないHTML　2020年06月01日