20201121のHTMLに関する記事は7件です。

投稿日：2020-11-21T21:40:51+09:00

JavaScriptで2段階に連動するプルダウンの作成と要素の表示、非表示

備忘録として残しておきます

HTML

choice.html

<select id="parent" onchange="date()" class="form">
  <option value="和食">和食</option>
  <option value="洋食">洋食</option>
  <option value="中華">中華</option>
  <option value="" disabled selected>選択してください</option>
</select>

<select id="children" class="form">
  <option value="" disabled selected>選択してください</option>
  <option value="味噌汁">味噌汁</option>
  <option value="肉じゃが">肉じゃが</option>
  <option value="天ぷら">天ぷら</option>

  <option value="グラタン">グラタン</option>
  <option value="オムライス">オムライス</option>
  <option value="ナポリタン">ナポリタン</option>

  <option value="麻婆豆腐">麻婆豆腐</option>
  <option value="餃子">餃子</option>
  <option value="春巻">春巻</option>
</select>

CSS

choice2.css

#children option:disabled{
  display:none;
}
#children option{
  display:block;
}

JavaScript

choice3.js

function date() {

//id="course"の値を取得
var parentlement = document.getElementById( "parent" ) ;

//id="seminardate"を取得
var childrenDate = document.getElementById( "children") ;

   //disabledをtrueに
  for (var i = 0; i < childrenDate.length; i++){
       childrenDate.options[i].disabled = true;
  }
    // disabledに代入
     if( parentlement.value == "和食") {
       childrenDate.options[1].disabled = false;//味噌汁
       childrenDate.options[2].disabled = false;//肉じゃが
       childrenDate.options[3].disabled = false;//天ぷら

    } else if( parentlement.value == "洋食") {
       childrenDate.options[4].disabled = false;//グラタン
       childrenDate.options[5].disabled = false;//オムライス
       childrenDate.options[6].disabled = false;//ナポリタン

    } else if ( parentlement.value == "中華") {
       childrenDate.options[7].disabled = false;//麻婆豆腐
       childrenDate.options[8].disabled = false;//餃子
       childrenDate.options[9].disabled = false;//春巻

     } else if ( parentlement.value = "") {
       childrenDate.disabled = true;
    }
}

和食を選択します。

和食を選択すると「味噌汁」「肉じゃが」「天ぷら」以外にdisabledが付きます。

disabledが付いたoptionは非表示になります。

choice2.css

#children option:disabled{
  display:none;
}

display:none;がなければこうなります。↓

まとめ

このやり方でも一応動きますが、これではメンテナンスがしにくいのでJavaScriptの改善が必要みたいです。

参考リンク

https://developer.mozilla.org/ja/docs/Web/CSS/:disabled

　 Tweet
Qiitaで続きを読む

投稿日：2020-11-21T21:35:42+09:00

【初心者でもわかる】セレクトボックスの選択で、リンク先を変更する方法

どうも7noteです。セレクトボックスで選択された内容ごとにリンク先を変える方法

シンプルなスクリプトで対応が可能です。
検索ボタンを押したときに、リンクする方法と、セレクトの値を変更した瞬間にリンクする方法の2種類のサンプルソースです。

※jQueryを使用しています。jQueryってなんだという方は[こちら]（https://qiita.com/7note/items/45bd8efbedd557667218）

「検索」ボタンありバージョン
index.html
<select name="preflist">
  <option value="/hokkaido/">北海道</option>
  <option value="/okinawa/">沖縄</option>
</select>
<button class="btn">検索</button>
script.js
$(".btn").on("click",function(){
  const selected = $("select[name=preflist]");
  window.location.href = selected.val();
});
検索ボタンなしバージョン（選択を切り換えたらすぐリンク）
index.html
<select name="preflist">
  <option value="/hokkaido/">北海道</option>
  <option value="/okinawa/">沖縄</option>
</select>
script.js
const selected = $("select[name=preflist]");
selected.on("change",function(){
  window.location.href = selected.val();
});
解説

window.location.hrefでリンク先を指定することができます。
タイミングはボタンありの場合はボタンを押した時、ボタンなしならセレクトの値が変更された時に発火するように作ります。
とび先のリンクを各optionタグのvalueに入れておくことで、指定のリンク先へ飛ばすことができます。

参考
https://awesome-linus.com/2019/05/09/select-option-href/

おそまつ！

~ Qiitaで毎日投稿中!! ~
【初心者向け】HTML・CSSのちょいテク詰め合わせ

　 Tweet
Qiitaで続きを読む

投稿日：2020-11-21T20:50:44+09:00

FastAPIでformから複数画像をアップロードできない

概要

jsを使ってではなく、普通のhtmlの<input type="file" ...>タグからfastapiのバックエンドサーバーに複数画像をアップロードしようとした時にはまった備忘録です。

問題コード
index.html
 <html>
        <head>
            <title>Face Swap App</title>
        </head>
        <body>
            <h1>Look ma! HTML!</h1>
            <form enctype="multipart/form-data" method="post" action="swap">
                <input type="file" id="source" name="file"></input>
                <input type="file" id="target" name="file"></input>
                <input type="submit" value="Face Swap">
            </form>
        </body>
    </html>
main.py
@app.post("/swap", response_class=HTMLResponse)
async def create_swapped_image(files: List[UploadFile] = File(...)):
    print(files)
    return """
    <html>
        <head>
            <title>Face Swap App</title>
        </head>
        <body>
            <h1>Success!</h1>
        </body>
    </html>
    """
解決法

結論から言えばinputタグのnameをfastapiのエンドポイントの関数の引数と同じにする必要があるようです！つまりindex.htmlのinputを
index.html
<input type="file" id="source" name="files">
<input type="file" id="target" name="files">
に変えることで解決しました。
全部読んだわけではないですが、こんなこと公式docに書いていた記憶がないのでわかりづらいなあと思いました。書いていたらごめんなさい、、

　 Tweet
Qiitaで続きを読む

投稿日：2020-11-21T20:35:27+09:00

プロゲートProgate　HTML＆CSS道場コース中級編終えました

学んだことまとめ

プロゲート　HTML＆CSS道場コース中級編２周目を終えました。
自力でやりました！
２回目は１回目の半分以下の時間で終えることができました。

つい見過ごしがちなこと

・要素を中央に寄せるにはmargin:autoを使う
・position absoluteには％が指定できる
・widthや中央揃えは親要素にきいてくる
・２つのクラスをCSS設定するときは、.top .btnのように「.」で続けて記す
・2つのタグをCSS設定するときは、footer imgのように半角スペースを空けて続けて記す
・:hoverの前に半角スペースはいらない
・画像アイコンと文字を重ねるときのクラス設定は同じにする

　 Tweet
Qiitaで続きを読む

投稿日：2020-11-21T19:12:44+09:00

オモコロのソース(など)で学ぶ内部SEO対策・構造化マークアップ

はじめに

本記事は、HTMLにやっと慣れてきた筆者が、内部SEOや構造化マークアップなど実務におけるコーディングにおいて必要になってくる知識を収集し、まとめていくことを目的としたものです。

なるべく網羅的に押さえた内容を目指し、Progateで勉強したあとWordPressでテーマを作れるようになったので、さらに次のステップに行きたいみたいな人にとって役立つものにしたいと思っています。

（SEOのお手本という意味で、大手Webメディアサイトのコードを多く引用しています）

headに記述する内容

<title>要素

サイトのタイトルを書きます。検索結果と、ブラウザの上の部分に表示される部分です。
▼（例）Webメディア「オモコロ」の場合
<title>オモコロ あたまゆるゆるインターネット</title>
<meta>要素

色々な属性を使い、サイトのメタ情報（説明）を記述する部分です。

■name属性
要素に名前をつけるための属性です。属性値に名前を書いて、content=""と続けます。

・description
検索結果に表示される、サイトの説明文を書くところです。
<meta name="description" content="暇つぶしにピッタリの漫画や記事を毎日のように配信しています。いくら読んでも無料、そしていくら読んでも頭がよくなりません。">
・charset
<meta charset="utf-8">
文字コードを指定します。HTML5の規格においてはUTF-8が推奨されているので、あまり考えずこう書けば大丈夫です。

・robots
検索エンジンに対して、インデックスさせない（検索結果に表示させない）などの指定ができます。
基本的にはそのように、検索結果に出さない、キャッシュをデータベースに記録させないなど、ユーザーの流入を制限したい場合に使うことが多いです。

初期値では
<meta name=”robots” content=”index>
となっており、これは検索結果に表示されるのを許可する（より具体的にいうと、ネット上の情報を収集しているロボットがこのサイト情報をデータベースに保存し、検索ワードに応じて取り出していい）という意味になります。
これで構わない場合は省略し、書く必要はありません。

逆にnoindexで、検索結果からの流入を止めることもできます。

・theme-color
<meta name="theme-color" content="（カラーコード）">
AndroidのGoogleアプリ・Chromeアプリから閲覧する場合、このコードがあるとタブの色を変えることができます。
SEO的な意味はありませんが、サイトの世界観をより表現することができます。

・application-name
そのサイトがWebアプリケーションである場合、これでアプリ名を定義することができます。
<meta name="application-name" content="アプリ名">
・http-equiv

再読み込みや、別URLへのリダイレクトなどを指定できます。
（▼5秒後にリダイレクトさせる場合）
<meta http-equiv="refresh" content="5; url=リダイレクト先URL">
・viewport
「サイトをレスポンシブ対応させるときに書くコード」という認識でしたが、より細かくいうとサイト幅を定義する（仮想ウィンドウを定義する）ための属性値です。

例えばサイト幅を1000pxで固定したい（レスポンシブ対応しない）場合は、そのサイズを記載します。
<meta name="viewport content="width=1000px">
この場合、仮想ウィンドウの横幅が1000pxで固定され、どのデバイスで見ようともそのサイズで表示されます。

・device-width
サイトを表示している端末の幅に合わせるという指定になります。
<meta name="viewport content="width=device-width">
この場合、仮想ウィンドウのサイズと実際のデバイス幅のサイズが自動的に一致するため、レスポンシブ対応の場合には必要な指定ということになります。

・initial-scale

拡大倍率の初期値を指定します。

width=device-widthを指定していれば自動的にinitial-scale=1となり、拡大も縮小もしない等倍での表示となります。

・minimum-scaleとmaxmum-scale

最小倍率と最大倍率を指定できます。
初期値はそれぞれ0.25と1.6で、それぞれ0以上〜10までの数字で指定します。
<meta name="viewport content="initial-scale=1.0,minimum-scale=1.0">
▲initial-scaleとこのように組み合わせると、縮小をさせないという指定になります。
逆にmaxmum-scale=1.0と指定すると最大倍率が等倍ということになって、拡大ができなくなります。

また、user-scalableでズームの可否を指定することもできます。
user-scalable=yes 
user-scalable=no 
例えばPWA（モバイルアプリっぽいWebサイト）を作るときなど、もしかしたらズーム不可にした方がらしくなっていいかもしれません。

・基本的にはこうしておけばOKと思います
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">
（▲常に画面幅に合わせ、デフォルトの倍率と最小倍率が等倍）

■property属性

SNSでサイトがシェアされた際に表示される情報（OGP設定）を指定するための属性です。
マーケティング上重要な部分です。

・og:title

トップページならtitleタグと同じように書き、ブログの記事などに関しては記事のタイトルが入ります。

・og:type

ページの種類を指定します。
トップページはwebsite、それ以外はarticleを指定します。

・og:discription

基本はname属性のdiscriptionと同じように書きます。

・og:url

ページのURLを書きます。

・og:image

表示されるアイキャッチ画像を指定します。

・fb:app_id

Facebookでのシェアを考える上で必要な指定です。

サイトの管理者をFacebookに対して報告し、それによってFacebookからのアクセスや『いいね』の数などを分析するインサイトという機能を使用できるようになります。

content=""に管理者を示すID（数字の羅列）を書くのですが、そのIDはFacebookにアクセスして取得します。
方法はこちらの記事が参考になります。

■Twitter向けの設定

Twitterでのシェアに関しても設定することができます。
これらはname属性に付与する属性値です。

・twitter:url

ページのURLを書きます。

・twitter:title

ページのタイトルを書きます。

・twitter:image

ページのアイキャッチ画像を指定します。

・twitter:site

TwitterのID（@ユーザー名）を書きます。

・twitter:domain

サイトのドメインを書きます。

・twitter:card

Twitterでの表示方法を指定する属性です。
色々な指定方法があります。

文章とアイキャッチの入ったカードを表示する▶︎summary

アイキャッチ部分をsummaryより大きく表示する▶︎summary_large_image（一般的）

画像を最優先する▶︎photo

画像を複数枚表示する▶︎gallery

併せて何らかのアプリを紹介する▶︎app

<link>要素

CSS等の外部リソースへリンクさせるために用いるタグです。href属性とrel属性を必ず使います。

HTML5リファレンスによれば、色々な値があるものの現在使われるのは主にstylesheetとalternateくらいのようです。

■link rel="alternate"の使い方

・RSSフィードの存在を知らせる

▼オモコロの場合はこのようになっていました。
<link rel="alternate" type="application/rss+xml" title="オモコロ あたまゆるゆるインターネット" href="/feed">
WordPressなどのCMSを使っている場合は自動で挿入される部分です。

RSSフィードのバージョンやフォーマットを指定することが可能です。
例えば現在はRSS2.0が主流ですが、過去記事がたくさんあってそれも見て欲しい…などの理由で1.0を指定することもあるようです。

・スマホサイトの存在を知らせる

スマホサイトとPCサイトでURLが異なるなどの場合に必要になります。
(正直、レスポンシブサイトが主流の現在どれほど必要なのかはわかりません)
<link rel="alternate" media="only screen and (max-width: 640px)" href="スマホ用URL">
なお、スマホ用ソースコードにはこれを記載します。
<link rel="canonical" href="PC用URL">
canonicalはURLを正規化する（例えばスマホ用サイトとPC用サイトが別サイト扱いになるのを防ぐ）ためのもの…ですが、使うことが多いものではない気がします。

■link rel=""その他の指定

・ファビコンを設定する
<link rel="shortcut icon" href="（favicon.icoのパス）">
ブラウザの上の部分に出てくる小さいアイコンのことです。

▼オモコロの場合
<link rel="shortcut icon" type="image/x-icon" href="/assets/img/common/favicon.ico">
jpgなどではなく、ico形式の画像を用意した方がいいみたいです。

・ホーム画面用アイコンを設定する
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
これは、スマホやタブレットで行う『ホーム画面に追加』操作を行った際に、ホーム画面に表示されるアイコンを指定するものです。

（▲筆者のiPhoneにて、ショートカットをまとめているフォルダ。オモコロやギズモード・ジャパンなどはアイコンですが、変なWEBメディアなどは縮小されたスクリーンショットが表示されています）

・外部URLからのリソースを早く取得する
<link rel="dns-prefetch" href="(URL)">
これは外部リンクをたくさん設置している場合や、GoogleAnalyticsなどの外部リソースを取得している場合などに有効となる指定です。

サイトにアクセスした際、ここに書かれたURLにもブラウザはリクエストを送ります。
そうして先に名前解決を済ませてしまうことで、外部リソースの読み込みを高速化することができます。

構造化マークアップ

<head>の中身を色々勉強しましたが、今度は<body>の方です。

構造化というのは、ざっくりいうと『そのHTML要素が何を意味するのか』を検索エンジンやクローラーに理解させるための書き方のことです。

ボキャブラリーとシンタックス

例えば社名『〇〇』と書いても、『〇〇』が社名であることをクローラーは理解しません。

『〇〇』は社名である、という定義をHTMLに記述しておくことで、クローラーはサイトに書かれているHTMLの指すものがわかるようになります。

そのために構造化が必要になるわけですが、必要なものは

ボキャブラリー

シンタックス

の2つです。

schema.org

ボキャブラリーというのは、あらかじめ定義された単語集のことです。
現在最も主流のボキャブラリー規格はschema.orgですが、例えばサイト名を構造化マークアップする場合はschema.orgのWebsiteというタイプに割り当てられた"name"というプロパティを使って定義します。
"name" : "サイト名"
このように、キー：値という記法でマークアップしていきます。
これ自体はそんなに難しいものではないですね。

例えるならschema.orgは、あらゆるウェブサイトの分類が載っている図鑑のようなものです。
その図鑑の中にはCorporation（企業のサイト）やBlog（ブログ）といった、あらゆる分類が掲載されていて、さらにその中ではCorporation類の"name"というのは、会社名を指すのですよという具合に規格が定まっているということです。

JSON-LD

シンタックスというのは、ずばり記述方法のことです。
これにも種類がありますが、現在一般的でGoogleも推奨しているのはJSON-LDです。

JSONとは簡単にいうと『JavaScriptっぽいデータ記述方式』のことで、VSCodeの設定などもこの形式で書かれています。JSON-LDもJSON形式で記述します。

この記法を用いる場合、HTMLソース内のどこでもいいのでこれを書きます。▼
<script type="application/ld+json">
{ 
  "@context": "http://schema.org/", 
  "@type": "（サイトのタイプ）" 
} 
</script>
"@context": "http://schema.org/"で、先述のschema.org/に則って構造化するよ！ということを宣言し、2行目の"@type":以下で、自分のサイトが該当するタイプを記述します。

あとは入れ子構造を用いて、この中にどんどん情報を記述していくことになります。

構造化によってできること

これらマークアップによって、色々なものが（主に検索結果に）表示できます。

パン屑リスト

サイトの構造を表すリストを実装できます。
マップが複雑であればあるほど、パン屑があったほうがユーザーには優しいですね。

▼検索結果
（例：note）

▼ページ内
（例：SUUMO）

検索ボックス

（例：ギズモード・ジャパン）

サイト内に設置されている検索ボックスを、Google検索結果にも表示できます。

求人情報

Google for Jobsという機能を使って、新潟市　エンジニアのようなワードでGoogle検索された場合に求人広告を表示させることができます。

評価

評価やレビューの一部、価格等を検索結果に表示できます。
（▼例はぼくが一番好きなラーメン屋さんの食べログページです）

イベント

チケットを販売するサイトなどで、検索結果にイベント情報の概略を表示できます。

（例）ギズモード・ジャパンの場合
<script type="application/ld+json">
{
　"@context":"http://schema.org",
　"@type":"NewsArticle",
　"pageType":"top",
　"mainEntityOfPage":{
 　"@type":"WebPage",
 　"@id":"https://www.gizmodo.jp/"
　},
　"headline":"ギズモード・ジャパン | 日本最大級のガジェット＆テクノロジーサイト",
　"image":{
 　"@type":"ImageObject",
 　"url":"https://www.gizmodo.jp/assets/common/img/GIZMODO_OGP.png",
 　"width":1200,"height":1200},
 　"datePublished":"",
 　"dateModified":"",
 　"author":{
 　 "@type":"Person",
  　"name":""
 　},
 　"publisher":{
  　"@type":"Organization",
  　"name":" ギズモード・ジャパン",
  　"logo":{
  　 "@type":"ImageObject",
  　 "url":"https://www.gizmodo.jp/assets/common/img/logo_owner_GIZMODO.png",
  　 "width":180,
  　 "height":34
   　}
 　},
 　"description":"GIZMODO JAPAN（ギズモード・ジャパン）は最新のスマートフォンなどのデジタルデバイス情報や最新のガジェット情報から、テクノロジー、サイエンス、ビジネス、エンターテイメントの情報まで、刺激的で他とは違う情報をお届けします。",
 　"is_sponsored":false
}
</script>
記事をメインにしたWebメディアのようなサイトの場合、この指定をすればいいみたいですね。

ただギズモード・ジャパンの検索結果にはサイトマップが表示されますが、

（▲『アップル』『2ページ目』といった部分ですね）

これに関しては、サイトオーナーがどうこうして表示できるものではないみたいです。
説明がGoogle公式ヘルプに記載されています。

サイトリンクに関するGoogleの説明

サイトリンクは、ユーザーの役に立つと Google が判断した場合のみ、検索結果に表示されます。サイトの構造が原因で Google のアルゴリズムが適切なサイトリンクを見つけることができない場合や、サイトリンクとユーザーのクエリとに関連性がないと思われる場合、サイトリンクは表示されません。

とのこと。

まとめ

もっとシンプルな「HTMLタグの最適化」についても勉強しなきゃいけないのですが、これまでよく知らなかった<head>タグの中身と、それを調べる上で初めて知った構造化マークアップに関して取り急ぎまとめてみました。

一回覚えてしまえばしばらくは役に立ちそうですね。
間違いや不足などあれば、ご指摘いただけると助かります。

参考サイト

https://blog.ousaan.com/index.cgi/links/20170518.html
https://www.sakurasaku-labo.jp/blogs/structured-data
https://qiita.com/narumana/items/b66969b80cce848b2ddf
https://qiita.com/kuro-wassan/items/dc324eb3d5fc2b10bab0

　 Tweet
Qiitaで続きを読む

投稿日：2020-11-21T17:53:03+09:00

コロナ渦で未経験から転職するためにyoutubeで調べたこと（自社開発系、受託開発系、SES,Sler系）

前提・実現したいこと

5ヶ月勉強したが、良い企業に廻り会える気がしない
未経験からエンジニアに転職したい

発生している問題

・自社開発系
・受託開発系
・SES,Sler

この3つの違いがよくわからない
未経験を受け入れてくれるのだろうか心配

自社開発系

メリット
・新しい言語を取り入れてサービスを開発する企業がある
・スーツを着なくて良い
・スタートアップ、給与があるが可能性がある

デメリット
・スタートアップ、解雇や倒産のリスクがある
・サービスが出来上がった会社だと古い言語を使っている場合もある
・納期前は深夜勤務があるかも

受託開発系

メリット
・言語が新しいものと古いもの両方試せる可能性がある
・いろんな自社開発系企業の受託をやりながら自社開発を行っている企業もある

デメリット
・自社に比べて給与が低い可能性がある

SES,Sler

メリット
・未経験でも採用されやすい
・いろんな自社開発系企業で働ける

デメリット
・希望の案件を受けることが出来ず、プログラミングとは違う案件をやらないいけない企業がある
・下請けすぎると給与がなかなか上がらない企業がある

コロナ渦で自社企業に未経験者が受かる可能性1%と聞き焦ったので、
調べてみました。

この状況だと受託にいければラッキー

試したこと

Youtubeで調べた
順番:kentaさん、せいやさん、とだこうきさん（東京フリーランス）

補足情報（FW/ツールのバージョンなど）

仮でまとめてみたので、
またわかったことや追記して行きます。

　 Tweet
Qiitaで続きを読む

投稿日：2020-11-21T13:16:41+09:00

１ファイルのHTML(+JavaScript)で、QRcodeを生成する

１ファイルのHTML(+JavaScript)で、QRcodeを生成する

・ライブラリ等を利用せず、javascriptを持つ１ファイルのHTML文書で、QRコードを生成できる
・javascript内で、スクラッチ（ゼロ）からQRcodeを書き出している
・型番は１～２５まで対応
・最大718byteまでデータ容量を持てる。日本語（UTF-8）で、約２３０文字ほど
・訂正レベル「Q」、マスクパターンは「011」で固定

外観

（以下↓はイメージ（画像）です）

動作サンプル

http://thomas.cranky.jp/js_QR/QRcode_javascript.html

github

https://github.com/santarou6/QRcode_javascript/blob/main/QRcode_javascript.html

参考

QRコードの８種類のマスクを図示する
https://qiita.com/santarou6/items/f254f9fa5ea32d83ae27

エクセルの、ワークシート関数のみでQRコードを作成する
https://qiita.com/santarou6/items/dda2f88f42c55cd2118f

EXCELのVBAだけでQRコード。一部修正して日本語（全角）でも作成可能に。サンプルのエクセルファイルあり。
https://qiita.com/santarou6/items/d623417ea8ba33756108

　 Tweet
Qiitaで続きを読む

20201121のHTMLに関する記事は7件です。

JavaScriptで2段階に連動するプルダウンの作成と要素の表示、非表示

HTML

CSS

JavaScript

まとめ

参考リンク

【初心者でもわかる】セレクトボックスの選択で、リンク先を変更する方法

どうも7noteです。セレクトボックスで選択された内容ごとにリンク先を変える方法

「検索」ボタンありバージョン

検索ボタンなしバージョン（選択を切り換えたらすぐリンク）

解説

おそまつ！

FastAPIでformから複数画像をアップロードできない

概要

問題コード

解決法

プロゲートProgate HTML＆CSS道場コース中級編終えました

学んだことまとめ

つい見過ごしがちなこと

オモコロのソース(など)で学ぶ内部SEO対策・構造化マークアップ

はじめに

headに記述する内容

<title>要素

<meta>要素

<link>要素

構造化マークアップ

ボキャブラリーとシンタックス

schema.org

JSON-LD

構造化によってできること

パン屑リスト

検索ボックス

求人情報

評価

イベント

（例）ギズモード・ジャパンの場合

まとめ

参考サイト

コロナ渦で未経験から転職するためにyoutubeで調べたこと（自社開発系、受託開発系、SES,Sler系）

前提・実現したいこと

発生している問題

自社開発系

受託開発系

SES,Sler

試したこと

補足情報（FW/ツールのバージョンなど）

１ファイルのHTML(+JavaScript)で、QRcodeを生成する

１ファイルのHTML(+JavaScript)で、QRcodeを生成する

外観

動作サンプル

github

参考

日付別

タグ一覧

プロゲートProgate　HTML＆CSS道場コース中級編終えました

`<title>`要素

`<meta>`要素

`<link>`要素