seilog-ger
[ URL:seilog.org ] Writtern by Seiji Nakamura

「 Programに関する記事 」

2024/6/20

SCSSの効率的な繰り返し処理:forループ内で:nth-child( ) を使う手順

forループを使った効率的な繰り返し処理の手順がわかりますか?forループ内で、:nth-child()を使い繰り返し処理をする手順を解説します。煩雑なクラス指定などをせずに、スマートに処理することができるようになります。ぜひご活用してください。

2024/4/24

CSSで:nth-child :nth-of typeを使って要素の順番を表す方法とその違い

by GrumpyBeere Pixabay

同じような要素が並んでいるときに、CSSで並ぶ順番に応じてスタイルを適用する方法を知っていますか?nth-childやnth-of-childを使って、CSSで順番を指定してスタイルを適用する手順を解説します。htmlでクラス指定したり複雑な手順をやらずに、シンプルなコーディングができるようになります。

2024/3/15

CSSを使いBackground imgのアスペクト比を保ちバランス良く画像を画面いっぱいに表示する方法

by kareni pixabay

SSを使いBackground imgの画像を画面に思い通りに表示するのはなかなか難しいと思いませんか?CSSを使いBackground imgのアスペクト比を保ちバランス良く画像を画面いっぱいに表示するコーディング方法を解説いたします。画像のまわりに空白がない画面表示方法を数種類解説します。

2024/2/9

文字が洒落たアニメーションする簡単で間違いないコーディング!「CSSのみ」と「JavaScriptも使う」方法【中級】

geralt pixabay

文字を分割して一字毎にアニメーションさせるコーディング法は分かりますか?文字を分割する方法、分割した文字を一字毎にコントロールして、文字全体で洒落たアニメーションする方法を”CSSのみ”、”JavaScriptも使い”実現する方法を解説いたします。よく使われる文字のアニメーションの内容を解説致します。

2024/1/22

4つの疑似セレクター:hover :active :focus :visitedの 挙動を理解して効果的に使おう!

geralt

4つの疑似セレクター、:hover :active :focus :visitedの挙動の違いが分かりますか?:hover :active :focus :visitedを使い分けることで、読者にあなたが伝えたい意志を視覚的に表現することができるようになります。疑似セレクターの挙動を示しながら、使い方を解説します。