2023年7月25日 CSS CSSで動かすアニメーションには、私自身まだまだ使いこなせていないプロパティーがたくさん眠っています。その中のひとつが steps というプロパティーでした。これまでよく使っていた滑らかな動作ではなく、段階ごとに要素を動かすことができます。実際にはどんな場面で使えるんでしょうか？今回はそんな steps プロパティーにフォーカスしてみます。 ↑私が10年以上利用している会計ソフト！ steps の記述方法 steps は animation や keyframes プロパティーとともに利用します。steps() のカッコの中には、いくつの段階を経て動作させるのかを記述。例えば5段階で変化させるなら、steps(5) と記述します。 .element { animation: img-move 5s steps(5); } @keyframes img-move

2015年11月11日 Webデザイン Webデザイナーやデベロッパーの就職・転職活動で必要なのが、これまで制作した作品をまとめたポートフォリオWebサイト。以前このブログでも「Webデザイナーになりたい！就活に打ち勝つポートフォリオWebサイトの作り方」という記事で作り方なんぞをまとめました。この記事を書いた2010年時点では「ポートフォリオサイトは日本では一般的ではない」なんてコメントされたりもしましたが、5年たった今、もはや必須となっていると思います。そこで改めてポートフォリオサイトについて書いてみます。 ↑私が10年以上利用している会計ソフト！ 「さぁ、ポートフォリオサイトを作ろう！」と思っても、どんな内容のサイトにすればいいか悩みますよね。ここでは実例を見ながら、ポートフォリオサイトに盛り込むべき項目を挙げていきます！ 制作した作品（Webサイト・サービス） ポートフォリオサイト

2017年1月11日 Web関連記事, 便利ツール 作業中、ちょっと行き詰まった時は別の事をして脳のリフレッシュ！Webデザイナーさん向けのものを中心に、ブラウザー上で遊べるミニゲームをいくつか紹介します。もちろん楽しむだけではなく、デザインや制作のスキルアップにつながりそうなミニゲームも！一人でも、同僚とわいわい話しながらでも楽しめますよ！ ↑私が10年以上利用している会計ソフト！ Web制作関連 Draw a Square Draw a Square 指定されたサイズのボックスをドラッグして描写し、どれくらい一致したかでスコアを競う簡易ゲーム。シンプルなゲームですが、サイズ感を身につけられますよ。 Whatpx Whatpx こちらもサイズ系。表示された黒い部分の幅（ピクセル数）をあてるゲームです。1px単位までサイズを極めたい方へ！ Dedesign the Web 2 Dedesi