【HTML/CSS】CSSのみで画像切り替えのアニメーションを実装する方法

プログラミング初心者の勉強ブログ #130

ここ最近何回か連続でCSSでの画像切り替えアニメーションについて質問を受けたので、改めて記事にしてみる。JS使わなくてもCSSアニメーションのみである程度実装できるのでその方法をまとめる。以前記事にしたような気もするが、CSS系の記事は結構読まれる傾向にあるのでもう一度書こうと思う。

 

more… “【HTML/CSS】CSSのみで画像切り替えのアニメーションを実装する方法”

【CSS】仕組みから知る!ラジオボタンを自分好みのデザインにする方法

プログラミング初心者の勉強ブログ #87

Railsのform_withやform_tagなどで実装した「radio_button」のデフォルトデザインを変える方法を紹介します。3つのポイントを理解することで、簡単にラジオボタンのデザインを変更できます。実際に作成したコードをもとに解説していきます。
more… “【CSS】仕組みから知る!ラジオボタンを自分好みのデザインにする方法”

【HTML】videoタグで簡単にWebサイトをリッチに見せることができる話

プログラミング初心者の勉強ブログ #62

画面を動かすのはCSSとJSだけじゃありません。videoタグで動画を埋め込んで、一歩進んだWebページを簡単に作成するための方法を解説します。グレースケールなど、簡単なアレンジ方法も紹介。

more… “【HTML】videoタグで簡単にWebサイトをリッチに見せることができる話”

【CSS/JavaScript】ハンバーガーメニュー自作の手順

【Rails】プログラミング初心者の勉強ブログ #61

ハンバーガーメニューを自作したい。Bootstrapやプラグインではなく、CSSとJSを使い、オリジナルハンバーガーメニューを作るためには、どのタイミングで、どのようなコードが必要になるかを実在サイトをもとに考察しました。

more… “【CSS/JavaScript】ハンバーガーメニュー自作の手順”

【Webデザイン】ノンデザイナーズ・デザインブック4つの特徴と読むべき理由

【Rails】プログラミング初心者の勉強ブログ #58

デザイン素人のエンジニア志望の方に、世間で評判な「ノンデザイナーズ・デザインブック」をオススメしたいので、その理由と、この本から学べることをまとめます。様々な所で目にする「デザイン4大原則」の「起源」がこの本です。独学でデザインを学ぶにあたって、読んでおくべき一冊です。

more… “【Webデザイン】ノンデザイナーズ・デザインブック4つの特徴と読むべき理由”

【HTML/CSS】実際のwebサイトから学ぶwebデザイン構造7つの共通点(模写学習 #4)

【Rails】プログラミング初心者の勉強ブログ #57

実際にあるWebサイトを模写して、Webデザインの構造基礎を分析しました。「近接・整列・強弱・反復」のデザイン4大原則がどのように組み込まれているか、5つの実在するサイトを元に解説しております。素人感の出ないサイト構築するためにはどうすればいいか。

more… “【HTML/CSS】実際のwebサイトから学ぶwebデザイン構造7つの共通点(模写学習 #4)”

【HTML/CSS】CSSのみでwebページにアニメーションをつける方法(模写学習 #3)

【Rails】プログラミング初心者の勉強ブログ #56

模写学習3回目。アニメーションを意識した回です。transformや@keyframes、擬似要素を用いてtrasitionで動かす方法を解説。よくわからなかったCSSプロパティもわかると楽しいです。

more… “【HTML/CSS】CSSのみでwebページにアニメーションをつける方法(模写学習 #3)”

【HTML/CSS】画像表示に困らないための相対パス知識まとめ(模写学習 #2)

【Rails】プログラミング初心者の勉強ブログ #55

模写学習2回目。画像表示の「相対パス」で詰まってしまい、情けなかったのできっちりまとめます。カレントディレクトリを意識した「. /」と「.. /」の使い分けについて解説します。

more… “【HTML/CSS】画像表示に困らないための相対パス知識まとめ(模写学習 #2)”