CSS 【CSS】ギャラリーレイアウト／Grid Layoutで複雑なレイアウトも簡単にできる
ギャラリーのレイアウトは、少し考えたら簡単にできました！ イメージしてから組むとわかりやすいです！ ここではグリッドレイアウトを使用しています。 グリッドレイアウトの応用編ですね！ グリッドレイアウトについては下記記事にもしているので、ご参...
CSS
CSS 
CSS 【CSS ネタ帳】文字＋画像のカードの作成、レスポンシブデザイン
完成図 ※私が作成しているサイトを例にしています。 PC モバイル PCだと横並び、モバイルだと縦になるようにしています。 HTML ※ インデントめちゃくちゃ <!--文字の横にテキスト--> <div class="profile-co...
CSS 【CSS ネタ帳】CSSのみのハンバーガーメニュー
完成図 ※私が作成しているサイトを例にしています。 HTML ※ インデントめちゃくちゃ <!--モバイル用のメニュ--> <div class="hamburger-button"> <input type="checkbox" id="...
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 { coun...
CSS 【リセットCSS】概要とNormalize.cssの使い方
リセットCSSとは 「Google Chrome」「Safari」「Microsoft Edge」など、それぞれ異なるブラウザでもすべて同じように、サイトが表示されるためのCSSのことです。 リセットCSSを使用するのは一般的になっています...