当社はIT技術のオンライン教育を得意としたセミナー専門会社です。

ITエンジニアの技術力UPをお約束します。

CSSでオリジナル丸形チェックボックス&文字列の端折る処理を実現

CSSを使ってオリジナルで丸いチェックボックス作ってみようと思ったことはありませんか?そしてjavascriptやサーバサイドを使わないでCSSだけで実現できるかチャレンジしてみましたよ。きっかけは新人研修で問いかけられた事が考えてみる良い時間となりました。やればできるもんですね。

まずはdivで区切っていくつのブロックを用意します

最初はCSSを使わない素の状態ですね。

先程のブロックを装飾します。

今度は1つめの箱にある文字列を端折ってみました。2行で収まっています。

別のチェックボックスも掲載しますね!