ましじめ株式会社
こんにちは。ましじめの田村です。 CSSの Flexboxでボタンを下揃えしたいケースがありました。 その場合次のようにwrapする要素をdisplay: flex;にしてボタンをmargin-top:auto;にすると実現できそうです。 ↓ <...
2020年02月27日
スタッフブログ
こんにちは。ましじめの田村です。 cssで透明度を含めて色を指定する場合 rgba() で指定することができます。 しかしRGB値だとデザインツールからのコピペや入力や16進数の値からの変換が手間だったりします。 cs...
2020年02月19日
こんにちは。ましじめの田村です。 CSSの transformで中央寄せにしたいケースがありました。 その場合次の方法で実現できそうです。 <div class="item"> <div class="item__body"> <p>中央寄せ...
2020年02月05日
こんにちは。ましじめの田村です。 PC時にaタグのリンクを無効化したい場合がありました。 この場合は次のコードで実現出来そうです。 a[href^="tel"]{ pointer-events: none; } https://developer.mozilla.org/j...
2020年01月24日
こんにちは。ましじめの田村です。 CSSで時計のアイコンと動きをつけたい場合がありました。 その場合次のようなコードで実現出来そうです。 表示例 コード is-clock--time1 - 12で時間の調整が可能です。 html &...
2020年01月17日
こんにちは。ましじめの田村です。 ホームページのチェック作業をしている時にサーバーに入れないが確認のためCSSや簡単なJavaScriptを読み込ませたい場合がありました。 CSSのデバッグツールやコンソールに直接...
2020年01月16日
こんにちは。ましじめの田村です。 OSのカラーテーマを設定出来るようになり、アプリなど「ダークモード」が増えてきました。 今後Webサイトも「ダークモード」に対応したいという要望が出てきそうです。 Webサイ...
2020年01月14日
こんにちは。ましじめの田村です。 画像の上にドットを被せる方法です。 画像を全体に伸ばして表示する場合や動画に被せるなど活用出来ると思います。 <div class="is-layer-dot"> <img src="https://ma...
2020年01月04日
こんにちは。ましじめの田村です。 CSS でblockquote（引用）の装飾を作る方法です。 Google Fonts のMaterial iconsを使って左上右下にアイコンを置いています。 マテリアルアイコンの使い方はリンクを指定して...
2019年12月27日
CSS で「>」を作る方法です。 四角を作って「上」と「右」にボーダーをつけた後に45度回転させています。 <span>矢印です</span> span { position: relative; } span::before { content: ""; disp...
2019年12月24日
