webデザイナー初心者にオススメするこれだけは持っておくべき参考書を4つ紹介します。
webデザイナーのプロも愛用する参考書4選【参考書選び】
2020年 5月 の投稿一覧
radioboxを使った画像のスライダー実装方法【CSS】
<input>タグのラジオボックスを使ったスライダーを作成しました。定番のスライダーなので使いこなせるようになりたいですね。
【webデザイナー必須】URLをQRコード化してスマホで見る方法
webデザインを作成する上で今ではスタンダードになっているスマホファースト。PCよりSPからの閲覧者が多くなった現在、SPデザインを作成することが多いと思います。今回はSPデザインの確認を行うときにオススメの方法を紹介します。
デッドバイデイライト4周年生放送まとめ
5月27日深夜3時にDead by Daylight公式より、youtubeでの生配信がありました。この日ちょうど4周年を迎えた人気ゲームDead by Daylight。この公式生放送で語られた7つのことについてまとめたので、紹介します。
ネオンのように光るホバーエフェクトボタン【CSS】
ネオンのように光るボタンをホバーエフェクトで作成してみました。ダークなサイトなんかに使えそうです。
BAKEのMVのホバーエフェクトを真似てみた【webデザイン】
BAKE抹茶チーズタルトのサイトのメインビジュアルのホバーエフェクトが好きだったので、真似てみました。Javascriptを使ったホバーエフェクトを使っているので、ぜひ参考にしてみてください。
一文字ずつテキストを表示させるアニメーション【タイプライター風】
タイプライターで文字を入力するようにテキストが一文字ずつ表示されるアニメーションを作成しました。webデザインの参考にいかがでしょうか。
背景に一枚の画像を使ったグリッドレイアウト【display-grid】
display : grid ;を使ったグリッドレイアウトを作成してみました。画面を等分に切り分けられるので、整理されたレイアウトをデザインしたい時にオススメです。
映画の予告風テキストアニメーション【UsingOnlyCSS】
今回は映画の予告や車のCMでよく見る、テキストアニメーションを紹介します。文字が左から浮き上がっていくアニメーションです。CSSのみで実装できますので、トライしてみてください。
fullpage.jsを使った全画面ページの実装方法とデザイン
JQueryのプラグインである、fullpage.jsを使ってワンスクロールで一画面スクロールするDEMOページを作成しました。簡単に実装できるので参考にしてみてください。