30 Seconds of CSS日本語訳⑤

「30 Seconds of CSS」

より、覚えておくと便利なCSSテクニックをどんどん訳して英語力も上げようというこの企画第5回目です。

静止画でも分かる効果についてはスクショを添えることにしました。

前回:30 Seconds of CSS日本語訳④

17.フレックスボックス内の中央配置 – Flexbox centering

18.テキストグラデーション – Gradient text

19.グリッド要素内の中央配置 – Grid centering

20.髪の毛様に細いボーダー – Hairline border

“30 Seconds of CSS日本語訳⑤” の続きを読む

30 Seconds of CSS日本語訳④

「30 Seconds of CSS」

より、覚えておくと便利なCSSテクニックをどんどん訳して英語力も上げようというこの企画第4回目です。

前回:30 Seconds of CSS日本語訳③

13.活き活きした影 – Dynamic shadow

14.イージングの変数 – Easing variables

15.刻まれた文字 – Etched text

16.均等に配置された子要素 – Evenly distributed children

“30 Seconds of CSS日本語訳④” の続きを読む

30 Seconds of CSS日本語訳③

「30 Seconds of CSS」

より、覚えておくと便利なCSSテクニックをどんどん訳して英語力も上げようというこの企画第3回目です。

前回:30 Seconds of CSS日本語訳②

目次:

9.CSS変数 – Custom variables

10.選択の禁止 – Disable selection

11.テーブル要素内の中央配置 – Display table centering

12.ドーナッツ型の回転アニメ―ション – Donut spinner

“30 Seconds of CSS日本語訳③” の続きを読む

30 Seconds of CSS日本語訳②

「30 Seconds of CSS」

より、覚えておくと便利なCSSテクニックをどんどん訳して英語力も上げようというこの企画第2回目です。

前回:30 Seconds of CSS日本語訳①

目次:

5.高さの比率に対して一定の横幅 – Constant width to height ratio

6.自動連番 – Counter

7.スクロールバーのカスタマイズ – Custom scrollbar

8.テキスト選択範囲のカスタマイズ – Custom text selection

“30 Seconds of CSS日本語訳②” の続きを読む

30 Seconds of CSS日本語訳①

なんとなくブログ更新から遠のいてしまっていたので、自分用のメモ程度ではありますが英語サイトの技術解説ページなどの翻訳をしてみたいと思います。
まずは一度読み通した「30 Seconds of CSS」

 

基本からちょっと知らなかったオッとなるものまでワンポイントCSSテクニックを分かりやすく紹介してくれる(語学レベル的にも)素晴らしいサイトです。
コードサンプル等は転載しないので、私の訳を参考にされる場合は英語タイトルを見て対照させてください。

…訳が間違っていたらコメント欄で教えていただけるとありがたいです!

目次:

1.はずむ読み込み – Bouncing loader

2.Box-sizingの初期化 – Box-sizing reset

3.真円 – Circle

4.クリアーフィクス – Clearfix

“30 Seconds of CSS日本語訳①” の続きを読む

ダブルボックスアイコンの作り方

←こちら

CSSだけで出来た自作アイコンの作り方をまとめます。

文字サイズも大きくなるように設定してるし大項目のアイコンなんかにご自由にお使いくださいって感じなのですが、その前にこのアイコンの弱点を挙げますので、それでもイイヨ!という方はお使いください。というか解決策を教えて欲しい…

“ダブルボックスアイコンの作り方” の続きを読む