今年も残りあとわずか！一年間お世話になりました！Webクリエイターボックスも間もなく10周年です！毎年思いますが早いですね。という事で例年どおり、Webクリエイターボックスが今年1年どんな変貌を遂げたのか、そしてWebクリエイターボックス内でよく読んでもらった記事トップ10などを紹介しようと思います。いくつ覚えていただけてますかね？ :3

↑私が10年以上利用している会計ソフト！

2019年ハイライト

今年あった出来事です。個人的にもWebクリエイターボックス的にも、書籍の出版は大きなニュースでした！

• 2月13日 カラーコードをRGB値に変換するツール「Quick HEX to RGB」公開（関連記事：Vue.jsでカラーコードからRGB値にサクッと変換する方法）
• 3月16日 書籍「1冊ですべて身につくHTML & CSSとWebデザイン入門講座」出版
• 4月6日 2019 SPRING「WEB TOUCH MEETING」に登壇
• 9月27日 Webクリエイターボックスをダークモードに対応

Webクリエイターボックスの〇〇年を振り返る記事シリーズ

• 2018年
• 2017年
• 2016年
• 2015年
• 2014年
• 2013年
• 2012年
• 2011年
• 2010年

アクセスの多かった記事 トップ10

今年書いたものでアクセスの多かったものトップ10。

1. 【第3弾】少しのコードで実装可能な15のCSS小技集
これまでJavaScriptで実装していたあの技この技がCSSで手軽に指定できるようになりました！コーディング作業の効率アップにもつながりますね！

この記事をRTする

2. 表示領域にピタッと移動！CSSでスクロールスナップを実装しよう
スクロールした時に画面にピタッと各エリアを表示させたい時に使えるのが「CSSスクロールスナップ」。スクロール軸や停止位置もCSSだけで指定できるスグレモノです！

See the Pen
scroll-snap basic demo by Mana (@manabox)
on CodePen.

この記事をRTする

3. Webで使えるカラーネームと、そのカラーコード・RGB値一覧
Webサイトの制作途中やテスト段階では、手軽に「とりあえず」色をつける…ということもあります。そんな時はカラーコードよりも覚えやすいカラーネームで指定するといいですね！一覧にまとめたので使ってみてください！

この記事をRTする

4. Adobe XDでアニメーションのあるプロトタイプをデザインしよう
アニメーションを使ったWebサイトやアプリのプロトタイプ制作はAdobe XDが便利！制作過程をステップごとに説明しました！

この記事をRTする

5. Webフォントとして日本語も使える！Adobe Fontsの使い方
Adobeが提供するフォントライブラリサービス、Adobe Fontsの説明。日本語フォントの種類もかなり多くて要チェックです！

この記事をRTする

6. Webサイトをダークモードに対応させよう
メディアクエリーとCSS変数（カスタムプロパティ）を使ってサクッとダークモードに対応する方法を紹介。夜間のサイト閲覧がつらいので、どんどんダークモードが普及しますように…！

この記事をRTする

7. 書籍執筆しました！「1冊ですべて身につくHTML & CSSとWebデザイン入門講座」
コツコツ書いていた書籍がやっと世に出た記念記事！久しぶりにプレゼント企画も行いましたね。「ようやく完成した…！」「やっと発表できる…！」と、公開した際はホッとしておりました。

この記事をRTする

8. CSSで見出し固定＋レスポンシブ対応の表を作成
いつもtableのレスポンシブ化に悩まされていたので、なるべく楽にできるものをと考えて記事にしました。様々な手法がありますが、選択肢のひとつとして覚えておいていただけると嬉しいです！

See the Pen
Responsive Table w/ Heading Demo by Mana (@manabox)
on CodePen.

この記事をRTする

9. Webアイコンフォントの【Font Awesome】がアカウント登録必須になったので、使い方をおさらいしました
アイコンを表示させるためのサービス、Font Awesomeが利用方法を変更し、登録必須になったので、登録から利用方法、作例をまとめて紹介しました。

この記事をRTする

10. Illustratorで手描き風イラストを描く方法や無料ブラシいろいろ
ベクター形式のIllustratorでは手描き風タッチが難しいと思われがちですが、工夫をすればちゃんと実現できます！2020年にはiPadでIllustratorのアプリが登場するそうですし、Illustratorに苦手意識のある人でも試していただければ！

この記事をRTする

検索されたワード トップ10

1位は以前と変わらず「flexbox」。11位以下にはflex関連のワードも多々あり、flexbox利用の高まりが伺えます。他の検索ワードもCSS関連がほとんど！CSS以外のネタも取り扱っていかねば…。

1. flexbox
2. css flex
3. css グラデーション
4. object-fit
5. 角丸 css
6. css 変数
7. カラーコード
8. wordpress 子テーマ
9. css 縦書き
10. uxデザイナー

参照元サイト トップ10

1〜4位は前年と変わらず。相変わらずTwitter強いです。毎年上位にいたまとめサービスが今年は10位圏外へ。代わりにこれまでは圏外だったWebサイトからの流入が増えています。いつもSNSでシェアしてくださってる皆さん、まとめ記事等でとりあげてくださるブロガーさん、ありがとうございます！

1. Twitter
2. はてなブックマーク
3. Feedly
4. Facebook
5. manablog
6. Mana’s Portfolio Website
7. Inoreader
8. Qiita
9. Pinterest
10. まちのWeb屋さかぽんの雑記ブログ-MIYAZAKI LIFE

ビジターの使用ブラウザー トップ5

1〜5位まで、順位はまったく変わりませんでした。ChromeとEdgeが微増し、他のブラウザーはすべて減少に。昨年は「来年にはEdgeがIEを抜いてそう」なんて言っていましたが、あと少しのところでなかなか手ごわいIE11…！

1. Chrome – 65.06% (+2.81)
2. Safari – 18.88% (-0.09)
3. Firefox – 6.58% (-1.39)
4. IE11 – 3.70% (-1.48)
5. Edge – 2.37% (+0.19)

今後もWebクリエイターボックスをよろしくお願いします！