30 Seconds of CSS日本語訳⑨

「30 Seconds of CSS」

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

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

33.OS内蔵のフォント- System font stack

34.トグルスイッチ- Toggle switch

35.トランスフォームで中央配置- Transform centering

36.三角形- Triangle

37.省略されたテキスト- Truncate text

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

初gridレイアウトで躓いたところ

この記事で伝えたいこと

IE11にグリッドレイアウトを対応させる場合はgrid-template-columnsgrid-template-rowsの中のminmaxの最小値にautoを使うのを止めよう。

なぜ?:

プリフィクス付けても認識されなくてレイアウトがぐちゃぐちゃになるから。

対策:

autoの代わりにmin-content数値を使ったら治る!(内容によってmin-contentが効かない時もある、その時は具体的にpxで指定)


作っていたサイトのコンテンツだとmin-contentでバッチリだったんですが、サンプルで作ったミニマルなコンテンツだと効かなくて0を使ったら一応解決したりして…もう原理がよく分からないんですがとにかくよろしくお願いします。(誰か~)

“初gridレイアウトで躓いたところ” の続きを読む

30 Seconds of CSS日本語訳⑧

「30 Seconds of CSS」

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

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

29.良い感じのアンダーライン – Pretty text underline

30.全てのスタイルの初期化 – Reset all styles

31.シェイプされた仕切り線 – Shape separator

32.色が薄らぐ兄弟要素 – Sibling fade

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

CodePen貼り付けテスト

See the Pen We’re Getting Close by Lanny (@lannymcnie) on CodePen.0


き、きもてぃ~~

トップページにあったやつですが、見てるだけでちょいキモ気持ちいい、癒される

30seconds of CSS でも使われているCodePen、見やすくて良いですよね。

今回はとりあえずワードプレスで記事に載せる方法を探そうと思って
CodePenのソースコードをWordPressに貼り付けて紹介してみよう
こちらを参考に、人様のコードを掲載してみるところまでやってみましたが、そのうち自分も登録して投稿したのを引用してみたいですね。

後は自分が便利だと思ったやつを貼るメモ↓ “CodePen貼り付けテスト” の続きを読む

30 Seconds of CSS日本語訳⑦

「30 Seconds of CSS」

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

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

25.:notセレクタ – :not selector

26.要素を非表示にする – Offscreen

27.スクロール要素の下端に白いぼかしを入れる – Overflow scroll gradient

28.パッと出て来るメニュー – Popout menu

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

30 Seconds of CSS日本語訳⑥

「30 Seconds of CSS」

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

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

21.高さの値の変化 – Height transition

22.ホバー時の下線アニメーション – Hover underline animation

23.最後尾のアイテムに残りの高さを取らせる – Last item with remaining available height

24.カーソルに付いてくるグラデーション – Mouse cursor gradient tracking

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

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日本語訳②” の続きを読む