- 投稿日：2021-04-12T16:17:38+09:00
「Grid」を使用した聖杯レイアウト
「Grid」を使用した聖杯レイアウトについてまとめました。 ※使うメリットはdivタグの使用頻度が減り、コードが見やすい。 完成形 HTML 親子関係を作ること。 親のclassに「グリッドコンテナー」(grid-container)を指定し、レイアウト対象である「グリッドアイテム」を囲む。 <div class="grid-container"> <header>ヘッダー</header> <nav>ジャンル</nav> <main>メモ</main> <aside>辞書</aside> <footer>フッター</footer> </div> CSS グリッドラインで分割をする。 親クラス display: grid;を記述。 横を分割し、グリッドラインを作る。 grid-template-columns: 1fr 3fr 1fr; 縦を分割し、グリッドラインを作る。 grid-template-rows:1fr 6fr 1fr; ※今回はfr（比率）で区切る。px、%でもOK！ グリッドアイテム 区切ったグリッドラインの範囲を数値で指定する。 横は、grid-column: 始まりのライン / 終わりのライン; 縦は、grid-row: 始まりのライン / 終わりのライン; .grid-container { display: grid; grid-template-columns: 1fr 3fr 1fr; grid-template-rows:1fr 6fr 1fr; height: 100vh; } header { grid-column: 1 / 4; grid-row: 1 / 2; background-color: #E6FFE9; } article { grid-column: 2 / 3; grid-row: 2 / 3; background-color: white; } nav { grid-column: 1 / 2; grid-row: 2 / 3; background-color: #EEEEEE; } aside { grid-column: 3 / 4; grid-row: 2 / 3; background-color: whitesmoke; } footer { grid-column: 1 / 4; grid-row: 3 / 4; background-color: #E6FFE9; } 引用 https://goodsan.jp/wp/gridholy/ プログラミング初心者です。色々ご指摘頂けると幸いです。
- 投稿日：2021-04-12T13:44:12+09:00
日時系のinput要素に対し現在日時に基づく値を初期値として設定
日時系のtypeのinput要素に対して、現在日時に基づく各typeに合った値を初期値として設定するスクリプトです。 対応するtypeはtime, date, datetime-local, month, week 及び text です。 初期値を設定したい要素のタグにdata-nowDateを追記することで初期値が設定されます。 sample <input type='date' data-nowDate> 既に有効な値がvalueに設定済みの要素に対してはdata-nowDateを指定しても無視します。 ブラウザが対応していない日時系のtypeの場合は該当のtypeで本来設定されるvalue値を設定、その他の無効なtypeの場合はtextとして扱います。 typeがtextの場合は、data-nowDateに書式テンプレート文字を指定できます。 テンプレート文字一覧 %Y% 西暦 4桁 %Y2% 西暦 下2桁 %M% 月 2桁 %Ms% 月 0埋め無し %D% 日 2桁 %Ds% 日 0埋め無し %h% 時 2桁 %hs% 時 0埋め無し %m% 分 2桁 %ms% 分 0埋め無し %s% 秒 2桁 %ss% 秒 0埋め無し %MS% ミリ秒 3桁 %MSs% ミリ秒 0埋め無し sample <input type='text' data-nowDate='%h%:%m%:%s%'> スクリプト input_date_default_set.js 'use strict'; { window.addEventListener('DOMContentLoaded', function() { const d = new Date(); d.setMinutes(d.getMinutes() - d.getTimezoneOffset()); const isoLocal = d.toISOString(), pos = { time : [11, 16], date : [ 0, 10], month : [ 0, 7], 'datetime-local': [ 0, 16], }, elements = document.querySelectorAll('input[data-nowdate]'); for(let i = 0; i < elements.length; i++) { const e = elements[i]; if(e.value !== '') { continue; } const t = e.attributes.type !== undefined ? e.attributes.type.value.toLowerCase() : 'text', type = e.type === t ? e.type : t; if(Object.keys(pos).indexOf(type) >= 0) { const r = pos[type]; e.value = isoLocal.slice(r[0], r[1]); } else if(type === 'week') { const d_ = new Date(Math.floor((+d + 2592e5) / 6048e5) * 6048e5), y = d_.getUTCFullYear(), w = 1 + Math.floor((d_ - new Date(y + '-01-01T00:00:00Z')) / 6048e5); e.value = y + '-W' + ('0' + w).slice(-2); } else if(type === 'text') { const p = isoLocal.match(/\d+/g); if(e.dataset.nowdate.trim() === '') { e.dataset.nowdate = '%Y%-%M%-%D% %h%:%m%:%s%'; } e.value = e.dataset.nowdate .replace(/%Y%/g, p[0]) // %Y% 西暦 4桁 .replace(/%Y2%/g, p[0].slice(-2)) // %Y2% 西暦 下2桁 .replace(/%M%/g, p[1]) // %M% 月 2桁 .replace(/%Ms%/g, +p[1]) // %Ms% 月 0埋め無し .replace(/%D%/g, p[2]) // %D% 日 2桁 .replace(/%Ds%/g, +p[2]) // %Ds% 日 0埋め無し .replace(/%h%/g, p[3]) // %h% 時 2桁 .replace(/%hs%/g, +p[3]) // %hs% 時 0埋め無し .replace(/%m%/g, p[4]) // %m% 分 2桁 .replace(/%ms%/g, +p[4]) // %ms% 分 0埋め無し .replace(/%s%/g, p[5]) // %s% 秒 2桁 .replace(/%ss%/g, +p[5]) // %ss% 秒 0埋め無し .replace(/%MS%/g, p[6]) // %MS% ミリ秒 3桁 .replace(/%MSs%/g, +p[6]); // %MSs% ミリ秒 0埋め無し } } }); } サンプル 動作デモ index.html <!DOCTYPE html> <html lang='ja'> <head> <meta name='viewport' content='width=device-width,initial-scale=1'> <meta charset='utf-8'> <title>日時系input要素に現在日時をデフォルト設定</title> <script src='input_date_default_set.js'></script> </head> <body> <!-- data-nowDateを追記で現在日時に基づく各typeに合った値を設定 --> time<br> <input type='time' data-nowDate><hr> date<br> <input type='date' data-nowDate><hr> datetime-local<br> <input type='datetime-local' data-nowDate><hr> month<br> <input type='month' data-nowDate><hr> week<br> <input type='week' data-nowDate><hr> text<br> <!-- type=textの場合に限り、data-nowDateに記入した書式テンプレートを反映 --> <input type='text' data-nowDate='%Y%-%M%-%D% %h%:%m%:%s%.%MS%'><br>  書式テンプレート<br> %Y%-%M%-%D% %h%:%m%:%s%.%MS%<hr> <input type='text' data-nowDate='%Y2%-%Ms%-%Ds% %hs%:%ms%:%ss% %MSs%'><br>  書式テンプレート<br> %Y2%-%Ms%-%Ds% %hs%:%ms%:%ss% %MSs%<hr> <!-- 書式テンプレート無指定時は %Y%-%M%-%D% %h%:%m%:%s% として解釈 --> <input type='text' data-nowDate><br>  書式テンプレートなし<hr> </body> </html> type='week'の要素については、私が確認できる範囲では2021年4月の時点でUIも表示されとくに問題なく使用できそうだったのはWindows/MacOS/Android版のChromeくらいでした。 非対応typeでもtextとして扱われるならまだいいのですが、iOS(14.4.2)/iPadOS(14.4.2)に至っては、typeはweekを保ったまま初期値も設定できるにも関わらず、要素をタップしても専用UIが表示されることもなく内容を変更することができない(通常のソフトウェアキーボードは表示されるが値を変更できない)状態だったので、やむなく使用する際には他のtype以上に注意が必要かな、と感じました。
- 投稿日：2021-04-12T09:33:34+09:00
【初心者でもわかる】「<header>」と「<div id="header">」の違いを解説
どうも7noteです。いろいろなサイトを見ていると気になる、「 」と「id="header"」の違いについて ヘッダーを作る際、参考に他のサイトを見ていると2種類の書き方を見かけます。 ・<header> ・<div id="header"> これらの違いはなんだろう？と気になった方もいるとおもいますが解説していきたいと思います。 「<header>」と「<div id="header">」の違いはHTML5かそうでないかの違い <header>はHTML5でのヘッダーの書き方です。 HTML5とは、まぁ簡単にいうとHTML界の最新型iPhoneのようなものです。これまであった機能などをより簡単に幅広く使えるようになったHTMLだと思ってください。 そして、<header>もHTML5から新しく作られた要素です。 逆にいえば<div id="header">はHTML5が出るよりも前の主流のヘッダーの書き方というわけです。 ▼１番の違い じゃあ具体的に機能としては何が違うのか。それは「googleなどの検索エンジンのAI（クローラー）が瞬時にヘッダーだと認識できるかどうか」の違いです。 なんのこっちゃと思う人もいるかもしれませんので、もう少し説明をいれますね。 まずgoogleなどの検索エンジンには、一般で公開されているwebサイトの構造を理解して評価し、検索結果の順位に反映をしています。これにより、ユーザーが欲しいと思った記事を上位に表示させることで、「google使いやすい、LOVE♥」となるわけです。 ではweb開発者の視点からみれば、googleのクローラーから、より高い評価をもらわなければなりません。 そのため、検索上位を狙うのであればクローラーが喜ぶようなタグの使い方やサイト構成を意識してサイトを作る必要があります。 これが「<header>」と「<div id="header">」の最も違う点です。 <div id="header">は使ってはいけないのか？ 決して使ってはいけないというわけではありません。ただ、少しでもgoogleからの評価を受けやすいサイトにするのであれば、ヘッダーを作る際は<header>を使ったほうが良いとされているという話であり、自分で好きなサイト（もしくは一般公開しないサイト等）を作る場合は正直どちらでもいいと思います。 <header>の正しい使い方 基本的にwebサイトのヘッダーは1つしかありません。 そのため、<header>はbodyの直下に1つだけの設定がオススメです。 <header>の特性として、body以外のタグの直下で使ってしまうと、サイトのヘッダーという認識ではなく、そのタグのヘッダーと認識されてしまう可能性があります。 この辺については正直ちょっとややこしいので、はじめのうちはbodyの直下に1つだけ<header>を設定するオススメです。 おまけ 「<div id="header">と<div class="header">の違いは？」 こちらはgoogleのクローラーからの評価に大きな差はないでしょう。 ただ製作者的に「idは1ページ内に1つ、classは1ページ内に複数可能」という違いがあるため、制作するときに間違いのないようidで作成していることが多いという話だと思います。 ヘッダーは基本サイトに1つというルールが一般的なので、固有のものにするためidが使われていることが多いのです。 classで作ったとしても、webサイト的には普通に作れますし、見た目がそれで変わることはありません。 まとめ ・「<header>」と「<div id="header">」の違いはHTML5かそうでないかの違い ・<div id="header">はHTML5が出るよりも前の主流のヘッダーの書き方 ・bodyの直下に1つだけ<header>を設定する <div id="header">だからといって、検索の上位に絶対でないというわけではありません。 あくまで評価の基準となる一部の指標なので、検索にヒットしやすいサイトでも<div id="header">で作っているサイトはあります。 ですが、これから新しく作るサイトであれば私は「<header>」でヘッダーを作ることをオススメします！ おそまつ！ ~ Qiitaで毎日投稿中!! ~ 【初心者向け】WEB制作のちょいテク詰め合わせ
- 投稿日：2021-04-12T00:11:11+09:00
【aタグ】リンクを新しいタブで開く仕様にする方法
aタグとtarget 属性 表示先をtarget属性を使用して設定することができる。 一般的なaタグ <a href="ここにリンク先のURLを入れる">○○○○○</a> 同じタブで開く <a href="ここにリンク先のURLを入れる target="_self">○○○○○</a> or <a href=ここにリンク先のURLを入れる">○○○○○</a> 新規タブで開く <a href="ここにリンク先のURLを入れる" target="_blank">○○○○○</a> <-セキュリティを考慮する場合以下を用いる-> <a href="ここにリンク先のURLを入れる" target="_blank" rel="noopener noreferrer">○○○○○</a> 以上