ホームページ制作ツール、css、javascript、wordpress、SEO情報でノンプログラマーが簡単に取り入れられたものを紹介します

フリーランスweb制作の覚え書き

HOME
css
sns
便利ツール

flexboxで均等に間隔をあける

css

X Facebook はてブ Pocket LINE コピー

2025.04.01

.flexbox {
  display: flex;
  column-gap: 3%;
}

シェアする

X Facebook はてブ Pocket LINE コピー

p-plusをフォローする

関連記事

スクロールをしたら画像がボカシからはっきり

理想のスクロールアニメーションです。ありがとうございます。

背景色のみを透過

.weather-bg{ width: 100%; background:rgba(0,0,0,0.5); padding: 20px 0 0px; color: white; bottom: 0; z-index: 1; }

width: fit-content;

子要素に合わせて親要素のサイズを変えるには「width: fit-content;」を利用するとwidthにfit-contentという値を親要素に指定すると、インライン要素である子要素と同じ横幅になる。参考サイト様はこちら

CSSのcontentで画像を指定

.reserve_icon_sp .mailicon::before { content: url(../images/mail.svg); display: inline-block; -webkit-transform: scale(0...

heightやwidthに「calc」を使って書く

よく使うのに忘れてしまう「calc」について height:calc( 90vh - 100px); width: calc(100% - 30px);

スクロールを促すおしゃれアニメーション

どちらの動きもおしゃれです。アニメーションが加わるとサイトのイメージが上がりますね。ありがとうございます。

カスタムフィールド（ACF）を使った「イベント終了」表示

width: fit-content;

コメント

コメントをどうぞコメントをキャンセル

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

コメント ※

名前 ※

メール ※

サイト

次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。

検索

最近の投稿

インスタグラム一覧をwordpressで簡単に
【Swiper】スライダーページネーションの位置を変えたい時
width: fit-content;
flexboxで均等に間隔をあける
カスタムフィールド（ACF）を使った「イベント終了」表示

最近のコメント

表示できるコメントはありません。

人気記事

heightやwidthに「calc」を使って書く

背景色のみを透過

flexboxの伸縮とセンター揃え（justify-content: center;）

スクロールをしたら画像がボカシからはっきり

2024.11.122024.11.19

スクロールを促すおしゃれアニメーション

アーカイブ

2025年8月
2025年6月
2025年4月
2025年3月
2025年2月
2025年1月
2024年11月
2024年10月
2024年9月
2024年8月
2024年5月

カテゴリー

css
javascript
sns
swiper
wordpress
便利ツール
特定のカテゴリーにパスワード
特定のカテゴリーの子カテゴリ

フリーランスweb制作の覚え書き

プライバシーポリシー

© 2024 フリーランスweb制作の覚え書き.

メニュー
- HOME
- css
- sns
- 便利ツール
ホーム
検索
トップ
サイドバー

タイトルとURLをコピーしました