- 投稿日：2019-05-22T20:01:40+09:00
【Javascript】多段階アンドゥの実装覚書
きっかけ
お世話になっている施設でアンケート集計のお仕事がきた
Excelは良いソフトだがプルダウンメニュー選択がクソで大嫌いです
そこでJavascriptを使って集計用のアプリ(?)を作成してみましたアンドゥ？
個人的には一段階だけでも十分だと思ったのですが意見として多段階アンドゥの実装をと出たので頑張って作ってみました
コード
スパゲッティすぎて説明もできないので全文のっけます
html
index.html<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="workSheet.css"> <title>アンドゥの実装</title> </head> <body> <div class="table"> <!-- 区切り文字・開始番号 --> <form id="punctuationAndStartNum" class="tableRow"> <span class="tableCell textAlignRight">セルの区切りを選択：</span> <span class="tableCell"> <select id="punctuation"> <option value=" ">タブ区切り</option> <option value=",">カンマ区切り</option> <option value=" ">半角空白区切り</option> </select> <span class="textAlignRight">開始番号：</span> <input id="startNum" type="text" size="3" value="1" onchange="startN();"> </span> </form> <!-- 区切り文字・開始番号 end --> <!-- 性別 --> <form class="tableRow"> <span class="tableCell textAlignRight">性別を選択：</span> <select id="sex" class="tableCell" autofocus> <option value="男">男</option> <option value="女">女</option> <option value="記載無し">記載無し</option> <option value="質問項目無し">質問項目無し</option> </select> </form> <!-- 性別 end --> <!-- 年代 --> <form class="tableRow"> <span class="tableCell textAlignRight">年代を選択：</span> <select id="age" class="tableCell"> <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> </form> <!-- 年代 end --> <!-- 知ったきっかけ --> <form class="tableRow"> <span class="tableCell textAlignRight">知ったきっかけ：</span> <select id="trigger" class="tableCell"> <option value="公式ウェブサイト">公式ウェブサイト</option> <option value="Facebook">Facebook</option> <option value="twitter">twitter</option> <option value="知人からの紹介">知人からの紹介</option> <option value="メール">メール</option> <option value="ブログ">ブログ</option> <option value="お知らせハガキ">お知らせハガキ</option> <option value="その他">その他</option> <option value="記載無し">記載無し</option> <option value="質問項目無し">質問項目無し</option> </select> </form> <!-- 知ったきっかけ end --> <!-- その他の理由 --> <form class="tableRow"> <span class="tableCell textAlignRight">その他の理由：</span> <input id="other" class="tableCell" type="text" size="50" autocomplete="off" placeholder="その他の理由を記入してください。"> <input type="text" size="50" autocomplete="off" placeholder="見えないハス" style="display: none;"><!-- 改行入力無効化の為 --> </form> <!-- その他の理由 end --> <!-- 問い合わせ内容 --> <form class="tableRow"> <span class="tableCell textAlignRight vaTop">問い合わせ内容：</span> <textarea id="inquiry" class="tableCell" name="name" rows="8" cols="50" placeholder="問い合わせ内容を記入してください。"></textarea> </form> <!-- 問い合わせ内容 end --> <!-- 備考欄 --> <form class="tableRow"> <span class="tableCell textAlignRight vaTop">備考欄：</span> <textarea id="nb" class="tableCell" name="name" rows="3" cols="50" placeholder="備考を記入してください。"></textarea> </form> <!-- 備考欄 end --> <!-- 入力・取消・コピー・削除ボタン --> <form class="tableRow"> <span class="tableCell textAlignRight"></span> <div class="tableCell"> <input class="outputButton" type="button" value="入力" onclick="main();"> <input class="outputButton" type="button" value="取消" onclick="oneStepBack();"> <span> </span> <input class="outputButton" type="button" value="Copy" onclick="copyTextToClipboard(fullText);"> <input class="outputButton" type="button" value="全削除" onclick="removeText();"> </div> </form> <!-- 入力・取消・コピー・削除ボタン end --> <!-- 出力 --> <div class="tableRow"> <span class="tableCell textAlignRight vaTop">確認用テーブル：</span> <div id="makedTable" class="tableCell"> <table> <tr> <th>番号</th> <th>性別</th> <th>年代</th> <th>きっかけ</th> <th>その他理由</th> <th>問い合わせ内容</th> <th>備考</th> </tr> </table> </div> </div> <form class="tableRow"> <span class="tableCell textAlignRight vaTop">出力内容：<br> <input id="hide" class="outputButton" type="button" value="表示" onclick="expression();"></span> <textarea id="output" class="tableCell" style="display: none;" rows="3" cols="50" placeholder="フォーマットに合わせて出力されます。"></textarea> </form> <div class="tableRow"> <span class="tableCell textAlignRight">xlsxファイル：</span> <input id="dl-xlsx" class="tableCell outputButton" type="button" value="Download XLSX"> </div> <div class="tableRow" style="display: none;"> <!-- 目隠し --> <span class="tableCell textAlignRight vaTop">出力用テーブル：</span> <div id="excelTable" class="tableCell"> <table> <tr> <th>番号</th> <th>性別</th> <th>年代</th> <th>きっかけ</th> <th>その他理由</th> <th>問い合わせ内容</th> <th>備考</th> </tr> </table> </div> </div> <!-- 出力 end --> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.9.10/xlsx.full.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.min.js"></script> <script src="export-xlsx.js"></script> <script src="workSheet.js"></script> </body> </html>CSS
もったいぶってcss
workSheet.css@charset "UTF-8"; * { margin: 5px; font-size: 15px; } span { white-space: nowrap; } input, textarea { border: solid 1px gray; border-radius: 2px; background: #eee; } table, tr { margin: 0; padding: 0; } th, td { min-width: 30px; max-width: 170px; margin: 0; padding: 5px; border: solid 1px gray; text-align: center; } #startNum { text-align: center; } .table { display: table; } .tableRow { display: table-row; } .tableCell { display: table-cell; box-sizing: border-box; /* border: solid 1px green; */ } .textAlignRight { text-align: right; font-weight: bold; } .vaTop { padding-top: 7px; vertical-align: top; } .outputButton { height: 35px; padding: 5px; border: solid 1px black; border-radius: 5px; font-size: 15px; }js
やっとjsです
workSheet.jsconst output = document.getElementById('output'); const punctuationAndStartNum = document.getElementById('punctuationAndStartNum'); const makedTable = document.getElementById('makedTable'); const makedExcelTable = document.getElementById('excelTable'); const startNum = document.getElementById('startNum'); var count = 0; var excelNum = 0; var initialValue = 0; var oneStepBackNum = 0; var fullText = ''; var oneStepBackText = []; // 取消用 var oneStepBackTable = []; // 取消用 var oneStepBackExcel = []; // 取消用 const tag = '<tr><th>番号</th><th>性別</th><th>年代</th><th>きっかけ</th><th>その他理由</th><th>問い合わせ内容</th><th>備考</th></tr>' var tableText = ['<table>' + tag, '', '</table>']; var excelTable = ['<table class="table-to-export" data-sheet-name="testExcel">' + tag, '', '</table>'] function main() { const punctuationId = document.getElementById('punctuation'); const punctuation = punctuationId.value; var joined = ''; var joinedExcel = ''; const sex = document.getElementById('sex'); const sexValue = sex.value; const age = document.getElementById('age'); const ageValue = age.value; const trigger = document.getElementById('trigger').value; const other = document.getElementById('other'); var otherValue = other.value.replace(/ /g, ' '); // 半角スペースを全角にする。 const inquiry = document.getElementById('inquiry'); var inquiryValue = inquiry.value.replace(/ /g, ' '); // 半角スペースを全角にする。 var inquiryValueDQ = ('"' + inquiryValue + '"'); const nb = document.getElementById('nb'); var nbValue = nb.value.replace(/ /g, ' '); // 半角スペースを全角にする。 var nbValueDQ = ('"' + nbValue + '"'); if(trigger === 'その他' && otherValue === '') { alert('その他の理由を入力してください'); other.focus(); return; } else if(trigger != 'その他' && otherValue != '') { alert('"知ったきっかけ"または\n"その他の理由"をみなおしてください'); other.focus(); return; } otherValue = tabCheck(otherValue); inquiryValueDQ = tabCheck(inquiryValueDQ); nbValueDQ = tabCheck(nbValueDQ); inquiryValue = tabCheck(inquiryValue); nbValue = tabCheck(nbValue); if(otherValue === false || inquiryValueDQ === false || nbValueDQ === false) { return; } joined = sexValue + punctuation + ageValue + punctuation + trigger + punctuation + otherValue + punctuation + inquiryValueDQ + punctuation + nbValueDQ; joinedExcel = sexValue + punctuation + ageValue + punctuation + trigger + punctuation + otherValue + punctuation + inquiryValue + punctuation + nbValue; count += 1; oneStepBackExcel.push(excelTable[1]); // 取消用 oneStepBackTable.push(tableText[1]); // 取り消し用 tableText[1] = tableMake(joinedExcel, punctuation) + tableText[1]; excelTable[1] += tableMake(joinedExcel, punctuation); makedTable.innerHTML = tableText.join(''); makedExcelTable.innerHTML = excelTable.join(''); oneStepBackText.push(fullText); // 取り消し用 console.log(oneStepBackText); fullText += (joined + '\n'); output.value = fullText; const line = countLine(fullText); output.style.height = (line * 1.5) + 'em'; sex.focus(); other.value = ''; inquiry.value = ''; nb.value = ''; punctuationAndStartNum.style.display = 'none'; oneStepBackNum = 1; } // main end // 最初の番号を取得し-1する function startN() { excelNum = startNum.value - 1; initialValue = startNum.value - 1; } // 取消！ function oneStepBack() { if(fullText != oneStepBackText) { count -= 1; tableText[1] = oneStepBackTable[count]; excelTable[1] = oneStepBackExcel[count]; fullText = oneStepBackText[count]; oneStepBackTable.pop(); oneStepBackExcel.pop(); oneStepBackText.pop(); makedTable.innerHTML = tableText.join(''); makedExcelTable.innerHTML = excelTable.join(''); output.value = fullText; } else if(count === initialValue && initialValue === oneStepBackNum) { alert('まだ何もしてません'); sex.focus(); } else if(fullText === '') { alert('取り消しはもうできません'); sex.focus(); } } // タブが入力されてたら function tabCheck(str) { var tab = str.indexOf(' '); if(tab != -1){ str = str.replace(/ /g, ' '); if(confirm('タブは全角空白に置き換えます')) { return str; } else { alert('入力は取り消されました'); return false; } } return str; } // テーブル作ります function tableMake(str, punctuation) { str = str.split(punctuation); for(var i = 0; i < str.length; i++) { if(i === 0) { str[i] = '<tr><td>' + (excelNum + count) + '</td><td>' + str[i] + '</td>'; } else if(i === (str.length - 1)) { str[i] = '<td>' + str[i] + '</tr></td>'; } else { str[i] = '<td>' + str[i] + '</td>'; } } str = str.join(''); return str; } // コピーボタン function copyTextToClipboard(textVal){ if(textVal != '') { // テキストエリアを用意する var copyFrom = document.createElement("textarea"); // テキストエリアへ値をセット copyFrom.textContent = textVal; // bodyタグの要素を取得 var bodyElm = document.getElementsByTagName("body")[0]; // 子要素にテキストエリアを配置 bodyElm.appendChild(copyFrom); // テキストエリアの値を選択 copyFrom.select(); // コピーコマンド発行 var retVal = document.execCommand('copy'); // 追加テキストエリアを削除 bodyElm.removeChild(copyFrom); // 処理結果を返却 return retVal; } else { alert('結果が出力されていません'); } } // 全削除 function removeText() { if(window.confirm('リセットしますか？\n取り消しはできません。')) { location.reload(); } } // 出力内容表示・非表示 function expression() { const hide = document.getElementById('hide'); if(hide.value === '表示') { output.style.display = 'inline'; hide.value = '隠す'; } else { output.style.display = 'none'; hide.value = '表示'; } } // 出力の行数カウント function countLine(str) { num = str.match(/\r\n|\n/g); if(num != null){ line = num.length + 3; } else { line = 1; } return line; }※Excelファイルの出力には下記リンクからjsファイルを作ってください
以上最後に
二次元配列でもっとスマートにできそうな気がしますが今回はここまでとしておきます
コピペ用のテキストもクリップボードに吐き出せますし
Excelファイルも作れますコピーはここから拝借しました
JavaScript でテキストをクリップボードへコピーする方法Excelファイルの出力はこちらから
HTMLのTableをExcelに出力するJavaScript - Qiitaレイアウト等のセンスのなさはご勘弁を…
追記
アップした後にいじってみたらundoよりも根本的なミスを…
訂正しました
- 投稿日：2019-05-22T18:13:28+09:00
CSSで背景動画
自分用メモです
参考サイト
CSSだけで実装可能！画面いっぱいに動画背景を表示する方法参考サイトではmuted属性について触れていなかったので追加。
これがないとChromeで再生されませんでした。HTML<div class="section"> <video id="bg-video" src="file/sample.mp4" poster="poster.jpg" autoplay loop muted></video> <div class="wrap"> コンテンツが入ります </div> </div>
.sectionで背景にグレーのオーバーレイ、
#bg-videoで背景に動画を再生、
.wrap内でコンテンツを表示しています。CSS#section{ background: rgba(0, 0, 0, 0.6); } #section #bg-video{ position: fixed; right: 0; bottom: 0; min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: -100; background: url('poster.jpg') no-repeat; background-size: cover; }videoタグの属性
属性 内容 controls 操作パネルの表示 muted 無音で再生 autoplay 自動再生 loop 繰り返し再生 poster 動画が表示できない場合や、再生する準備が整うまでの間に表示される画像を指定 playsinline iOSでvideoタグをインライン再生（iOS10から）
- 投稿日：2019-05-22T16:34:18+09:00
超初心者用！よく使う基本的なタグ
どこから覚えればいいんだろう？と思ったら参考にしてください。
（本当は100種類以上あります。知りたい方はページ下部のリンクご参考ください。）
- よく使うタグ
- div
- section
- p
- ul li
- ol li
- dl dt dd
- span
- br
- figure img
- a
- 使うかもしれないタグ
- sup
- sub
- small
- strong
- 迷ったらdiv（section or div どっち???となった時の話）
- 出来るだけIDにスタイル指定 しない
- 出来るだけタグに直接スタイル指定 しない
- スタイル指定は出来るだけクラスにする
- 入れ子しすぎない（コピペなどでも必要なものだけ抜粋する）
- 最初はだいたいコピペで閉じタグの過不足で失敗するので注意
例） <div class="sample"> <div> <ul> <li>アイウエオ</li> <li>アイウエオ</li> <li>アイウエオ</li> <li>アイウエオ</li> </ul> </div> </div>
htmlの基本構造
<!DOCTYPE html> <!-- html5 の宣言文です。現在の主流です。 まだ古いものも残っていますがひとまず古いものは気にしないでください。 （ただし、宣言文によって書き方が多少異なるのでお仕事の際はちゃんと確認しましょう） 参考 → https://www.webdlab.com/html/document-doctype/ --> <html lang="ja">〜<html> <!-- htmlタグとlang属性です。languageの略。jaならjapanese,enならenglish。 --> <head>〜</head> <!-- titleやkeywordなどのページの基本情報やcssやjsを読み込む記述を書くところ。 --> <body>〜</body> <!-- ページに表示させるコンテンツを記述するところ。 -->基本構造の組み方
<!DOCTYPE html> <html lang="ja"> <head> 〜 </head> <body> 〜 </body> <html>参考サイト
未経験から7日間でコーダーとして現場投入させるまでのカリキュラムを忘れないようにメモっとく
↓タグ辞典的なサイト x3 ※お好みで好きなものをみてください。
HTML5リファレンス
TAG index
HTML5 タグリファレンス
- 投稿日：2019-05-22T07:13:55+09:00
HTMLとCSSのパフォーマンス改善について
今回は、HTMLとCSSのパフォーマンスを向上させる小技と豆知識についてです。
しかしその前に、ブラウザがページをレンダリングする方法について知る必要があるでしょう。そこにはHTMLやCSS、JavaScript、そしてブラウザがWebページをエンドユーザーに表示する際に必要な手順のすべてが含まれます。
クリティカル・レンダリング・パス
クリティカル・レンダリング・パスは、5つのステップから成っています。図解すると分かりやすいでしょう：
見たままですが、各ステップについて詳しくご説明しましょう。
DOMとCSSOMの構築
ほとんどのページはHTML、CSS、およびJavaScriptで構成されています。Webブラウザは、ユーザーに何をどのように表示するかを知る必要があります。そのため、ネットワークを介して送信されたHTMLページを解読し、ドキュメントオブジェクトモデル（DOM）を構築します。また、HTMLタグ（
<p></p>、<div></div>、<h1></h1>）」を読み、それらをトークンに変換します。これらのトークンは同時にノードへと変換されます。各トークンの開始タグと終了タグを順番に処理することで、ブラウザはそれらの階層（親と子）を確立します。
これは見かけよりもずっと簡単です。上の図で、DOMはすべてのノード（枝）とその子（葉）を持った一本の木のようなものと想像してください。この木は、HTMLを構築するためのノードの依存関係をすべて含んでいます：
DOMはマークアップ全体を表し、ブラウザによって徐々に構築されます。HTML5以降、ブラウザはページ全体が一度にブラウザに送信されるのを待つ代わりに、HTMLストリーミングに対応するようになりました。これの素晴らしいところは、情報を受け取ると同時にレンダリングを実行できる点です。
DOMを構築した後、ブラウザはCSSオブジェクトモデル（CSSOM）を構築するためにページ内で参照されている、あらゆるスタイルを調べ上げます。CSSOMは、文書に適用する必要のあるスタイルの規則を表しています。これはDOMがどう構築されたかに非常に似ていますが、この過程でそれぞれの子要素は、その親要素に適用されたスタイルを継承します ― cascading style sheets（一繋がりのスタイルシート）という名前はそのためです。
スタイルの部分的な処理は不可能なため、すべてのスタイルの規則が送信されるまで、ブラウザはどのスタイルの規則がどのノードに適用されているかを推測できません。これが、CSSがレンダリングをブロックする要素となる理由です。
DOMとCSSOMの混在は、レンダーツリーと呼ばれます。レンダーツリーは、すべてのノードとその依存関係、およびそれらに適用されるCSSルールすべてを含んでいます。
レンダーツリー
すべてのノードを構築した後、ブラウザはどのノードをページ上に表示するのかを知る必要があります。レンダーツリーは、ページ上に表示される可視コンテンツそのものです。
ブラウザはルートから起動し、DOMとCSSOMからすべての可視ノードをコピーします。実行される手順は、おおよそ以下のとおりです：
ルートから起動し、各可視ノードをたどる
- メタタグやリンクなど、可視ノードではないものもあります。
- display: noneなどのCSSを使って、隠されているノードもあります。
各ノードに対して一致するCSSルールを見つけて、適用する
可視ノードとそのコンテンツ、スタイルを出力する
レイアウト
すべてのノードにスタイルを設定したら、次はそれらを画面上のどこに配置するか、つまりレイアウトを考える番です。初めに必要なのはブラウザのウィンドウサイズです。これにより各要素の位置と大きさが特定されるため、これは以降のすべての計算の基礎となります。
このステップの出力は、その正確な位置とサイズに加え、マージン、パディング、ボーダーなどを捉えたボックスモデルです。
このステップは、サイズを変更するたび、またモバイル端末で横長と縦長の表示を切り替えるたびに繰り返されます。
描画
この最後のステップでは、画面上にピクセルが描画されます。ブラウザのタスクが多く、多少の時間を要することがあります。所要時間は、ウィンドウサイズ、各ノードに適用されるスタイル、端末として使用されるハードウェアの種類などにより異なります。
完了すると、ようやくページがビューポートに表示されます。
適用
クリティカル・レンダリング・パスについてはこれで十分。それでは、HTMLとCSSをいじってWebパフォーマンスを向上させる方法を見ていきましょう。
クライアントにHTMLを送信する
クライアントにHTMLを送信するときは、最後に1回だけではなく、頻繁にバッファを書き出すようにしてください。そうすることで、HTMLの情報群を受け取る前から、ブラウザはそれらを解析できます。これによりパフォーマンスが向上します。
例として、HEADタグを受け取ると、ブラウザはその他のHTML情報を受け取る間に、他のアセットに対する要求を送信できます。
サイズを縮小する
ミニフィケーションおよび圧縮は、読み込みサイズを縮小、HTTP応答時間を短縮し、結果として読み込み時間の短縮に繋がるため、非常に重要です。
これらのテクニックと正しいキャッシング戦略を組み合わせることで、Webパフォーマンスを大幅に向上させることが可能です。
CSSを素早く送り、最小限に抑える
見てきたとおり、CSSはレンダリングをブロックする要素なので、できるだけ早くクライアントに送信する必要があります。また、初めのページの読み込みに必要なCSSの量を考えて、メインファイルから未使用のCSSを抽出し、必要に応じて後で別々に読み込みます。
パフォーマンス向上のため、プレローディング・プレキャッシングも活用できます。これらは、Googleが2016年に導入したPRPLパターンの一部です。
もう一つのテクニックは、開発者たちの間でそれほど頻繁には使われていませんが、コンテンツのbody内にlinkタグを使用することです。たとえHTML内に記述されたstyleタグであっても、最小限のCSSのみをクライアントに送信し、残りは後から必要に応じて読み込むことでレンダリング時間を短縮できるため、非常に便利です。
まとめ
要するに、関連するものを最小限に抑えて、素早く最適に送信すること。転送を高速化するため未使用のCSS規則を減らし、ミニフィケーションと圧縮を活用することです。
この投稿が少しでもお役に立ちますように。それでは、次回をお楽しみに?
参考
- Webパフォーマンス関連：Google Developers
- クリティカル・レンダリング・パスの理解：CSS Tricks
関連記事
CSSを調べてコピーする簡単で最速なツール「CSS Scan 2.0」
観測史上最速！GoogleスプレッドシートだけでAPIが作れる「Sheetson」
GitHubのリポジトリだけでAPIが作れる「APIs With GitHub」
この記事は、AnyPicksマガジンからの再掲載です。原文はこちらです。
- 投稿日：2019-05-22T01:29:16+09:00
【HTML】tableタグで表をマークアップするSEO上のメリットとは？
ご存知の通り、
tableタグはテーブル（表）を作成するタグです。過去には、
tableタグは携帯サイト（ガラケーサイト）を作る際にレイアウト目的で使用されたりしてましたが、tableタグは基本的にはテーブル（表）を作成するためのタグです。そんな
tableタグですが、ちゃんと表をマークアップする際に使用することで、とあるSEO上のメリットに繋がります。今回は、そんな
tableタグ実は・・・をご紹介します。tableタグを使わずにdivタグとCSSでも表は作れる
確かに
divタグとCSSを使えば、tableタグを使わなくてもレイアウトを組むことで、表のようなものは作成できるでしょう。ただ、そういうやり方をオススメしているサイトや人をたまに見かけますが、ぶっちゃけ全くオススメできません。
（SEOを考えると大きなデメリットになるので、、）その理由としては、Google検索結果の「強調スニペット」が関わってきます。
強調スニペットについて
強調スニペットとは、 Googleサーチで「○○とは」「○○ 意味」など、主に情報の収集を検索意図としたクエリ（インフォメーショナルクエリ）に対して、回答となるページを検索結果の最上部に強調して表示する機能です。
例）
検索結果の最上部に強調されて、SEOの内容を要約した文章が掲載されていると思います。これが「強調スニペット」です。
強調スニペットは、検索者の何かを知りたい・探している、また疑問や悩みを解決するために行う検索の意図に対して、最速でその答えを返すことを目的としています。
（※ナレッジグラフと混同されるが、ナレッジグラフと強調スニペットは異なるもの）表組み形式のスニペット
強調スニペットには、いくつかのタイプが存在しますが、その一つが表組み形式のスニペットになります。
具体的には以下のようなものです。例）
最上部に掲載されているページの内容を見てみてください。
ページ内に表示されている金相場の表が、Google検索結果にそのまま表として表示されているのがわかるかと思います。これが表組み形式のスニペットです。
表組み形式は価格比較系のクエリに対して表示されるケースが特に多いです。どうやって強調スニペットとして設定しているのか？
検索結果での強調スニペットについては、Googleは「Search Console ヘルプ」にて以下のように回答しています。
自分のページを強調スニペットとして設定できますか？
ご自分のページを強調スニペットとして設定することはできません。Googleでは、ユーザーの質問に対する> 回答がページに含まれていることをプログラムで判断し、その結果を強調スニペットとして表示します。
検索結果での強調スニペット - Search Console ヘルプ
残念ながら、明示的に表組みを強調スニペットとして設定する仕組みは現在のところありません。
表は必ずtableタグでマークアップしておく
強調スニペットがプログラムで自動生成される以上は、クローラーに「表」を「表」として認識してもらう必要性があり、情報を正しく伝える為に
tableタグでマークアップしておく必要があります。
divにするのかtableにするのか、、検索結果での表示のされ方から視えるオーガニック流入の成果を考えれば、ここはSEOの運命の分かれ道といっても過言ではありません。別のケースで表を画像化するなんていうのは、もってのほか！
たまにそのケースも見かけますが、単純に機会損失しているだけです。強調スニペットは、表組み形式以外にも、リスト形式や文章形式もありますが、リストに関しては、
liタグでマークアップすることが重要になってきます。最後に
もうお分りですよね？
結局はちゃんと文章構造を理解して、正しいHTMLのマークアップを行なっていれば、SEOに関して何も心配することはありません。
- 投稿日：2019-05-22T00:43:44+09:00
[初心者]プログラミングを約250時間学んで感じたこと
はじめに
スクールでプログラミングを学び始めて、約１ヶ月が経ちます。
細かく言えば、今日で25日目になります（笑）
言語としては、
・Ruby ・Rails
・HTML ・CSS
を学んできました。
決め事として、1日最低10時間以上を毎日続けるようにしています！
単純計算で、約250時間です。
ということで今回は、全くの初心者が250時間勉強して感じたことを書いていこうと思います。予想以上のキツさ
多数の言語を短期間に学ぶのは大変ですが、本気でやれば各言語の基礎は学ぶことができました。
ただ、正直かなりキツイです。
スクールは毎日通っていて、25日間1日も欠席はしていません！！！
新しい知識ばかり頭に入ってくる中で、毎日が格闘です（笑）しかしそのおかげで、全くの無知だった私ですが、今ではTwitterの簡易版のようなアプリであれば自力で作成することができるようになりました！
正直初めは、「これ、本当に自分でも理解できるのか・・・？」
と思ってました。（笑）
ですが、絶対サボらず、折れずに毎日頑張っていたらいつの間にかアプリが作れるようになってました！
人生の中で１番頑張ったといっても過言ではないかもしれせん・・・（笑）多くの衝撃事実
プログラミングを少しずつ学んでいく中で、「え!?」と思うことがいくつかありました。
まず1つは、
「プログラミングは暗記ではない」
ということです。私は最初、プログラミングはありったけのコードをたくさん暗記しなきゃいけないと思ってました。（笑）
しかし、学んでいく中で
「わからないことがあったらすぐに調べて、それを適応させる能力」
がとても大事なのだと気付かされました。「プロのエンジニアでもGoogleは必須なんだよ」と言われてから、私の勉強法は８割がアウトプット作業ばかりです。
2つ目は、
エラーの多さ、難しさです。アプリを作成する中で、エラー、エラー、エラー、エラー・・・・・。
どれだけ調べても解決できないものだったり、本当に折れそうになります。（笑）各言語における仕組み等を理解していないとエラーが解決できないため、
エラーが起きるたびに土台の脆さを痛感させられました。ですが、数をこなすうちに段々と理解できて、簡単なエラーなら1人で解決できるようになることができました＾＾
しかし、実際まだたくさんの種類のエラーがあると思うので、勉強して数をこなしていくしかないですね・・・
おわりに
まだまだ、ほんの一部を学んだだけです。
もっといえば、基礎も全て完璧とはいえず、まだまだ知識不足だといえます。
これからもコツコツ努力して、一人前のプログラマーになれるよう日々精進です・・・明日からは、「Javascript」「jQuery」を学んでいこうと思います！
ありがとうございました＾＾