HTML 【HTML】div、p、span タグの使い分けメモ
div タグウェブページのセクションやブロックを定義p タグ段落を定義span タグ文中の一部を囲むときに使う特定のテキストを強調するときなど
プログラム
HTML 
HTML 【HTML】「article」の使い方メモ／コンテンツをグループ化
articleサイトの中で記事やコンテンツの独立したセクションを定義articleで囲むことで独立した要素になるページの構造を明確にし、コンテンツをグループ化するための重要なものです。<article class="post-item"> ...
CSS 【CSS】「display」 の使い方／要素の表示形式
display とはCSSのプロパティの一つで、要素の表示形式を決めるものです。わかりやすい画像をお借りしました。（サルカワさんのサイト）それぞれの意味と使い方display: blockブロックの前後には空白、縦に並ぶのが特徴・幅と高さを...
CSS 【CSS】「:target」 使い方メモ／アンカーリンク先の表示
:target とは:target疑似クラスは、ターゲットとなるアンカーリンク先の要素を表します。アンカーリンクは、同じページにある項目や、別のページにうつるものです。「URLのフラグメント」URLの「」のように、URLの最後につく「＃」に...
CSS 【CSS】「counter-increment」使い方メモ／番号を付ける
counter-increment とは複数ある要素に番号を付けたいときに使用します。様よりお借りしました使い方疑似要素に「content: counter();」も指定します。文章の先頭に数字を入れたいとき、 li { counter-i...
CSS 【リセットCSS】概要とNormalize.cssの使い方
リセットCSSとは「Google Chrome」「Safari」「Microsoft Edge」など、それぞれ異なるブラウザでもすべて同じように、サイトが表示されるためのCSSのことです。リセットCSSを使用するのは一般的になっています。ブ...
プログラム 正規表現について簡単にまとめた
正規表現とは沢山ある文章の中から、簡単に目的の文字列を検索できる表現のことです。文字や文字列を指定して、一致する文字列を検索したり、置換したりすることができます。メタ文字の種類正規表現にはメタ文字を使用します。メタ文字は半角で表記します。....
CSS 【WordPress】モバイルボタンの表示が遅い！苦戦！！
私は、Wordpress のテーマ「cocoon」を使用しています。スキンの変更や、モバイルボタンの変更をしていたら、モバイルボタンの表示が遅いことに気が付きました。2秒程度待つと出てくるか、スクロールをすると出てくるようになっています。そ...
CSS 【CSS】アニメーションを付けられる「transition」の意味、使い方
transitionについて学習します。transitionとは「transition」は、ページにCSSでアニメーションをつけることができます。「transition-duration:3s」は、3秒かけて表示していくアニメーションになり...
CSS トップページ（固定ページ）のタイトルがどうしても消えない
私は、Wordpressテーマ「cocoon」を使用しています。トップページを固定ページにしている場合、タイトルをCSSで簡単に消すことができます。固定ページ編集画面の「カスタムCSS」に記述する場合h1 {display: none;}c...
CSS CSSが反映しない！CSSの読み込み優先順位
CSSについて学習中なのですが、記述したCSSが反映されないことがありました。CSSを記述する際には優先順位について理解しておく必要があります。CSSについて簡単に振り返りCSSはスタイルシートとよばれ、ページの装飾をするのに使用します。H...
CSS CSSの基礎文法学習！
CSSの基礎文法CSSは、セレクタ・プロパティ・値の3つからなります。書き方のポイントプロパティと値は、「｛｝」で囲みます。プロパティと値の間は「：（コロン）」複数プロパティを指定するときは、終わりに「；（セミコロン）」を忘れずに！コメント...
JavaScript 【JavaScript】クイズ問題作ったけど、TagName(“button”)でbuttonタグすべてが作動してしまう
このように、問題の答えをクリックするボタンと、解説をクリックするボタンの2つが存在します。JavaScript のコードを 「document.getElementsByTagName("button")」にすると、ボタンタグ全てが配列に入...
JavaScript 【JavaScript】クイズ問題（簡単なの）
リファクタリングが難しいため、とりあえずここまで記載します。実際に作ったサイトはこちら（どんどん改良しているはず・・・）この問題のベースはBootstrapで組んでいます。HTML<div id="js-question" class="a...
Bootstrap 【Bootstrap】グリッドシステム
Bootstrapとはは、別の記事に簡単にまとめていますのでご参照ください。グリッドシステムとはサイトの横幅を均等に分けるラインをグリッドと呼び、Bootstrapは12本のグリッドが設定されています。こちらをもとに、コンテンツの配置を決め...
Bootstrap Bootstrap5 チートシート早見表！素早く検索するためにまとめた
グリットシステム<div class="container text-center"> <div class="row"> <div class="col"> Column </div> <div class="col"> Column <...
Bootstrap 【Bootstrap5】実践！クイズ問題の形を作ってみた
今回はWeb初心者が、Bootstrapを用いてクイズ問題の型を作ったので、ご紹介したいと思います。Bootstrapについては、別の記事をご参照ください。完成図HTML<h3 class="text-center mt-2"> クイズ問題...
Bootstrap 【Bootstrap】フォントの大きさ変更
文字の大きさは「fs-1～６」で記載します。Sassマップの＄font-sizesを変更することでカスタマイズすることができます。<p class="fs-1">.fs-1 text</p><p class="fs-2">.fs-2 tex...
Bootstrap 【Bootstrap】幅と高さと中央揃えの設定
幅（width）20%、50%、75%、100%、autoがあります。<div class="w-25 p-3" style="background-color: #eee;">Width 25%</div><div class="w-50...
Bootstrap Bootstrapの簡単な説明
Bootstrapとはブートストラップとは、とても簡単に無料でCSSを使うことができるものです。スマホ、タブレットといった、パソコンとは画面の大きさが違うものに対応するページを作るレスポンシブデザインに対応しているフレームワーク1になってお...