What's New Qiita

20200824のHTMLに関する記事は14件です。

  • 投稿日：2020-08-24T22:30:13+09:00

CSSでカーソルが画像の上に来ると何かが起きるようにしよう。

この記事の対象者

・cssで簡単なアニメーションを付けたい人
・写真に動きを付けたい人

下準備

毎度のことながら始めにfinderからcss_hoverなどと言う名前のフォルダーを作成します。そしたらbracketsを起動して新規ファイルを2つ立ち上げて、それぞれindex.html、style.cssと名前をそれぞれ付けます。そしたらindex.htmlに!と入力してtobキーを押して、プログラムを展開します。そうしたら、langを"ja"に変更して、head内にlinkと入力してからtobキーを押してプログラムを展開してhrefにstyle.cssと入力して準備完了です。
※念の為にソースコードを入力して置きます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>

</body>
</html>

hoverを使ってみる

始めに写真を表示させる為のコードを追加します。body要素にこのコードを記述します。

<div class="img_block">
    <img src="IMG_0186.jpeg" alt="サンプル画像">
</div>

finderに自分の好きな写真を入れて名前をその写真に変更して下さい。次はcssのコードをいじっていきます。スクリーンショット 2020-08-24 22.02.28.png
cssを何も書かないとたまにこんな感じで写真が見にくいので始めに写真を整えるコードを書きます。

.img_block img {
/*  始めに二行で写真を真ん中に移動させています。*/
    display: block;
    margin: auto;
/*  ここで写真のサイズを調節します。*/
    width: 50%;
/*  ここで上の隙間を作ります*/
    margin-top: 100px;
}

コードの解説はコメントの通りです。次に画像を半透明にします。
これはとても簡単でこの一行を加えるだけです。
※コメントはコピーしなくても問題ありません。

/*  0.8の値をもっと小さくするもっと透明になります。*/
opacity: 0.8;

最後にhoverを使ってカーソルが押された時のコード書いて完成です。
始めにhoverの使い方について軽く解説します。

指定した要素名:hover {
/*  ここにアニメーションを書きます*/
}

実際に使って見ましょう。
コード完成版

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>

<body>
    <div class="img_block">
        <img src="IMG_0186.jpeg" alt="サンプル画像">
    </div>
</body>

</html>

.img_block img {
/*  始めに二行で写真を真ん中に移動させています。*/
    display: block;
    margin: auto;
/*  ここで写真のサイズを調節します。*/
    width: 50%;
/*  ここで上の隙間を作ります*/
    margin-top: 100px;
/*  0.8の値をもっと小さくするもっと透明になります。*/
    opacity: 0.8;
}

.img_block img:hover {
/*  ここにアニメーションを書きます*/
    opacity: 1;
}

スクリーンショット 2020-08-24 22.22.04.png
カーソルはスクショなので上手く写っていませんがちゃんと動作しましたね。
※今回使った写真を載せて置きます。
IMG_0186.jpeg

最後に

記事を読んでくれてありがとうございました。
最近はなんとなく毎日更新をしています。pythonとhtmlの記事を投稿していくつもりです。
よければ他の記事も見て下さい。

初心者なので間違った所があったらコメントで教えて下さい。早めに修正します。

今回参考にした素晴らし記事：サルワカ

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-08-24T22:20:55+09:00

意外とハマりやすい，BootStrap の盲点。「足し算で 12 にする」に凝り固まらず，少し距離を置いて，眺めてみませんか？

BootStrap がないと，人生ツラかった

メーカーで社内 SE をやっている，ちょい悪リーマン「おじさん」です。

学生時代は美術が苦手だったにもかかわらず，社内 SE などという職業を選んだことによって，画面デザインを提案しなければならない人生，真っ最中であります。

「もし，この世に BootStrap がなければ，今の業務では，もっとツラい思いをしていただろう……」

我が「美的センス」をベースに設計すると，凝れば凝るほど，取り返しのつかないデザインが誕生していたところなので，BootStrap のある時代にエンジニアをやっていて，本当に良かったと，感謝しています。

いくつかは，常識から外れたようなことを書くかも知れませんが，おじさんなりの BootStrap 活用アイデアを赤裸々と披露します。

例によって，マサカリ歓迎案件です。

「12」は素晴らしい数値だけれど……

二分割，三分割，四分割のデザインが，サラッと組めるのは，BootStrap のグリッドシステムが偉大なゆえんでもあります。

二分割，三分割，四分割
<!-- 二分割 -->
<div class="row">
    <div class="col-6"></div>
    <div class="col-6"></div>
</div>

<!-- 三分割 -->
<div class="row">
    <div class="col-4"></div>
    <div class="col-4"></div>
    <div class="col-4"></div>
</div>

<!-- 四分割 -->
<div class="row">
    <div class="col-3"></div>
    <div class="col-3"></div>
    <div class="col-3"></div>
    <div class="col-3"></div>
</div>

BootStrap を使えば使うほど，レイアウトの容易さを実感し，やはり，グリッドシステムは「12」でなければならなかったと，いう気持になります。

実際，グリッドシステムは「13」でも，「14」でも，使い勝手の悪いものになっていたでしょう。

それでも，「足し算で 12 にする」ことって，BootStrap 利用において，絶対守るべきルールではないという発想ができるエンジニアって，少数だと思います。

真面目なエンジニアほど，律義に足し算と引き算をしながら BootStrap を使っているのではないでしょうか？

あえて「12」に縛られず，具体例を考えていきましょう。

「12」から解き放たれるコード

以下のようなコードを見ると，ギョッとして，違和感を覚えるエンジニアも，少なくないでしょう。

違和感コード
<!-- ギョッとするコード -->
<div class="row">
    <div class="col-3"></div>
    <div class="col-3"></div>
    <div class="col-3"></div>
    <div class="col-3"></div>
    <div class="col-3"></div>
    <div class="col-3"></div>
    <div class="col-3"></div>
    <div class="col-3"></div>
</div>

row 内部の col 合計値が「24」になっており，一見すると，型破りに思えます。

それでも，ブラウザで表示してみると，BootStrap のグリッドシステムは優秀なので，勝手に「12」＋「12」と解釈して，二行に分割してくれます。

BootStrap の書き方としては「行儀が悪い」ようにも思われますが，実際には，結構メリットがある書き方だったりもします。

ちょっと実務に近い具体例

もう少し具体的なものをイメージするため，簡単な入力画面を想定しましょう：

簡単な入力画面
<!-- ギョッとするコード -->
<div class="row">
    <div class="col-3"><!-- ここに「姓」の <input type="text"> を配備 --></div>
    <div class="col-3"><!-- ここに「名」の <input type="text"> を配備 --></div>
    <div class="col-3"><!-- ここに「年齢」の <input type="text"> を配備 --></div>
    <div class="col-3"><!-- ここに「住所」の <input type="text"> を配備 --></div>
    <div class="col-3"><!-- ここに「郵便番号」の <input type="text"> を配備 --></div>
    <div class="col-3"><!-- ここに「メアド」の <input type="text"> を配備 --></div>
    <div class="col-3"><!-- ここに「電話番号」の <input type="text"> を配備 --></div>
    <div class="col-3"><!-- ここに「趣味」の <input type="text"> を配備 --></div>

    <!-- この後，いくら入力欄が続いても，大丈夫 -->
</div>

入力欄がたくさんある画面を開発することは，よくあるシーンですね。

このように「超ざっくり」書いたコードでも，ブラウザで閲覧すると，自然と「Z 字型デザイン」が守られ，いくつ入力欄を設置しても，まるでヒモに通された数珠のように，スルスルレイアウトされていく様子を確認できます。

そして，すべての入力欄に col-3 クラスを適用していることから，縦の線はビシッと揃うメリットもあります。

row クラスを適用するタイミング

正直者で真面目なエンジニアなら，「12」に達したから改行しなくちゃと考えるかも知れません。

実際には，col 数の合計値が「12」に達することよりも，入力欄の意味合いでグルーピングすることの方が，UI としても，スマートな分け方であるという考え方も，持っておきたいものです：

意味合いでグルーピング
<!-- 「名前」でのグルーピング -->
<div class="row">
    <div class="col-3"><!-- ここに「姓」の <input type="text"> を配備 --></div>
    <div class="col-3"><!-- ここに「名」の <input type="text"> を配備 --></div>
</div>

<!-- 「連絡情報」でのグルーピング -->
<div class="row">
    <div class="col-3"><!-- ここに「住所」の <input type="text"> を配備 --></div>
    <div class="col-3"><!-- ここに「郵便番号」の <input type="text"> を配備 --></div>
    <div class="col-3"><!-- ここに「メアド」の <input type="text"> を配備 --></div>
    <div class="col-3"><!-- ここに「電話番号」の <input type="text"> を配備 --></div>

    <!-- この後，いくら入力欄が続いても，大丈夫 -->
</div>

合計が「12」に満たなくとも，あるいは，合計が「12」を超えてしまっても，同一の row クラス内にまとめることで，コードが読みやすく，ブラウザで表示されたときのレイアウトも，意味の近い入力欄が寄り添って，使い勝手の良いものに仕上がると思いませんか？

BootStrap との，幸せな付き合い方

システムを長年運用すると，利用部門のビジネス要求が変化して，それに伴い，画面レイアウトが大きく変わるシステム改修が生じることも，決して珍しくありません。

緻密にレイアウトされた画面は，リリース当時は喜ばれるものの，将来のシステム改修時には，レイアウトが少しでも乱れると，利用部門には「仕様劣化」とみなされるという側面があることを，我々エンジニアは，忘れてはならないと思います。

本記事で取り上げたデザインは，ざっくりとした印象を与える UI である一方，作りやすく，かつ，将来変更しても，違和感の生じづらい組み方という，捨てがたい魅力があります。

運用保守のしやすいデザインは，利用部門のニーズへスピーディに追従できるという効果を生み出し，結果として，ユーザを益するものとなります。

華美なデザインを組むのもひとつのアプローチですが，BootStrap と幸せに付き合う方法は？と，常に自問自答する姿勢は，持ち続けたいですよね。

まとめ

本記事を書くことによって，「フレームワークは便利だけど，思考停止に陥ってはならないとの自戒は必要」という認識を，新たにできました。

フレームワークは，本来，開発者をしばるものではなく，開発者がさらに優れたアイデアを実現するための，たたき台なのです。

美しくレイアウトすることも大切だけれど，見栄えにこだわり過ぎると，せっかくのレスポンシブデザインとしての，柔軟性を失うケースもあります。

特に，企業内で使われる情報システムなどの場合は，華美さよりも，将来的な拡張性，維持保守の容易さなどを重視させたほうが，中長期視点では幸せになるかも知れませんね。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-08-24T22:17:18+09:00

本で学んだこと(HTML , CSS編)

HTMLとCSSで苦手なところを本で調べて学習し、記録しています。

表を作りたい

表を作る時はtableタグを使用する。

trタグは行を表すもので、今回は、４つあるので４行の表が完成する。
tdタグは、列を表すもの。それぞれ行の中に２つずつあるので２列できる。

<table border=1>
<tr><td>品物</td><td>金額</td></tr>
<tr><td>りんご</td><td>３００円</td></tr>
<tr><td>もも</td><td>４００円</td></tr>
<tr><td>メロン</td><td>９００円</td></tr>
</table>
品物 金額
りんご ３００円
もも ４００円
メロン ９００円

フォームを作りたい

フォーム記入欄を作る時はformタグを使用する。

text欄を作る時

<input type="text" name="">

e-mail欄を作る時は type は text となる。

<input type="text" name="email">

password欄を作る時

<input type="password" name="pass">

ラジオボタンを作る時
2つ以上作る場合、typeやnameを同じにしておく。

<input type="tadio" name="名前" value="値1">
<input type="tadio" name="名前" value="値2">

チェックボックスを作る時

2つ以上作る場合、typeやnameを同じにしておく。

<input type="checkbox" name="名前" value="値1">
<input type="checkbox" name="名前" value="値1">

選択欄を作る時

<select name="furuits">
<option name="apple">りんご</option>
<option name="peach">もも</option>
<option name="melon">メロン</option>
</select>

送信ボタンを作る時

<input type="submit" name="submit">
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-08-24T21:59:06+09:00

【初心者でもわかる】文章全体は可変で中央揃えで、中の文字は左寄せにする方法

どうも7noteです。親は中央、子は左寄せにする方法について

見本

image.png

ソース

index.html
<div class="oya">
  <div class="ko">
    こんちわ<br>
    こんばんわ<br>
    さようなら、また明日
  </div>
</div>
style.css
    .oya {
        text-align: center;
    }
    .ko {
        border: 1px solid #000; /* 見やすいように線を入れただけ */
        display: inline-block;
        text-align: left;
    }

解説

親（oya）要素にtext-align: center;を入れることで、子（ko）要素を中央寄せにします。

このとき、子要素がblock要素のままだと、可変にもできないし、中央寄せにもならないのでdisplay: inline-block;を指定します。

あとは子要素にtext-align: left;を指定することで、中身の文章は左揃えになります。

まとめ

たまに必要な場面があるので、やり方をわすれないようメモメモ。。。

おそまつ

（コメント・質問・ソースの指摘等なんでもウェルカムです！初心者の方でも気軽に質問ください！）

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-08-24T18:43:05+09:00

JavaScriptのpostMessageでDOMツリーのノード参照を渡す方法[Xpath]

ポップアップしたウィンドウに要素の参照（DOMノード）を送りたかったので、この記事を書いた。

Web MessagingはDOMノードを送れない

JavaScriptでは、window.postMessageを使うことで、ポップアップやiframeなどの別ウィンドウとWeb Messaging(HTML5)を介して通信することができる。

子ウィンドウ、親ウィンドウへの参照はそれぞれwindow.open()とwindow.openerで持つことができるから、window.postMessageと併せてあらゆるデータのやり取りが自由にできそうなものである。

しかし、window.postMessageでは送ることができないデータがある。

MDN web docsには、messageについて

他のウィンドウに送られるデータ。データは the structured clone algorithm に従ってシリアル化されます。つまり、手動でシリアル化することなく様々なデータオブジェクトを渡すことができます。
(window.postMessage - Web API | MDN)

と書かれている。

この「the structured clone algorithm」（日本語「構造化複製アルゴリズム」）という部分が重要で、この中で「構造化複製で動作しないもの」というのが示されいる。

  • Function オブジェクトは構造化複製アルゴリズムでは複製されません。複製しようとすると DATA_CLONE_ERR 例外が送出されます。
  • DOM ノードを複製しようとしても同様に DATA_CLONE_ERR 例外が送出されます。

つまり、例えばdocument.querySelector()などを使えば要素の参照を取得できるが、このような参照はWeb Messagingで送ることができない。
実際にwindow.postMessageでDOMノードを送ろうとすると、

Uncaught DOMException: Failed to execute 'postMessage' on 'Window': HTMLButtonElement object could not be cloned.

のようなエラーが発生する。

ウィンドウ間で互いのDOMの参照はできるのだから、DOMノードも送れるべきである。
そこで、住所のように、テキストでDOMツリーにおけるノードの位置を表現できる方法を探していると、「Xpath」という言語構文を見つけた。

Xpathとは

Xpathとは、XMLやHTMLのようなツリー状の階層構造を持つ文書で、様々なノードの位置や情報を表すことができる記法のことである。URLのようなパス表記ができることが特徴。

Introduction to using XPath in JavaScript | MDN

記法についてはこちらの記事が詳しいが、ざっくり言うと、例えばbody直下の<h1>にアクセスするためのXpathは

/html/body/h1

となる。

また、2番目の<div>の3番目の<span>にアクセスするためのXpathは

/html/body/div[2]/span[3]

といったように表すことができる。

要素のXpathを取得して送信する

まず、送るためにはDOMノードのXpathを取得する必要がある。
以下の記事のコードを使用して送信側のスクリプトを書いた。

ブラウザ上のクリックした要素のXpathを取得する - Qiita

parent.htmlのjs
let childWindow = window.open('child.html', 'child', 'width=300,height=400,scrollbars');

// クリックされたらその要素のXpathを子ウィンドウにpostMessageする
window.addEventListener('click', (e) => {
    childWindow.postMessage(getXpath(e.target), 'http://localhost');
});

/* https://qiita.com/narikei/items/fb62b543ca386fcee211 */
function getXpath(element) {
    if(element && element.parentNode) {
        var xpath = getXpath(element.parentNode) + '/' + element.tagName;
        var s = [];

        for(var i = 0; i < element.parentNode.childNodes.length; i++) {
            var e = element.parentNode.childNodes[i];
            if(e.tagName == element.tagName) {
                s.push(e);
            }
        }

        if(1 < s.length) {
            for(var i = 0; i < s.length; i++) {
                if(s[i] === element) {
                    xpath += '[' + (i+1) + ']';
                    break;
                }
            }
        }

        return xpath.toLowerCase();
    } else {
        return '';
    }
}

要素のXpathを受け取って参照する

受信側は以下のようになる。

child.htmlのjs
let parent = window.opener.document;

function receiveMessage(e) {
    if (e.origin !== "http://localhost") {return}
    parent.evaluate(e.data, parent, null, XPathResult.FIRST_ORDERED_NODE_TYPE).singleNodeValue.innerHTML = 'ok!';
}

window.addEventListener("message", receiveMessage);

Introduction to using XPath in JavaScript | MDN

成功すると、親ウィンドウでクリックした要素に「ok!」と表示されるはず。
これで、親ウィンドウから子ウィンドウに送られたXpathを使って、子ウィンドウが親ウィンドウのDOMを参照し、当該要素にアクセスすることが可能になった。もちろんその逆も可能である。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-08-24T17:30:58+09:00

display:flexとalign-items/justify-content

【概要】

1.結論

2.display:flexとalign-items/justify-content とは何か

3.どういう時に使うのか

4.ここから学んだこと

1.結論

”display:flex”と”align-items”と”justify-content”は親要素に3点セットで使用する！


2.display:flexとalign-items/justify-content とは何か

i)display:flex➡︎”指定した要素の子要素”をFlexboxを適用させるためのプロパティです。そして、子要素が横並びになります。Flexboxとは柔軟にレイアウトを組める仕組みです！他にもdisplay:block(指定のセレクタをブロック要素に変更）などがあります。に

ii)align-items➡︎display:flexと併用して使うことが多く、”指定した要素の子要素”の水平方向の配置を決めれます。justyfy-content:center(中央）,justyfy-content:space-between(両端が左右寄り)などがあります。

iii)justify-content➡︎display:flexと併用して使うことが多く、”指定した要素の子要素”の垂直方向の配置を決めることができます。
align-items:felx-start(上),align-items:center(中央)などがあります。


3.どういう時に使うのか

実はこの3点セットでよく使うパターンが決まっております。ど真ん中に配置させたい時（水平方向・垂直方向・そして横並びに整列させたい）はdisplay:flexとalign-itemsとjustify-contentを親要素に3点セットで使用します！

下記に使用例を載せておきます！

ど真ん中設定
.center_of_center{
 display:flex;
 align-items:center;
 justify-content:center;
}

上記のようにすると、画面中央に横並びになった状態でHTMLに反映され画面に表示されます！

*子要素の並び順を変えたい・縦列にしたい場合は親要素に”flex-direction”です。
display:flexはフレックスボックスを適用させるものなので、同時に使用します。


4.ここから学んだこと

align-items/justify-content について、最初に子要素につけていたことによって
表示が反映されていませんでした。”親要素に適用する”という基本が抜けていました。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-08-24T17:30:58+09:00

ど真ん中に図や文字を表示させたい

【概要】

1.結論

2.display:flexとalign-items/justify-content とは何か

3.どういう時に使うのか

4.ここから学んだこと

1.結論

”display:flex”と”align-items”と”justify-content”は親要素に3点セットで使用する！


2.display:flexとalign-items/justify-content とは何か

i)display:flex➡︎”指定した要素の子要素”をFlexboxを適用させるためのプロパティです。そして、子要素が横並びになります。Flexboxとは柔軟にレイアウトを組める仕組みです！他にもdisplay:block(指定のセレクタをブロック要素に変更）などがあります。に

ii)align-items➡︎display:flexと併用して使うことが多く、”指定した要素の子要素”の水平方向の配置を決めれます。justyfy-content:center(中央）,justyfy-content:space-between(両端が左右寄り)などがあります。

iii)justify-content➡︎display:flexと併用して使うことが多く、”指定した要素の子要素”の垂直方向の配置を決めることができます。
align-items:felx-start(上),align-items:center(中央)などがあります。


3.どういう時に使うのか

実はこの3点セットでよく使うパターンが決まっております。ど真ん中に配置させたい時（水平方向・垂直方向・そして横並びに整列させたい）はdisplay:flexとalign-itemsとjustify-contentを親要素に3点セットで使用します！

下記に使用例を載せておきます！

ど真ん中設定
.center_of_center{
 display:flex;
 align-items:center;
 justify-content:center;
}

上記のようにすると、画面中央に横並びになった状態でHTMLに反映され画面に表示されます！

*子要素の並び順を変えたい・縦列にしたい場合は親要素に”flex-direction”です。
display:flexはフレックスボックスを適用させるものなので、同時に使用します。


4.ここから学んだこと

align-items/justify-content について、最初に子要素につけていたことによって
表示が反映されていませんでした。”親要素に適用する”という基本が抜けていました。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-08-24T15:39:21+09:00

HTMLタグの語源

なぜ書こうと思ったか

HTMLのタグって語源は何だろうとふと思い調べたのですが、すでに色々な方が調べていました。
なのでやめようかと思ったのですが、せっかくなので調べる事にしました。

まず、HTML Living Standardから語源となる文章を抜き出したら面白そうかなと思いやり始めましたが、語源となる言葉が無い物が出てきたため路線変更しました。
次に、調べたのがHTML Living Standardで引用しているMDN Web Docsを調べました。
そしたら見出しに語源が載っているのでそちらをまとめる事にしました。

関連用語概要

HTML Living Standardとは

HTML Living Standardは、WHATWGが策定しているHTML5の仕様です。

HTML5の仕様は、W3CとWHATWGの仕様が併存していて両者には差異がありました。
しかし、2019年5月28日にW3CとWHATWGがHTML標準仕様の策定についてHTML Living StandardをHTMLの標準仕様にする事で合意しました。

WHATWGとは

WHATWG (Web Hypertext Application Technology Working Group) は、ウェブ標準の保守や開発を行うためのコミュニティです。
2004年にApple、Mozilla、Opera の従業員たちによって設立されました。
2017年からは、Apple、Mozilla、Google、Microsoftが中心となって活動しています。

MDN Web Docsとは

MDN Web Docs(かつては Mozilla Developer Network(MDN)、その前は Mozilla Developer Center(MDC)として知られ、またDevmoとしても知られていた)
プロジェクトは、2005年初頭、Mozilla Foundationが AOLからオリジナルの Netscape DevEdgeのコンテンツの使用ライセンスを取得した時点から始まりました。
DevEdge のコンテンツの中からまだ使える素材が探し出され、更新と維持が楽になるよう、ボランティアによってwikiに移されました。

2017年7月に名前が MDN Web Docsに変更されました。

様々なWeb技術（HTML、CSS、JavaScript等）の学習用に、リファレンスやチュートリアルがあります。

HTML5 のタグ一覧

語源は、MDNのHTMLリファレンスの見出しから基本的には取得しています。
その他欄に、「見出しに語源なし」の場合はタグをそのまま記載しています。

タグ名1 語源1 語源の和訳2 MDNの分類 その他2
a Anchor アンカー（錨） インライン文字列意味付け
abbr Abbreviation 略語 インライン文字列意味付け
acronym Acronym 頭字語 廃止または非推奨の要素 廃止
代わりにabbrを使用する
見出しに語源なし
address Contact Address 連絡先 コンテンツセクショニング
applet Embed Java Applet 埋め込みJavaアプレット 廃止または非推奨の要素 廃止
代わりにobjectを使用する
area Area エリア 画像とマルチメディア 見出しに語源なし
article Article Contents 記事コンテンツ コンテンツセクショニング
aside Aside 余談 コンテンツセクショニング
audio Embed Audio 埋め込み音声 画像とマルチメディア
b Bring Attention To 注目付け インライン文字列意味付け
base Document Base URL 文書の基底 URL 文書メタデータ
basefont Base Font 基本フォント 廃止または非推奨の要素 廃止
代わりに font, font-family, font-size, colorを使用する
見出しに語源なし
bdi Bidirectional Isolate 書字方向分離 インライン文字列意味付け
bdo Bidirectional Text Override 双方向文字列上書き インライン文字列意味付け
bgsound Background Sound 背景音 廃止または非推奨の要素 廃止
代わりにaudioを使用する
big Bigger Text 大きめの文字列 廃止または非推奨の要素 廃止
代わりにfont-sizeを使用する
blink Blinking Text 点滅文字列 廃止または非推奨の要素 廃止
アクセシビリティが悪いので使用しない
blackquote Block Quotation ブロック引用 テキストコンテンツ
body Document Body 文書の本文 セクショニング
br Line Break 改行 インライン文字列意味付け
button Button ボタン フォーム
canvas Graphics Canvas グラフィックキャンバス スクリプティング
caption 表キャプション Table Caption テーブル
center Centered Text 文字列の中央揃え 廃止または非推奨の要素 廃止
CSSを使用する
cite Citation 引用元 インライン文字列意味付け
code Inline Code 行内コード インライン文字列意味付け
col col col テーブル 見出しに語源なし
colgroup colgroup colgroup テーブル 見出しに語源なし
command HTML Command HTML コマンド 廃止または非推奨の要素 廃止
content Shadow DOM Content Placeholder シャドウ DOM のコンテンツのプレイスホルダー 廃止または非推奨の要素 非推奨
data data data インライン文字列意味付け 見出しに語源なし
datalist HTML Data List HTMLデータリスト フォーム 和訳の語源なし
dd Description Details 詳細説明 テキストコンテンツ
del Deleted Text 削除文字列 編集範囲の特定
detailes Details disclosure 詳細折りたたみ インタラクティブ要素
dfn Definition 定義 インライン文字列意味付け
dialog Dialog ダイアログ インタラクティブ要素
dir Directory ディレクトリ 廃止または非推奨の要素 廃止
div Content Division コンテンツ分割 テキストコンテンツ
dl Description List 説明リスト テキストコンテンツ
dt Description Term 説明用語 テキストコンテンツ
element Custom Element カスタム 廃止または非推奨の要素 廃止
em Emphasis 強調 インライン文字列意味付け
embed Embed External Content 動画埋め込み 埋め込みコンテンツ
fieldset Field Set フィールドセット フォーム
figcaption Figure Caption 図キャプション テキストコンテンツ
figure Figure with Optional Caption 任意のキャプション付きの図 テキストコンテンツ
font font font 廃止または非推奨の要素 廃止
footer footer フッター コンテンツセクショニング 見出しに語源なし
form form form フォーム 見出しに語源なし
frame frame frame 廃止または非推奨の要素 非推奨
代わりにiframeを使用する
frameset frameset frameset 廃止または非推奨の要素 非推奨
h1-h6 HTML Section Heading HTMLの見出し コンテンツセクショニング
head Document Metadata (Header) 文書メタデータ (ヘッダー) 文書メタデータ
header header ヘッダー コンテンツセクショニング 見出しに語源なし
hgroup hgroup hgroup コンテンツセクショニング 見出しに語源なし
hr Thematic Break 主題分割 テキストコンテンツ 以前は、Horizontal Rule（水平線）と言うデザイン的な意味だったが、意味を重視した名前に変更した
html HTML Document / Root HTML 文書 / ルート メインルート
i Idiomatic Text 興味深いテキスト インライン文字列意味付け
iframe Inline Frame インラインフレーム 埋め込みコンテンツ
image obsolete Image 廃止された画像 廃止または非推奨の要素 廃止
代わりにimgを使用する
img Image Embed 画像埋め込み 画像とマルチメディア
input Input (Form Input) 入力欄 (フォーム入力) フォーム
ins ins ins 編集範囲の特定 見出しに語源なし
isindex isindex isindex 廃止または非推奨の要素 廃止
kbd Keyboard Input キーボード入力 インライン文字列意味付け
keygen keygen keygen 廃止または非推奨の要素 非推奨
label label label フォーム 見出しに語源なし
legend legend legend フォーム 見出しに語源なし
li li li テキストコンテンツ 見出しに語源なし
link External Resource Link 外部リソースへのリンク 文書メタデータ
listing listing listing 廃止または非推奨の要素 廃止
代わりにpreまたはcodeを使用する
main main メイン コンテンツセクショニング
テキストコンテンツ		 見出しに語源なし
map map マップ 画像とマルチメディア 見出しに語源なし
mark Mark Text 文字列マーク インライン文字列意味付け
marquee Marquee マーキー 廃止または非推奨の要素 廃止
menu menu メニュー インタラクティブ要素 見出しに語源なし
menuitem menuitem menuitem 廃止または非推奨の要素 非推奨
meta Document-level Metadata 文書レベルメタデータ 文書メタデータ
meter HTML Meter HTML メーター フォーム
multicol HTML Multi-Column Layout HTML 段組みレイアウト 廃止または非推奨の要素 廃止
nav Navigation Section ナビゲーションセクション コンテンツセクショニング
nextid NeXT ID NeXT ID 廃止または非推奨の要素 非推奨
nobr Non-Breaking Text 無改行文字列 廃止または非推奨の要素 廃止
noembed Embed Fallback 埋め込みフォールバック 廃止または非推奨の要素 廃止
noframes Frame Fallback フレームフォールバック 廃止または非推奨の要素 廃止
noscript noscript noscript スクリプティング 見出しに語源なし
object object object 埋め込みコンテンツ 見出しに語源なし
ol Ordered List 順序付きリスト テキストコンテンツ
optgroup optgroup optgroup フォーム 見出しに語源なし
option HTML Option HTML オプション フォーム 和訳の語源なし
output Output 出力 フォーム
p Paragraph 段落 テキストコンテンツ
param Object Parameter オブジェクト引数 埋め込みコンテンツ
picture Picture 画像 埋め込みコンテンツ
plaintext Plain Text プレーンテキスト 廃止または非推奨の要素 廃止
代わりにpreまたはcodeを使用する
pre Preformatted Text 整形済みテキスト テキストコンテンツ
progress Progress Indicator 進捗表示 フォーム
q Inline Quotation 行内引用 インライン文字列意味付け
rb Ruby Base ルビベース インライン文字列意味付け
rp Ruby Fallback Parenthesis ルビのフォールバック用括弧 インライン文字列意味付け
rt Ruby Text ルビ文字列 インライン文字列意味付け
rtc Ruby Text Container ルビ文字列コンテナー インライン文字列意味付け
ruby ruby ruby インライン文字列意味付け
s s s インライン文字列意味付け 見出しに語源なし
samp Sample Output サンプル出力 インライン文字列意味付け
script Script スクリプト スクリプティング
section Generic Section 汎用セクション コンテンツセクショニング
select HTML Select HTML セレクト フォーム 和訳の語源なし
shadow obsolete Shadow Root 廃止されたシャドウルート 廃止または非推奨の要素 非推奨
slot slot slot ウェブコンポーネント 見出しに語源なし
small side comment 附随コメント インライン文字列意味付け
source Media or Image Source メディアまたはイメージのソース 埋め込みコンテンツ 和訳の語源なし
spacer spacer spacer 廃止または非推奨の要素 廃止
見出しに語源なし
span span span インライン文字列意味付け 見出しに語源なし
strike strike strike 廃止または非推奨の要素 廃止
見出しに語源なし
代わりにdelまたはsを使用する
strong Strong Importance 強い重要性 インライン文字列意味付け
style Style Information スタイル情報 文書メタデータ
sub Subscript 下付き文字 インライン文字列意味付け
summary Disclosure Summary 概要明示 インタラクティブ要素
sup Superscript 上付き文字 インライン文字列意味付け
table Table 表 テーブル
tbody Table Body テーブル本体 テーブル
td Table Data Cell 表データセル テーブル
template Content Template コンテンツテンプレート ウェブコンポーネント
textarea textarea textarea フォーム 見出しに語源なし
tfoot Table Foot 表フッター テーブル
th th th テーブル 見出しに語源なし
thead Table Head 表ヘッダー テーブル
time time time インライン文字列意味付け
title Document Title 文書題名 文書メタデータ
tr Table Row 表の行 テーブル
track Embed Text Track 埋め込みテキストトラック 画像とマルチメディア
tt Teletype Text テレタイプテキスト 廃止または非推奨の要素 廃止
代わりcodeまたはkbdまたはたはvarまたはpreを使用する
u Unarticulated Annotation 非言語的注釈 インライン文字列意味付け 以前は、Underline（下線）と言うデザイン的な意味だったが、意味を重視した名前に変更した
ul Unordered List 順序なしリスト テキストコンテンツ
var Variable 変数 インライン文字列意味付け
video Video Embed 動画埋め込み 画像とマルチメディア
wbr wbr wbr インライン文字列意味付け 見出しに語源なし
xmp xmp xmp 廃止または非推奨の要素 廃止
代わりにpreまたはcodeを使用する

最後に

調査した結果、廃止されているものも含めてHTMLタグは140個ありました。
こんなにあるとは思っていなかったので驚いていると同時に、こんなに細分化する必要があるのかと疑問も感じました。
それと、語源が無いものもあり対応はバラバラなんだなと感じました。
色々と勉強になりました。

  1. 英語版のMDNから抜粋 ↩

  2. 日本語版のMDNから抜粋 ↩

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-08-24T15:39:21+09:00

HTMLタグの正式名称

なぜ書こうと思ったか

HTMLのタグって語源は何だろうとふと思い調べたのですが、すでに色々な方が調べていました。
なのでやめようかと思ったのですが、せっかくなので調べる事にしました。

まず、HTML Living Standardから語源となる文章を抜き出したら面白そうかなと思いやり始めましたが、語源となる言葉が無い物が出てきたため路線変更しました。
次に、調べたのがHTML Living Standardで引用しているMDN Web Docsを調べました。
そしたら見出しに語源が載っているのでそちらをまとめる事にしました。

指摘をいただき、確かに語源と言うにはちょっと違うかな、と言うタグ名もありましたので、『語源』をMDNでの正式名称と言う意味で『正式名称』に置き換えました。

関連用語概要

HTML Living Standardとは

HTML Living Standardは、WHATWGが策定しているHTML5の仕様です。

HTML5の仕様は、W3CとWHATWGの仕様が併存していて両者には差異がありました。
しかし、2019年5月28日にW3CとWHATWGがHTML標準仕様の策定についてHTML Living StandardをHTMLの標準仕様にする事で合意しました。

WHATWGとは

WHATWG (Web Hypertext Application Technology Working Group) は、ウェブ標準の保守や開発を行うためのコミュニティです。
2004年にApple、Mozilla、Opera の従業員たちによって設立されました。
2017年からは、Apple、Mozilla、Google、Microsoftが中心となって活動しています。

MDN Web Docsとは

MDN Web Docs(かつては Mozilla Developer Network(MDN)、その前は Mozilla Developer Center(MDC)として知られ、またDevmoとしても知られていた)
プロジェクトは、2005年初頭、Mozilla Foundationが AOLからオリジナルの Netscape DevEdgeのコンテンツの使用ライセンスを取得した時点から始まりました。
DevEdge のコンテンツの中からまだ使える素材が探し出され、更新と維持が楽になるよう、ボランティアによってwikiに移されました。

2017年7月に名前が MDN Web Docsに変更されました。

様々なWeb技術（HTML、CSS、JavaScript等）の学習用に、リファレンスやチュートリアルがあります。

HTML5 のタグ一覧

正式名称は、MDNのHTMLリファレンスの見出しから基本的には取得しています。
その他欄に、「見出しに正式名称なし」の場合はタグをそのまま記載しています。

タグ名1 正式名称1 正式名称の和訳2 MDNの分類 その他2
a Anchor アンカー（錨） インライン文字列意味付け
abbr Abbreviation 略語 インライン文字列意味付け
acronym Acronym 頭字語 廃止または非推奨の要素 廃止
代わりにabbrを使用する
見出しに正式名称なし
address Contact Address 連絡先 コンテンツセクショニング
applet Embed Java Applet 埋め込みJavaアプレット 廃止または非推奨の要素 廃止
代わりにobjectを使用する
area Area エリア 画像とマルチメディア 見出しに正式名称なし
article Article Contents 記事コンテンツ コンテンツセクショニング
aside Aside 余談 コンテンツセクショニング
audio Embed Audio 埋め込み音声 画像とマルチメディア
b Bring Attention To 注目付け インライン文字列意味付け
base Document Base URL 文書の基底 URL 文書メタデータ
basefont Base Font 基本フォント 廃止または非推奨の要素 廃止
代わりに font, font-family, font-size, colorを使用する
見出しに正式名称なし
bdi Bidirectional Isolate 書字方向分離 インライン文字列意味付け
bdo Bidirectional Text Override 双方向文字列上書き インライン文字列意味付け
bgsound Background Sound 背景音 廃止または非推奨の要素 廃止
代わりにaudioを使用する
big Bigger Text 大きめの文字列 廃止または非推奨の要素 廃止
代わりにfont-sizeを使用する
blink Blinking Text 点滅文字列 廃止または非推奨の要素 廃止
アクセシビリティが悪いので使用しない
blackquote Block Quotation ブロック引用 テキストコンテンツ
body Document Body 文書の本文 セクショニング
br Line Break 改行 インライン文字列意味付け
button Button ボタン フォーム
canvas Graphics Canvas グラフィックキャンバス スクリプティング
caption 表キャプション Table Caption テーブル
center Centered Text 文字列の中央揃え 廃止または非推奨の要素 廃止
CSSを使用する
cite Citation 引用元 インライン文字列意味付け
code Inline Code 行内コード インライン文字列意味付け
col col col テーブル 見出しに正式名称なし
colgroup colgroup colgroup テーブル 見出しに正式名称なし
command HTML Command HTML コマンド 廃止または非推奨の要素 廃止
content Shadow DOM Content Placeholder シャドウ DOM のコンテンツのプレイスホルダー 廃止または非推奨の要素 非推奨
data data data インライン文字列意味付け 見出しに正式名称なし
datalist HTML Data List HTMLデータリスト フォーム 和訳の正式名称なし
dd Description Details 詳細説明 テキストコンテンツ
del Deleted Text 削除文字列 編集範囲の特定
detailes Details disclosure 詳細折りたたみ インタラクティブ要素
dfn Definition 定義 インライン文字列意味付け
dialog Dialog ダイアログ インタラクティブ要素
dir Directory ディレクトリ 廃止または非推奨の要素 廃止
div Content Division コンテンツ分割 テキストコンテンツ
dl Description List 説明リスト テキストコンテンツ
dt Description Term 説明用語 テキストコンテンツ
element Custom Element カスタム 廃止または非推奨の要素 廃止
em Emphasis 強調 インライン文字列意味付け
embed Embed External Content 動画埋め込み 埋め込みコンテンツ
fieldset Field Set フィールドセット フォーム
figcaption Figure Caption 図キャプション テキストコンテンツ
figure Figure with Optional Caption 任意のキャプション付きの図 テキストコンテンツ
font font font 廃止または非推奨の要素 廃止
footer footer フッター コンテンツセクショニング 見出しに正式名称なし
form form form フォーム 見出しに正式名称なし
frame frame frame 廃止または非推奨の要素 非推奨
代わりにiframeを使用する
frameset frameset frameset 廃止または非推奨の要素 非推奨
h1-h6 HTML Section Heading HTMLの見出し コンテンツセクショニング
head Document Metadata (Header) 文書メタデータ (ヘッダー) 文書メタデータ
header header ヘッダー コンテンツセクショニング 見出しに正式名称なし
hgroup hgroup hgroup コンテンツセクショニング 見出しに正式名称なし
hr Thematic Break 主題分割 テキストコンテンツ 以前は、Horizontal Rule（水平線）と言うデザイン的な意味だったが、意味を重視した名前に変更した
html HTML Document / Root HTML 文書 / ルート メインルート
i Idiomatic Text 興味深いテキスト インライン文字列意味付け
iframe Inline Frame インラインフレーム 埋め込みコンテンツ
image obsolete Image 廃止された画像 廃止または非推奨の要素 廃止
代わりにimgを使用する
img Image Embed 画像埋め込み 画像とマルチメディア
input Input (Form Input) 入力欄 (フォーム入力) フォーム
ins ins ins 編集範囲の特定 見出しに正式名称なし
isindex isindex isindex 廃止または非推奨の要素 廃止
kbd Keyboard Input キーボード入力 インライン文字列意味付け
keygen keygen keygen 廃止または非推奨の要素 非推奨
label label label フォーム 見出しに正式名称なし
legend legend legend フォーム 見出しに正式名称なし
li li li テキストコンテンツ 見出しに正式名称なし
link External Resource Link 外部リソースへのリンク 文書メタデータ
listing listing listing 廃止または非推奨の要素 廃止
代わりにpreまたはcodeを使用する
main main メイン コンテンツセクショニング
テキストコンテンツ		 見出しに正式名称なし
map map マップ 画像とマルチメディア 見出しに正式名称なし
mark Mark Text 文字列マーク インライン文字列意味付け
marquee Marquee マーキー 廃止または非推奨の要素 廃止
menu menu メニュー インタラクティブ要素 見出しに正式名称なし
menuitem menuitem menuitem 廃止または非推奨の要素 非推奨
meta Document-level Metadata 文書レベルメタデータ 文書メタデータ
meter HTML Meter HTML メーター フォーム
multicol HTML Multi-Column Layout HTML 段組みレイアウト 廃止または非推奨の要素 廃止
nav Navigation Section ナビゲーションセクション コンテンツセクショニング
nextid NeXT ID NeXT ID 廃止または非推奨の要素 非推奨
nobr Non-Breaking Text 無改行文字列 廃止または非推奨の要素 廃止
noembed Embed Fallback 埋め込みフォールバック 廃止または非推奨の要素 廃止
noframes Frame Fallback フレームフォールバック 廃止または非推奨の要素 廃止
noscript noscript noscript スクリプティング 見出しに正式名称なし
object object object 埋め込みコンテンツ 見出しに正式名称なし
ol Ordered List 順序付きリスト テキストコンテンツ
optgroup optgroup optgroup フォーム 見出しに正式名称なし
option HTML Option HTML オプション フォーム 和訳の正式名称なし
output Output 出力 フォーム
p Paragraph 段落 テキストコンテンツ
param Object Parameter オブジェクト引数 埋め込みコンテンツ
picture Picture 画像 埋め込みコンテンツ
plaintext Plain Text プレーンテキスト 廃止または非推奨の要素 廃止
代わりにpreまたはcodeを使用する
pre Preformatted Text 整形済みテキスト テキストコンテンツ
progress Progress Indicator 進捗表示 フォーム
q Inline Quotation 行内引用 インライン文字列意味付け
rb Ruby Base ルビベース インライン文字列意味付け
rp Ruby Fallback Parenthesis ルビのフォールバック用括弧 インライン文字列意味付け
rt Ruby Text ルビ文字列 インライン文字列意味付け
rtc Ruby Text Container ルビ文字列コンテナー インライン文字列意味付け
ruby ruby ruby インライン文字列意味付け
s s s インライン文字列意味付け 見出しに正式名称なし
samp Sample Output サンプル出力 インライン文字列意味付け
script Script スクリプト スクリプティング
section Generic Section 汎用セクション コンテンツセクショニング
select HTML Select HTML セレクト フォーム 和訳の正式名称なし
shadow obsolete Shadow Root 廃止されたシャドウルート 廃止または非推奨の要素 非推奨
slot slot slot ウェブコンポーネント 見出しに正式名称なし
small side comment 附随コメント インライン文字列意味付け
source Media or Image Source メディアまたはイメージのソース 埋め込みコンテンツ 和訳の正式名称なし
spacer spacer spacer 廃止または非推奨の要素 廃止
見出しに正式名称なし
span span span インライン文字列意味付け 見出しに正式名称なし
strike strike strike 廃止または非推奨の要素 廃止
見出しに正式名称なし
代わりにdelまたはsを使用する
strong Strong Importance 強い重要性 インライン文字列意味付け
style Style Information スタイル情報 文書メタデータ
sub Subscript 下付き文字 インライン文字列意味付け
summary Disclosure Summary 概要明示 インタラクティブ要素
sup Superscript 上付き文字 インライン文字列意味付け
table Table 表 テーブル
tbody Table Body テーブル本体 テーブル
td Table Data Cell 表データセル テーブル
template Content Template コンテンツテンプレート ウェブコンポーネント
textarea textarea textarea フォーム 見出しに正式名称なし
tfoot Table Foot 表フッター テーブル
th th th テーブル 見出しに正式名称なし
thead Table Head 表ヘッダー テーブル
time time time インライン文字列意味付け
title Document Title 文書題名 文書メタデータ
tr Table Row 表の行 テーブル
track Embed Text Track 埋め込みテキストトラック 画像とマルチメディア
tt Teletype Text テレタイプテキスト 廃止または非推奨の要素 廃止
代わりcodeまたはkbdまたはたはvarまたはpreを使用する
u Unarticulated Annotation 非言語的注釈 インライン文字列意味付け 以前は、Underline（下線）と言うデザイン的な意味だったが、意味を重視した名前に変更した
ul Unordered List 順序なしリスト テキストコンテンツ
var Variable 変数 インライン文字列意味付け
video Video Embed 動画埋め込み 画像とマルチメディア
wbr wbr wbr インライン文字列意味付け 見出しに正式名称なし
xmp xmp xmp 廃止または非推奨の要素 廃止
代わりにpreまたはcodeを使用する

最後に

調査した結果、廃止されているものも含めてHTMLタグは140個ありました。
こんなにあるとは思っていなかったので驚いていると同時に、こんなに細分化する必要があるのかと疑問も感じました。
それと、正式名称が無いものもあり対応はバラバラなんだなと感じました。

普段は本を読んで学習する事がほとんどで、今回参考にしたサイトなどは見ることはありませんでした。
しかし、疑問に思ったことを調べるというだけで少しだけではあるけど知らない事を知れたので良かったと思います。
疑問を持って解決するだけで自然と知識量が増えると言う気付きを得られた事が今回の最大の収穫だったと思います。

参考サイト

HTML Living Standard
HTML Living Standard (日本語訳)
MDN Web Docs (英語)
MDN Web Docs (日本語)

  1. 英語版のMDNから抜粋 ↩

  2. 日本語版のMDNから抜粋 ↩

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-08-24T15:39:21+09:00

HTMLタグの略さない正式名

なぜ書こうと思ったか

HTMLのタグって語源は何だろうとふと思い調べたのですが、すでに色々な方が調べていました。
なのでやめようかと思ったのですが、せっかくなので調べる事にしました。

まず、HTML Living Standardから語源となる文章を抜き出したら面白そうかなと思いやり始めましたが、語源となる言葉が無い物が出てきたため路線変更しました。
次に、調べたのがHTML Living Standardで引用しているMDN Web Docsを調べました。
そしたら見出しに語源が載っているのでそちらをまとめる事にしました。

関連用語概要

HTML Living Standardとは

HTML Living Standardは、WHATWGが策定しているHTML5の仕様です。

HTML5の仕様は、W3CとWHATWGの仕様が併存していて両者には差異がありました。
しかし、2019年5月28日にW3CとWHATWGがHTML標準仕様の策定についてHTML Living StandardをHTMLの標準仕様にする事で合意しました。

WHATWGとは

WHATWG (Web Hypertext Application Technology Working Group) は、ウェブ標準の保守や開発を行うためのコミュニティです。
2004年にApple、Mozilla、Opera の従業員たちによって設立されました。
2017年からは、Apple、Mozilla、Google、Microsoftが中心となって活動しています。

MDN Web Docsとは

MDN Web Docs(かつては Mozilla Developer Network(MDN)、その前は Mozilla Developer Center(MDC)として知られ、またDevmoとしても知られていた)
プロジェクトは、2005年初頭、Mozilla Foundationが AOLからオリジナルの Netscape DevEdgeのコンテンツの使用ライセンスを取得した時点から始まりました。
DevEdge のコンテンツの中からまだ使える素材が探し出され、更新と維持が楽になるよう、ボランティアによってwikiに移されました。

2017年7月に名前が MDN Web Docsに変更されました。

様々なWeb技術（HTML、CSS、JavaScript等）の学習用に、リファレンスやチュートリアルがあります。

HTML5 のタグ一覧

語源は、MDNのHTMLリファレンスの見出しから基本的には取得しています。
その他欄に、「見出しに語源なし」の場合はタグをそのまま記載しています。

タグ名1 語源1 語源の和訳2 MDNの分類 その他2
a Anchor アンカー（錨） インライン文字列意味付け
abbr Abbreviation 略語 インライン文字列意味付け
acronym Acronym 頭字語 廃止または非推奨の要素 廃止
代わりにabbrを使用する
見出しに語源なし
address Contact Address 連絡先 コンテンツセクショニング
applet Embed Java Applet 埋め込みJavaアプレット 廃止または非推奨の要素 廃止
代わりにobjectを使用する
area Area エリア 画像とマルチメディア 見出しに語源なし
article Article Contents 記事コンテンツ コンテンツセクショニング
aside Aside 余談 コンテンツセクショニング
audio Embed Audio 埋め込み音声 画像とマルチメディア
b Bring Attention To 注目付け インライン文字列意味付け
base Document Base URL 文書の基底 URL 文書メタデータ
basefont Base Font 基本フォント 廃止または非推奨の要素 廃止
代わりに font, font-family, font-size, colorを使用する
見出しに語源なし
bdi Bidirectional Isolate 書字方向分離 インライン文字列意味付け
bdo Bidirectional Text Override 双方向文字列上書き インライン文字列意味付け
bgsound Background Sound 背景音 廃止または非推奨の要素 廃止
代わりにaudioを使用する
big Bigger Text 大きめの文字列 廃止または非推奨の要素 廃止
代わりにfont-sizeを使用する
blink Blinking Text 点滅文字列 廃止または非推奨の要素 廃止
アクセシビリティが悪いので使用しない
blackquote Block Quotation ブロック引用 テキストコンテンツ
body Document Body 文書の本文 セクショニング
br Line Break 改行 インライン文字列意味付け
button Button ボタン フォーム
canvas Graphics Canvas グラフィックキャンバス スクリプティング
caption 表キャプション Table Caption テーブル
center Centered Text 文字列の中央揃え 廃止または非推奨の要素 廃止
CSSを使用する
cite Citation 引用元 インライン文字列意味付け
code Inline Code 行内コード インライン文字列意味付け
col col col テーブル 見出しに語源なし
colgroup colgroup colgroup テーブル 見出しに語源なし
command HTML Command HTML コマンド 廃止または非推奨の要素 廃止
content Shadow DOM Content Placeholder シャドウ DOM のコンテンツのプレイスホルダー 廃止または非推奨の要素 非推奨
data data data インライン文字列意味付け 見出しに語源なし
datalist HTML Data List HTMLデータリスト フォーム 和訳の語源なし
dd Description Details 詳細説明 テキストコンテンツ
del Deleted Text 削除文字列 編集範囲の特定
detailes Details disclosure 詳細折りたたみ インタラクティブ要素
dfn Definition 定義 インライン文字列意味付け
dialog Dialog ダイアログ インタラクティブ要素
dir Directory ディレクトリ 廃止または非推奨の要素 廃止
div Content Division コンテンツ分割 テキストコンテンツ
dl Description List 説明リスト テキストコンテンツ
dt Description Term 説明用語 テキストコンテンツ
element Custom Element カスタム 廃止または非推奨の要素 廃止
em Emphasis 強調 インライン文字列意味付け
embed Embed External Content 動画埋め込み 埋め込みコンテンツ
fieldset Field Set フィールドセット フォーム
figcaption Figure Caption 図キャプション テキストコンテンツ
figure Figure with Optional Caption 任意のキャプション付きの図 テキストコンテンツ
font font font 廃止または非推奨の要素 廃止
footer footer フッター コンテンツセクショニング 見出しに語源なし
form form form フォーム 見出しに語源なし
frame frame frame 廃止または非推奨の要素 非推奨
代わりにiframeを使用する
frameset frameset frameset 廃止または非推奨の要素 非推奨
h1-h6 HTML Section Heading HTMLの見出し コンテンツセクショニング
head Document Metadata (Header) 文書メタデータ (ヘッダー) 文書メタデータ
header header ヘッダー コンテンツセクショニング 見出しに語源なし
hgroup hgroup hgroup コンテンツセクショニング 見出しに語源なし
hr Thematic Break 主題分割 テキストコンテンツ 以前は、Horizontal Rule（水平線）と言うデザイン的な意味だったが、意味を重視した名前に変更した
html HTML Document / Root HTML 文書 / ルート メインルート
i Idiomatic Text 興味深いテキスト インライン文字列意味付け
iframe Inline Frame インラインフレーム 埋め込みコンテンツ
image obsolete Image 廃止された画像 廃止または非推奨の要素 廃止
代わりにimgを使用する
img Image Embed 画像埋め込み 画像とマルチメディア
input Input (Form Input) 入力欄 (フォーム入力) フォーム
ins ins ins 編集範囲の特定 見出しに語源なし
isindex isindex isindex 廃止または非推奨の要素 廃止
kbd Keyboard Input キーボード入力 インライン文字列意味付け
keygen keygen keygen 廃止または非推奨の要素 非推奨
label label label フォーム 見出しに語源なし
legend legend legend フォーム 見出しに語源なし
li li li テキストコンテンツ 見出しに語源なし
link External Resource Link 外部リソースへのリンク 文書メタデータ
listing listing listing 廃止または非推奨の要素 廃止
代わりにpreまたはcodeを使用する
main main メイン コンテンツセクショニング
テキストコンテンツ		 見出しに語源なし
map map マップ 画像とマルチメディア 見出しに語源なし
mark Mark Text 文字列マーク インライン文字列意味付け
marquee Marquee マーキー 廃止または非推奨の要素 廃止
menu menu メニュー インタラクティブ要素 見出しに語源なし
menuitem menuitem menuitem 廃止または非推奨の要素 非推奨
meta Document-level Metadata 文書レベルメタデータ 文書メタデータ
meter HTML Meter HTML メーター フォーム
multicol HTML Multi-Column Layout HTML 段組みレイアウト 廃止または非推奨の要素 廃止
nav Navigation Section ナビゲーションセクション コンテンツセクショニング
nextid NeXT ID NeXT ID 廃止または非推奨の要素 非推奨
nobr Non-Breaking Text 無改行文字列 廃止または非推奨の要素 廃止
noembed Embed Fallback 埋め込みフォールバック 廃止または非推奨の要素 廃止
noframes Frame Fallback フレームフォールバック 廃止または非推奨の要素 廃止
noscript noscript noscript スクリプティング 見出しに語源なし
object object object 埋め込みコンテンツ 見出しに語源なし
ol Ordered List 順序付きリスト テキストコンテンツ
optgroup optgroup optgroup フォーム 見出しに語源なし
option HTML Option HTML オプション フォーム 和訳の語源なし
output Output 出力 フォーム
p Paragraph 段落 テキストコンテンツ
param Object Parameter オブジェクト引数 埋め込みコンテンツ
picture Picture 画像 埋め込みコンテンツ
plaintext Plain Text プレーンテキスト 廃止または非推奨の要素 廃止
代わりにpreまたはcodeを使用する
pre Preformatted Text 整形済みテキスト テキストコンテンツ
progress Progress Indicator 進捗表示 フォーム
q Inline Quotation 行内引用 インライン文字列意味付け
rb Ruby Base ルビベース インライン文字列意味付け
rp Ruby Fallback Parenthesis ルビのフォールバック用括弧 インライン文字列意味付け
rt Ruby Text ルビ文字列 インライン文字列意味付け
rtc Ruby Text Container ルビ文字列コンテナー インライン文字列意味付け
ruby ruby ruby インライン文字列意味付け
s s s インライン文字列意味付け 見出しに語源なし
samp Sample Output サンプル出力 インライン文字列意味付け
script Script スクリプト スクリプティング
section Generic Section 汎用セクション コンテンツセクショニング
select HTML Select HTML セレクト フォーム 和訳の語源なし
shadow obsolete Shadow Root 廃止されたシャドウルート 廃止または非推奨の要素 非推奨
slot slot slot ウェブコンポーネント 見出しに語源なし
small side comment 附随コメント インライン文字列意味付け
source Media or Image Source メディアまたはイメージのソース 埋め込みコンテンツ 和訳の語源なし
spacer spacer spacer 廃止または非推奨の要素 廃止
見出しに語源なし
span span span インライン文字列意味付け 見出しに語源なし
strike strike strike 廃止または非推奨の要素 廃止
見出しに語源なし
代わりにdelまたはsを使用する
strong Strong Importance 強い重要性 インライン文字列意味付け
style Style Information スタイル情報 文書メタデータ
sub Subscript 下付き文字 インライン文字列意味付け
summary Disclosure Summary 概要明示 インタラクティブ要素
sup Superscript 上付き文字 インライン文字列意味付け
table Table 表 テーブル
tbody Table Body テーブル本体 テーブル
td Table Data Cell 表データセル テーブル
template Content Template コンテンツテンプレート ウェブコンポーネント
textarea textarea textarea フォーム 見出しに語源なし
tfoot Table Foot 表フッター テーブル
th th th テーブル 見出しに語源なし
thead Table Head 表ヘッダー テーブル
time time time インライン文字列意味付け
title Document Title 文書題名 文書メタデータ
tr Table Row 表の行 テーブル
track Embed Text Track 埋め込みテキストトラック 画像とマルチメディア
tt Teletype Text テレタイプテキスト 廃止または非推奨の要素 廃止
代わりcodeまたはkbdまたはたはvarまたはpreを使用する
u Unarticulated Annotation 非言語的注釈 インライン文字列意味付け 以前は、Underline（下線）と言うデザイン的な意味だったが、意味を重視した名前に変更した
ul Unordered List 順序なしリスト テキストコンテンツ
var Variable 変数 インライン文字列意味付け
video Video Embed 動画埋め込み 画像とマルチメディア
wbr wbr wbr インライン文字列意味付け 見出しに語源なし
xmp xmp xmp 廃止または非推奨の要素 廃止
代わりにpreまたはcodeを使用する

最後に

調査した結果、廃止されているものも含めてHTMLタグは140個ありました。
こんなにあるとは思っていなかったので驚いていると同時に、こんなに細分化する必要があるのかと疑問も感じました。
それと、語源が無いものもあり対応はバラバラなんだなと感じました。
色々と勉強になりました。

  1. 英語版のMDNから抜粋 ↩

  2. 日本語版のMDNから抜粋 ↩

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-08-24T13:27:30+09:00

iframeのsandbox属性の動的設定

sandbox属性とは

sandbox属性とはiframe内の要素に対し制約を設定する機能です。
iframe内でjavascriptの実行を無効などすることができます。
属性は以下のような形式で設定することができます。

<iframe sandbox="allow-forms allow-scripts"></iframe>

※設定できる属性についてはMDNを参照。

動的設定方法

sandbox属性は属性を変更するだけでは反映されません。sandbox属性の変更を反映させるには、フレームを再読み込みする必要があります。

<iframe src="frame"></iframe>

const iframe = document.getElementById('frame');
iframe.sandbox.add("allow-top-navigation");     // この段階では反映されない。
iframe.contentWindow.location.reload();         // ここで反映される。

まとめ

如何でしたでしょうか？今回はiframeのsandbox属性の動的設定方法についてまとめて見ました。
今回この記事を作成した理由ですが、sandbox属性を使用する機会があり、属性値を変更したにも関らす、反映され無くてつまったことがあったので作成しました。

記事に間違いや追加してほしい事がありましたら、コメントにご記入ください。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-08-24T10:28:05+09:00

実践 HTML,CSS,JavaScript初級者向け解説 作りたいものから逆算して作るWebアプリ

0.はじめに

どうも、はじめして　いっぺい　です。
HTML,CSS,JavaScriptは使いこなせるようになってくると楽しいです。:sunny:

1.作りたいイメージ

突然ですが、ネットワークグラフってご存知ですか？

スクリーンショット 2020-08-23 22.17.54.png

ネットワークグラフって物事の可視化するのに便利ですよね。

私も考えを整理したくて様々なツールを使ってみたりはしたのですが、

（マインドマップ、マキネーションツール、フローチャート、図形ツール・・・）

どれもピンと来ていなくて

【詳細】それぞれのツールの感想について
・ マインドマップ → 中心から広げられるのはいいけど、枝葉を中心にして伸ばすのは狭い
・ マキネーションツール　→　流れを動かして見れるのはいいけど、もうちょっとシンプルのが欲しい
・ フローチャート → こんな感じでいいけど、情報の保存が難しい。図の保存？編集も大変？
・ 図形ツール　→　文字サイズとかの調整が大変？

:pen_ballpoint:ノートにメモするようにグラフをかいて、整理したり保存したい。（そして、見やすく編集しやすくてシンプルなのがいい）

:star:今回はネットワークグラフを完成させるところまでいきませんが、
HTMLとCSSとJavaScriptが連携して動くところを掴めると思います。

2.欲しい機能

・ 葉っぱを配置する
・ 葉っぱをドラッグで移動させたい

ほんとはもっとある
・ シンプルにテキスト保存したい
・ 保存したテキストは、人に読める形にしたい
・ ブラウザを開けばすぐ書き始められて書き出しもしたい
・ 文字サイズは見やすくしたい
・ 自由に葉っぱを動かしたい（そして枝も追従したい）
・ 葉っぱを追加したい位置に追加したい
・ 保存したデータの読み込みに対応したい
・ 無限に広がるタイプにしたい
・ 葉っぱを素早くドラッグしたら枝を伸ばしたい&つなげたい
・ もちろん葉っぱの名前の編集もしたい

3.それっぽくコーディングしてみる

実装すること

  • テキストボックス
  • 追加ボタン(形だけ)
  • HTML要素をドラッグしたい
  • ほどほどのスタイリング
  • データ構造を決める

スクリーンショット 2020-08-23 23.08.54.png

HTML

タグはシンプルです。

index.html
<!-- 省略 -->
<body>
  <div id="d1"><!-- インプット領域 -->
    <!-- テキストボックス -->
    <input type="text" id="t1">
    <!-- 送信ボタン -->
    <input type="button" id="b1" value="done" onclick="done()">
  </div>
  <div id="d2"><!-- アウトプット領域 -->
  </div>
</body>
<!-- 省略 -->

CSS

葉っぱの要素はposition: fixedにして要素を動かせるようにします。

style.css
/* 余白を取らない設定 */
body {
  margin: 0;
  padding: 0;
}

/* インプット領域 */
#d1 { 
  padding: 5px;
  top: 0;
  width: 100%;
}

/* テキストボックスの横幅 */
#t1 {
  width: 85%;
}

/* ボタンサイズ */
#b1 {
  width: 10%;
}

/* 葉っぱの設定 */
.nodes {
  position: fixed;
  background-color: palegreen;
}

JavaScript

  • 配列にオブジェクトを入れてデータの形を決める
  • 配列からcreateElementで要素を作る
  • その要素をいろいろ設定してdivに追加する
script.js
//JSONの配列に葉っぱのオブジェクトを入れる
let j = [{
  id: 0,
  PosX: 100,
  PosY: 100,
  title: "葉っぱ"
}]

//アウトプット領域の部分を選択
const d2 = document.querySelector("#d2")

//葉っぱを追加する処理を書きたいけど今回はconsole.log
function done() {
　　console.log("done")
}

//上で書いたJSONオブジェクトの配列をループする
//v:配列の中身 i:現在の配列の順番 a:元の配列
j.forEach((v, i, a) => {
  //ラベルタグを作成
  const l = document.createElement('label')

  //タグの文字列
  l.innerHTML = v.title;

  //要素の位置　'px'をつけるのは忘れがち
  l.style.left = v.PosX + 'px'
  l.style.top = v.PosY + 'px'
　　
  //取得できるようにidを設定
  l.id = v.id

　//ドラッグ機能をつける
  l.draggable = true;

  //スタイリング用にクラスをつける
  l.classList.add("nodes")

  //ラベルにイベントリスナーをつける
  l.addEventListener("dragend", (event) => {
    //ドラッグが終わった位置にラベルを配置する
    event.target.style.left = event.clientX + 'px'
    event.target.style.top = event.clientY + 'px'

    //ラベルの座標の位置も更新する
    j[event.target.id].left = event.clientX
    j[event.target.id].top = event.clientY
  })

　//画面に追加
  d2.appendChild(l)
})

4.結果

Webアプリとしての出来としてはしょっぱいですかね？

JSFiddleのサンプル

スクリーンショット 2020-08-23 23.26.25.png

実は、このWebアプリの完成版があったりするのですが、
どうにかしてマネタイズ出来ないかな〜って奮闘しています:joy:

ここまで記事をご覧いただきありがとうございました。:bow:

ぜひ今回のコードを見比べながら実行してみてください:computer:

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-08-24T10:18:53+09:00

「神経衰弱風カードフリップアプリ」の作り方

「神経衰弱風カードフリップアプリ」の作り方

「神経衰弱風カードフリップアプリ」を見て、自分も何か「カードゲームを作ってみたい！！」という欲求が日に日に強くなってきました。
カードをめくって、「同じ数字のペア」のカードを探すゲームなのですが、自分の「記憶力」がスコア化されるので、記憶力を強化したい意欲も湧いてきました。

ゲームの内容

カードの枚数を「１６枚」と「３６枚」から選ぶことができるのですが、「３６枚」はかなり難しいです。
残念ながら正解率は平均「７%」くらいになってしまいました・・・
ゲームのメイン画面はこんな感じです。
image_1.jpg
「１０ゲーム」遊ぶと自分のランクが１０段階のどの位置になるのかが表示されます。
ランクは「最低が１」で「最高が１０」なのですが、自分は「１６マス」が「３」で「３６マス」が「２」でした。
記憶力には自信あったのに・・・・

１６マスのゲーム

マス目の数が少ない「１６マス」のゲームは、
image_2.jpg

のような感じで、「４×４」の１６枚のカードの中から「同じ数字のペア」を見つけていきます。
正解率が、良い時は「５０％」を超えました。
だいたいの位置を覚えているだけでも「３０％」くらいの正解率になったので、「初心者向け」のモードです。

３６マスのゲーム

まったく数字を覚えられなかったのが「６×６」の「３６マス」のモード。
だいたいの位置すらも自分には覚えられないレベルでした・・・
image_3.jpg
「マス目」の位置を覚えるというより、特定ターゲットの数字を絞ってその数字を探した方が、結果的に早くクリアできました。
それでも、１０％ちょっと超えるくらいの正解率でしたが・・・

プログラム言語

ゲームの処理は「Javascript」で作られているのですが、「ゲームエンジン」は使っていないみたい。
UIは「HTML5/CSS3」を使っているとのことで、自分も何かカードを利用したゲームが作れるようになりたいな~

ゲームの作り方は、

～プログラミング初心者のための「神経衰弱風フリップカードアプリ」開発入門～

から見ることができます。
実際にゲームで遊ぶこともできるので、「自分の記憶力を試したい方」や「ゲームの作り方を知りたい方」はぜひ一度見てみてください。

余談・・・

このゲームの作成のお話を一度いただいたのですが、自分には難しそうだったので断ってしまいました。
自分のゲームプログラミングのスキルをもっと上げていかないとまだまだ「カードゲーム」を作るのは難しそう。
いろんなゲームのプログラムを見ると、良い刺激になりますね。
最近はサボり気味なので、またプログラムの勉強を始めたいと思います。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-08-24T07:35:07+09:00

世界各国のハイレベルなポートフォリオ１１選

今まで皆様は何件くらいのポートフォリオを見たことがありますか？求人中に応募が来たら見てみる、くらいが普通であり、ましてや海外のポートフォリオを見る機会がある人は少ないのではないでしょうか。

皆が作ったポートフォリオに少しでもスポットライトが当たるようにと、2年ほど前にまとめサイト現在のPortfilioHubを立ち上げ、今では世界各国のポートフォリオサイト５０００件のデータが集まりました。その中でGithubスター数で上位にランクインするポートフォリオ達のクオリティは凄まじく、その中から私的トップ１１を紹介したいと思います。

スクロールで進行する全体アニメーション系

??イギリス albinotonnina.com by @albinotonnina

star-541
756ceb05b3ccad4c384c698eea94928ae69b8143a3b2f43815108a14e007b6ab.gif
スター数でも私としても迷わず1位にしたのがこちら。スクロールで進んでいくアニメーションは必見です。モバイルでもしっかりレイアウトが計算されています。
これは2020年バージョンですが、前のバージョンも同レベルで凄まじく、ウェブが残っていれば掲載して2位にしたいクオリティです。

??ポルトガル www.sandrina-p.net by @sandrina-p

star-74
418906f0bab8f5c45fbd774445fcace3bf0afe005ec24aa40aff1941b7fa209d.gif
スクロールで進行するアニメーション。モバイルでも専用のアニメーションが再設計されています。

定番スタイル

??インド ashutoshhathidara.com by @ashutosh1919

star-555
075424c3b66d187045826e54225eba15dc4341580bfc6ab26601b2a375d991ad.gif
手書きサインとスクロールで横から入ってくる要素のアニメーションがカッコいいです。
凝ってるポートフォリオサイトほど１ページ構成が多いですが、こちらは複数ページ構成です。モバイルもちゃんと動きます。

??インド parizval.github.io by @parizval

star-3
dc9921d37ab3e6097bfc98c6051a18145c33d9d3fb26d6d5907f79fc599f3e34.gif
スターこそ少ないですが、個人的にアニメーションの作り込みの深さと、本来のポートフォリオの目的としての情報量などではベストな作品だと思います。ですが私のモバイルだと若干レイアウトがズレてしまっているのが残念。PC推奨です。

??ウクライナ cv.gsm-center.com.ua by @tbaltrushaitis

star-167
54b7ca3990ebfe72ab1b5825824ba1806da7e9bbcc94db7fbc88257dea2b3dde.gif
こちらは是非モバイルでもご覧頂きたいです。一定レベル以上になると単なるレスポンシブではなくモバイル専用に再設計されるケースが多いですが、こちらはモバイルの方が完成度が高いです。

??アメリカ gagehenderson.com by @quangogage

star-11
f581206765cae0363dad62320e1e5e985da7b0be5764672bc914381603fb6f26.gif
モバイルがネイティブのレスポンシブを活用しているような印象ですが、どちらでもしっかりアニメーションが効いています。

??フランス moox.io by @MoOx

star-25
7f57b05e84c91a0670283d251be7dbf70eb035d113871228266d07c35822a05d.gif
パッと見た感じ一般的なポートフォリオに見えますが、3D表示の3台のiPhoneは画像ではなく、それぞれリンクが貼られておりに、スクロールで3D上で回転します。

ネタ系

??カナダ h-richard.com by @H-Richard

star-18
dfa087edd1c3de9154e9af2d33d7e3aed4c94903ccd676a9b62eea189ad5e189.gif
グーグルです。グーグルネタ自体は珍しくないですが、検索結果のレイアウトまで作り込んでます。検索結果だけでなく、Image等のタブ毎まで存在しており、すごいです。モバイルも本物と見紛うほど完璧なレイアウトです。

??オーストラリア theden.sh by @TheDen

star-104
6b26629cfb37d6b82becd96552a45255f23ad5b828ad8d9ee8c491ea181e5dd0.gif
ただの緑ターミナル系かと思いきや、ドラッグで各テーブルが動きます！よく見ると古いターミナルを思わせる画面のさざ波や時々起こる色あせ、モノクロ化などエフェクトへの拘りが分かりますね。拘ることが目的化したかのような様相。モバイルはコンテンツが減ってるぽくPC推奨です。

??中国 elevenbeans.github.io/resumeX by @elevenbeans

star-33
9a23d59f076baa97b2b9cb7591f74ec635a068a7b072397d77e9763df3859f64.gif
iPhone上のメッセンジャーでのチャット形式。中国語で分かりませんが、画像なども返答で帰ってきます。モバイルでも同じです。

??アメリカ 1mhz.me by @dukewan

star-17
0892aee4f884a849643d469abff05701e1bec91163ca9a4dab022c1920c9a89b.gif
マリオです。動きます。指示通り方向キーで左右に、スペースでジャンプして箱を叩けばポートフォリオとしてのコンテンツが表示されます。モバイルでは動きませんでしたので、PC推奨

おわりに

いかがでしたでしょうか。特にこれからポートフォリオを作ろうとしている方々の参考になれれば幸いです。

気に入った又は参考になったポートフォリオがあれば、レポジトリにスターでフィードバックをあげましょう。素敵なポートフォリオがもっとフォーカスされる世界になれば嬉しいです。

PortfolioHubへの参加はレポジトリをgithubで公開し、スクレイピングを希望するURLを貼り、トピックに#portfolio-websiteを貼り付けるだけです。数日以内にクローリングされます。日本人ポートフォリオはまだ少ないので皆様奮ってご参加ください。

ご一読ありがとうございました。

参考文献

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

日付別

タグ一覧