CSS 【CSS】ヘッダーを固定にして追従させる方法／超簡単に説明！
ここでは「position: fixed」を使用した方法について解説します。① position: fixed「position: fixed」を使用し固定させる例position: fixed; /* 位置を固定する */top: 0; ...
CSS
CSS CSS 【CSS】アイコンの色を変える
完成図もともと黒だったものを変更しました。フィルター機能で変更する！invert (階調) sepia(セピア) saturate(彩度) hue-rotate(色相) brightness(明度)これらを使用して、色を作成するだけです。....
CSS 【CSS】ギャラリーレイアウト／Grid Layoutで複雑なレイアウトも簡単にできる
ギャラリーのレイアウトは、少し考えたら簡単にできました！イメージしてから組むとわかりやすいです！ここではグリッドレイアウトを使用しています。グリッドレイアウトの応用編ですね！グリッドレイアウトについては下記記事にもしているので、ご参照くださ...
CSS 【CSS ネタ帳】文字＋画像のカードの作成、レスポンシブデザイン
完成図※私が作成しているサイトを例にしています。PCモバイルPCだと横並び、モバイルだと縦になるようにしています。HTML※ インデントめちゃくちゃ <!--文字の横にテキスト--> <div class="profile-containe...
CSS 【CSS ネタ帳】CSSのみのハンバーガーメニュー
完成図※私が作成しているサイトを例にしています。HTML※ インデントめちゃくちゃ<!--モバイル用のメニュ--> <div class="hamburger-button"> <input type="checkbox" id="chec...
CSS 【CSS】画像の隣に文字がくるコンテンツの実装
CSS/*画像の隣に文字が来るようなカード*/.card-container{ display:flex; justify-content: center; align-items: center; max-width: 100%; /*親...
CSS 【CSS】「border-radius」使い方メモ／角を丸くする
border-radius とは要素の四隅の角を丸くするためのCSSプロパティーのことです。背景も画像もこれで丸くすることができます。使い方同じ角度の丸み半径10pxの角丸border-radius: 10px; 四隅がそれぞれ違う角度下記...
CSS 【CSS】Grid Layout
Grid Layout とは格子状のマス目をベースとしてレイアウトを組むときに使うもの。似ているもので「Flexbox」があります。Flexbox との違いFlexboxは一方方向でのレイアウトに対して、Grid Layout は縦横自在に...
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つからなります。書き方のポイントプロパティと値は、「｛｝」で囲みます。プロパティと値の間は「：（コロン）」複数プロパティを指定するときは、終わりに「；（セミコロン）」を忘れずに！コメント...
Wordpress 【cocoon】トップページのデザイン画像リンクのレイアウト
画像リンクはカーソルを当てると、画像が薄くなるようなデザインになっております。このデザインの参考にさせていただいたサイト様画像リンクの動くデザインCSSはこちらも参考にさせていただいております。
Wordpress 【WordPress】サイドバーの目次をスクロールさせたい
デフォルトでサイドバースクロール追従に目次を追加した場合、変なところで目次が切れてしまう問題が発生しました。その対処についてご説明します！ウィジェットの設定①左の欄の「外観」をクリックまたは、カーソルを当てる②「ウィジェット」を選択③目次の...
Wordpress 【WordPress】ヘッダーをおしゃれに、メニューを右にまとめる
Wordpressのデザインを変更したいときに、参考になる方法があったのと、問題点の対処法をまとめたのでご紹介します。完成図現在のフロントページは変更されているかもしれませんが、このような感じで編集しました。ここではWordpressのテー...