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

pタグについて改めて考えてみた

なんとなくで使いがちなpタグ。 本当にpタグでいいのか・・?と疑問が浮かんだので、 HTML標準仕様である Living Standard を参考に改めて考えてみました。 引用: HTML Standard HTML Standard 日本語訳 結論 先に個人的解釈としての結論をまとめました。 1.pタグは段落を明示的に表すタグであり、pタグを使わなくても段落は存在する。 フレージングコンテンツではないフローコンテンツ(昔でいうブロック要素)ごとで段落が区切られる? <h1>見出し</h1> 段落1 <p>段落2</p> <div>  段落1  <ul>   <li>段落2</li>    <li>段落3</li>  </ul>  段落4 </div> 2.pタグよりも適切なタグがある場合はそのタグを使う。(footerタグ、addressタグなども候補になる) liタグやddタグもpタグと同じように段落を作るものとして扱うほうがよさそうです。 ✕:<p>Author: fred@example.com</p> 〇:<address>Author: fred@example.com</address> ✕:<li> <p>hoge</p> <p>hugo</p> </li> 〇:<li>hoge</li> <li>hugo</li> 3.inputやimgやaタグなどのフレージングコンテンツを段落として扱いたかったらpタグで囲う。 フレージングコンテンツが連続していると一つの段落とみなされる? ので段落として扱いたい場合はpタグもしくは他の段落を表すタグを使用する。 <p><label>Name: <input name="n"></label></p> <p><img src="hoge.jpg" alt="段落として扱いたい画像"></p> pタグ Living Standard 内のpタグの記述を見ていきます 基本情報 カテゴリー: フローコンテンツ。 パルパブルコンテンツ。 この要素を使用できるコンテキスト: フローコンテンツが期待される場所。 コンテンツモデル: フレージングコンテンツ。 text/htmlにおけるタグ省略: p要素がaddress、article、aside、blockquote、details、div、dl、fieldset、figcaption、figure、footer、form、h1、h2、h3、h4、h5、h6、header、hgroup、hr、main、menu、nav、ol、p、pre、section、table、ul要素の直後に存在する場合、または親要素で追加のコンテンツが存在せずかつ親要素がa、audio、del、ins、map、noscript、video要素、または自律カスタム要素でないHTML要素である場合、p要素の終了タグは省略することができる。 p要素は段落を表す。   パルパブルコンテンツなので基本的に中身が必要であるということと、 終了タグを省略できる場合があるということくらいですね。(あまりお勧めできませんが、、) Note 段落は通常、視覚的なメディアでは隣接するブロックから物理的に空白行で区切られたテキストのブロックによって表されますが、スタイルシートまたはユーザーエージェントは、たとえばインラインピルクロウを使用するなど、別の方法で段落の区切りを提示することで等しく正当化されます(¶) 。   ピルクロウという段落記号(¶)を使うことでも段落を表すことができる。 ということですかね、、? Example1 <p>The little kitten gently seated herself on a piece of carpet. Later in her life, this would be referred to as the time the cat sat on the mat.</p> <fieldset> <legend>Personal information</legend> <p> <label>Name: <input name="n"></label> <label><input name="anon" type="checkbox"> Hide from other users</label> </p> <p><label>Address: <textarea name="a"></textarea></label></p> </fieldset> <p>There was once an example from Femley,<br> Whose markup was of dubious quality.<br> The validator complained,<br> So the author was pained,<br> To move the error from the markup to the rhyming.</p>   簡単な例ですが、 inputなどのフレージングコンテンツを段落としたい箇所はpタグで囲む ということがわかります。 Example2 より具体的な要素がより適切な場合は、p要素を使用しないでください。 次の例は技術的に正しいです: <section> <!-- ... --> <p>Last modified: 2001-04-23</p> <p>Author: fred@example.com</p> </section> ただし、次のようにマークアップする方が適切です。 <section> <!-- ... --> <footer>Last modified: 2001-04-23</footer> <address>Author: fred@example.com</address> </section> または: <section> <!-- ... --> <footer> <p>Last modified: 2001-04-23</p> <address>Author: fred@example.com</address> </footer> </section>   pタグ以外に適切なタグがあればそれを使用する 適切なタグがないか探す必要があります。 Example3 リスト要素(特に、ol要素とul要素)は、p要素の子にすることはできません。したがって、文に箇条書きが含まれている場合、どのようにマークアップする必要があるのか​​疑問に思うかもしれません。 For instance, this fantastic sentence has bullets relating to ・wizards, ・faster-than-light travel, and ・telepathy, and is further discussed below. 解決策は、HTML用語の段落が論理的な概念ではなく、構造的なものであることを認識することです。 上記の素晴らしい例では、この仕様で定義されているように、実際には5つの段落があります。リストの前に1つ、各箇条書きに1つ、リストの後に1つです。 したがって、上記の例のマークアップは次のようになります。 <p>For instance, this fantastic sentence has bullets relating to</p> <ul> <li>wizards, <li>faster-than-light travel, and <li>telepathy, </ul> <p>and is further discussed below.</p> 複数の「構造」段落で構成されるこのような「論理」段落のスタイルを簡単に設定したい作成者は、p要素の代わりにdiv要素を使用できます。 したがって、たとえば上記の例は次のようになります。 <div>For instance, this fantastic sentence has bullets relating to <ul> <li>wizards, <li>faster-than-light travel, and <li>telepathy, </ul> and is further discussed below.</div> この例にはまだ5つの構造段落がありますが、今では作成者は例の各部分を個別に考慮する必要がなく、divだけをスタイルできます。   構造段落、論理段落の解釈がとても難しいですが、 この例で重要な点は、 pタグで囲わなくてもHTMLは段落と認識する ということだと思います。 ただ疑問点は残るのでHTMLにおける段落(Paragraphs)そのものの定義の章があったのでそちらも見ていきます。 段落(Paragraphs) Note このセクションで定義されている段落という用語は、p要素の定義以外にも使用されます。ここで定義されている段落の概念は、ドキュメントの解釈方法を説明するために使用されます。 p要素は、段落をマークアップするいくつかの方法の1つにすぎません。 段落は通常、タイポグラフィーのように、特定のトピックについて説明する1つ以上の文でテキストのブロックを形成する一連のフレージングコンテンツですが、より一般的な主題のグループ化にも使用できます。たとえば、住所、フォームの一部、署名欄、または詩のスタンザと同様に、段落でもあります。 pタグは段落をマークアップする方法の1つであり、pタグ以外のタグも段落を表すことができる pタグの例にもありましたがaddressタグやliタグもHTMLでは段落とみなすということかなと思います。 Example 次の例では、セクションに2つの段落があります。また、段落ではないフレージングコンテンツを含む見出しもあります。コメントおよび要素間の空白が段落を形成しないことに注意してください。 <section> <h1>Example of paragraphs</h1> This is the <em>first</em> paragraph in this example. <p>This is the second.</p> <!-- This is not a paragraph. --> </section> この章では、pタグで囲っていない文に対して一つ目の段落ですと述べているので、 pタグで囲わなくてもHTMLは段落と認識する ことが明確になりました。 これ以降の内容はpタグそのものにはあまり関係なさそうだったので割愛します。 まとめ やはりそもそもの英文が難しかったり翻訳の関係で解釈が人によって異なるのは仕方ないと改めて思いました、、。 別の解釈や間違い等ありましたらコメントにてご指摘お願いしますm(_ _)m。
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

中学1年生がCADソフトを自作した話

noteで書きました→ https://note.com/ittakun/n/nd529757c6ff1
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

回転する見た目も実装、jQueryで作るコイントスシステム

どうも7noteです。コインが回転するコイントスシステムを作った コイントスで調べると、表と裏がランダムで表示されるレベルのコイントスシステムはあったのですが、実際にコインが空中で回転するような見た目のコイントスはなかったので作ってみました。 コイントスシステムのソース index.html <div class="coin"></div> style.css .coin { width: 50px; /* コインの幅 */ height: 50px; /* コインの高さ */ background: url(omote.png) no-repeat center / 100% auto; /* 背景にコインの画像を設定 */ position: relative; /* 表示位置を変更するために必要 */ cursor: pointer; /* hover時にカーソルを指の形にする */ } .coin.toss { animation : toss 0.3s linear infinite,toss2 0.3s infinite steps(1, end),updown 2s ease; /* anime「toss」、anime「toss2」、anime「updown」 */ } /* X軸を基準に回転させるアニメーション */ @keyframes toss{ 0% { transform:rotateX(0deg); } 100% { transform:rotateX(360deg); } } /* 表裏を切り替えるアニメーション */ @keyframes toss2{ 25% { background-image: url(ura.png); } 75% { background-image: url(omote.png); } } /* コインを上下させるアニメーション */ @keyframes updown{ 0% { top: 0; } 50% { top: -100px; } 100% { top: 0; } } script.js $(function(){ $('.coin').not(':animated').on('click',function(){ /* ランダムで0か1を取得 */ rndm = Math.floor( Math.random() * 2 ); /* アニメーションを開始させる */ $(this).addClass('toss'); /* 1.9秒後にアニメーションを停止し、コインの裏表を表示する */ setTimeout(function(){ $('.coin').removeClass('toss'); if(rndm == 1){ $('.coin').css(`background-image`,`url(ura.png)`); } else { $('.coin').css(`background-image`,`url(omote.png)`); } },1900); }); }); ※jQueryを使用しています。jQueryについてはこちら 解説 ・3種類のcssアニメーション ・jsでの表裏のランダム、アニメーションの起動 大きくこの2つに分けて解説します。 ▼ 3種類のcssアニメーション アニメーションは3つのアニメーションをカンマ区切りで書いて1行にしているだけですのでこれも分けて解説していきます。 「toss」 .coin { animation : toss 0.3s linear infinite; /* 0.3秒ごとにアニメーションを繰り返す */ } /* X軸を基準に回転させるアニメーション */ @keyframes toss{ 0% { transform:rotateX(0deg); } 100% { transform:rotateX(360deg); } } X軸、つまり コインを(ー)←この向きを軸として回転をさせるアニメーションです。 「toss2」 .coin { animation : toss2 0.3s infinite steps(1, end); /* 0.3秒ごとにアニメーションを繰り返す。かつ徐々にではなくコマ割りで動かす。 */ } /* 表裏を切り替えるアニメーション */ @keyframes toss2{ 25% { background-image: url(ura.png); } 75% { background-image: url(omote.png); } } 表のコインを回転させるだけでは、コインが回転してもずっと表の絵が見えてしまうので、コインが反転したタイミング、つまりコインが回転する際に横一線になる瞬間の25%時間経過したタイミングで裏に、75%時間経過したタイミングでまた表に戻すことで表裏のあるコインが回転しているように見せることができます。 通常backgroundはアニメーションを指定すると徐々に変化してしまうので、表の文字がどんどん薄くなる・・・みたいなことになってしまうのでそうならないようにsteps(1, end)を指定することで、コマ撮りのような瞬時に切り替わる設定を入れています。 「updown」 .coin { animation : updown 2s ease; /* 2秒かけて1回アニメーションする */ } /* コインを上下させるアニメーション */ @keyframes updown{ 0% { top: 0; } 50% { top: -100px; } 100% { top: 0; } } topの指定を変更することで、コインを空中に飛ばすようなアニメーションになります。 ▼ jsでの表裏のランダム、アニメーションの起動 jsに関してはほぼコメントを入れている通りの処理を順番に行っているだけです。 $(function(){ $('.coin').not(':animated').on('click',function(){ /* ランダムで0か1を取得 */ rndm = Math.floor( Math.random() * 2 ); /* アニメーションを開始させる */ $(this).addClass('toss'); /* 1.9秒後にアニメーションを停止し、コインの裏表を表示する */ setTimeout(function(){ $('.coin').removeClass('toss'); if(rndm == 1){ $('.coin').css(`background-image`,`url(ura.png)`); } else { $('.coin').css(`background-image`,`url(omote.png)`); } },1900); }); }); コインがクリックされた時 ↓ ランダムで0か1を決定、かつtossアニメーションを開始させるためにクラス「toss」を付与 ↓ 1.9秒後にアニメーションを停止させるためにクラス「toss」を取り除く。かつ0か1の値を取得してそれに合わせて表示する画像を決定。 こんな感じの流れになりますね。 まとめ 本当はcssだけで作りたかったのですがランダムを再現しようと思うとさすがに骨が折れそうだったので、js便りになってしまいました。 cssマスターならきっとランダムっぽい再現もできるのかもしれませんがまだまだ勉強不足を感じます。 私的にはきれいにアニメーションを作ることができたので、webのオンラインゲーム等を作成するときにはぜひ使ってみたいですね。 jsを追加して、これまで出た表か裏かを画面端に記録していくようなシステムなんかも追加してもいいかもしれませんね。 画像データ:いらすとやよりお借りしました。 https://www.irasutoya.com/2017/12/blog-post_410.html おそまつ! ~ Qiitaで毎日投稿中!! ~ 【初心者向け】WEB制作のちょいテク詰め合わせ
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

CSSについて

CSSでタグを指定することがあると思います。 例えば、li{ } みたいな感じです。しかし、これではファイル内のすべてのにcssが適応されてしまいますので、 .class名 li { } とすると該当するclass名のにのみ適応されます。
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

Pタグとwidthの相性の悪さの落とし穴にハマったので報告します

Pタグの横幅設定にwidthすれば余裕で横幅調整できると思っていたら落とし穴にハマったので ご報告します。 ↓普通のPタグで日本語文字と意図しない文字、そして数字を囲ってみました。 <p>おはようございます。こんにちは。こんばんは。おはようございます。こんにちは。こんばんは。おはようございます。こんにちは。こんばんは。おはようございます。こんにちは。こんばんは。</p> <p>hogohogohogohogohogohogohogohogohogohogohogohogohogohogohogohogohogohogohogohogohogohogohogohogohogohogohogohogo</p> <p>1234567891012345678910123456789101234567891012345678910123456789101234567891012345678910</p> p { width: 200px; border: 1px solid black; } 結果↓ 日本語文字は、widthにきっちり納まってくれてます。 意図しない文字と数字はwidthの横幅からはみ出てしまいました 次に、heightを設定したらどうなるか?検証してみます p { width: 200px; height: 250px; ※ border: 1px solid black; } きちんと縦幅、横幅は設定されています 検証ツールで確認しても同じです。 はみ出さない様に設定してあげるには p { width: 200px; height: 250px; border: 1px solid black; word-wrap: break-word; ※ } word-wrap: break-word;を設定したら無事『枠』に納まりました。 では、何故『意図しない文字と、数字』はwidhth設定の枠からはみ出てしまうのか。 色々調べてみたら、問題解決に参考になった記事がありましたのでリンクします。 文字がはみ出してしまう 参考: css – ブロックレベルから文字がはみ出してしまう 半角などの隙間がない英字(英単語の形ではないもの)だと、どこで折り返していいか分からず、そのまま伸びちゃってる現象です。  まとめ 半角で隙間のない英数字は、折り返し地点が不明になるので落とし穴にハマってしまう現象に陥ってしまう。 word-wrap: break-word; を設定してあげるか、隙間のある英数字とするか。 これで一応問題は解決しました。 pタグの文章がまだ決まっていない際「なんでも文章にしとおけば良い」とは限らずで 意外な部分にpタグとwidthの相性の悪さがありました。 ただ、問題は解決したので一安心 引き続き、codeを書き沢山エラーを出して解決力を向上させていきます。 今回は以上です ありがとうございます!
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

Boilerplate と Template は何が違うのでしょうか?

疑問: Boilerplate と Template は何が違うのでしょうか? 結論 Boilerplate は、実際のテキストや画像を提供する。コピー&ペーストしたら使える。 Template は、文書の構造やレイアウトを提供する。コピー&ペーストだけではなく中身を埋めてもらうことを想定している。 ようだ。以下辺りを読んでみた。(ざっくり翻訳し引用。) What's the difference between a boiler plate and a template? What is boilerplate and why do we use it? Necessity of coding style guide Boilerplate と Template の違いは何か? Boilerplate とはコピー&ペーストで文書に追加するだけのもの。Boilerplate は、条件や注意事項などを記載し、言葉を使い回している契約書によく見られる。 大まかに言えば、Template とは、新しいオブジェクトを作成するためのモデルやパターンのこと。ライティングの世界では、履歴書などの標準化されたフォームであり、ライターが自分のバージョンを作り上げるために使用するもの。 Boilerplate とは異なり、Template は特定の用途に合わせて作られる。 Template も Boilerplate も、使い方を誤ると、ビジネス文書を堅苦しく、人工的なものにしてしまう。 しかしもちろん文脈によりけりでもありそう。以下まとめる。 Boilerplate とは ボイラープレートコード コンピュータプログラミングでは、殆ど、または全く変化することなく、複数の場所で繰り返される定型コードのセクションのこと。冗長な言語を使用する場合、プログラマーはコードを少しだけ書くだけでも多くのコードを作成する必要がある。このような定型コードはボイラープレートと呼ばれる 例えば以下は、「HTMLのボイラープレート」。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"/> <title></title> </head> <body> </body> </html> Boilerplate 例 Template 一方のテンプレート。 文書などのコンピュータデータを作成する上で雛形となるデータ、あるいは雛形そのもの。 最も抽象的なテンプレートは、レイアウトのみのデータで、テキストを流し込むことでレイアウトつき文書となる。 そういえばデザインパターンにもあった。 テンプレートエンジン テンプレート (プログラミング) Template 例 しかし注意してみると 例に上げた HTML5 Boilerplate、よく見ると most popular front-end template と書いてある。いやいや、よく見ると HTML email boilerplate も downloadable email marketing templates と言っている ... Boilerplate ひな型 というブログを引用すると以下らしい。 「あのさ、意味は大体分かってるんだけど、どうしてボイラーが出てくるの?」 「さあねえ。どうしてだろう。考えたことなかったよ。テンプレートと同じ意味なんだけどね。」 「うん、知ってる。でもそれじゃ、どうしてテンプレートって呼ばないのかな。」 「ちょっと気取った(edgy)言い方をしたい時に使う表現なんだよ。」 まとめ Boilerplate は、実際のテキストや画像を提供する。コピー&ペーストしたら使える。 Template は、文書の構造やレイアウトを提供する。コピー&ペーストだけではなく中身を埋めてもらうことを想定している。 総合して冒頭のとおりそう書いたが大事なのは文脈を読んで、自身のサイトづくりに、モックアップづくりに、提供者の意図を考えて活用することだとおもう。以上、参考になればさいわいです。
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

相席居酒屋風時計を作ってみた

はじめに 大阪を歩いていると、相席居酒屋の看板が目に入る時ありますよね。 お店によっては、現時点での男性客と女性客の人数が表示されてるのですが、 ほとんど女性客のほうが多いイメージがあって、これ実は時計なんじゃね...?って思ったんで 最近javascriptの勉強を始めだしたこともあり、勉強がてら作成してみました。 作成物 javascript やってることは、1秒毎に現在の時間、分を特定のIDを持つ場所に出力しているだけです。 const hoursClock = () => { const now = new Date(); const hours = now.getHours(); document.getElementById("hours").innerHTML = hours } const minutesClock = () => { const now = new Date(); const minutes = now.getMinutes(); document.getElementById("minutes").innerHTML = minutes } hoursClock(); minutesClock(); setInterval(hoursClock, 1000); setInterval(minutesClock, 1000); 終わりに すごく簡単なものではありますが、寝る前に思いついたものを1時間程度で形にできたので、楽しかったです。 更に勉強を重ねて、いつかは社会の役に立ちそうなものを作りたい。。。
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む