CSS 【CSS】オシャレな境界線と、白い線を消す
ギザギザ、尖り、丸い境界線が作れるオシャレな境界線を作ることに関しては、別のページでも紹介しています。境界線をつけると、白い線がついてしまう問題境界線をCSSで作ると、白い線ができてしまうことがあります。これを解消する方法をご紹介します。c...
CSS
CSS CSS 【CSS・js】ヘッダーをスクロールに合わせて表示・非表示させる（jQueryなし）
header { position: fixed; top: 0; left: 0; z-index: 99; height: 5.5em; transition: transform 0.3s 0.1s;}/* スクロールするとヘッダーが...
CSS PNG形式の画像に影をつけたいけどうまくいかない！
PNG画像で、周囲の背景は透過しているとき、「box-shadow」で影をつけると、透過しているところにも影がついてしまいました。わかりにくいのですが、角丸なのに、四角として影がついており、白くなってしまいます。この時に便利なのが、filt...
CSS 【CSS】アイコンと文字を上下中央に
こうなってしまっているのをこれにしたい！① アイコン＋文字のクラスに「display: inline-block;」「vertical-align: middle;」を指定② アイコンに「vertical-align: middle;」を指...
CSS 【CSS】ヘッダーを固定にして追従させる方法／超簡単に説明！
① position: fixed「position: fixed」を使用し固定させる例position: fixed; /* 位置を固定する */top: 0; /* 固定する位置を指定 */left: 0; /* 固定する位置を指定 *...
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%; /*親...