プログラミング

スポンサーリンク
プログラミング

【簡単コード】CSSでホバー時にボタンの透明度やフォントをアニメーションさせてみよう

こんにちは、Webプログラマーのトムです。 今回はボタンにホバー(マウスを乗せた)した時にボタンの透明度やフォント等の要素をアニメーションで変化させてみようと思います。 以前にFontAwesomeを利用したSNSのアイコンの...
プログラミング

【簡単コード】Font Awesomeを使ってSNSのアイコンを表示しよう

こんにちは、Webプログラマーのトムです。 さて今回はInstagramやTwitterなどのSNSのアイコンをWebサイトに表示させてみようと思います。Progateやcodestepなどの練習サイトでもたまに出てくる課題ですが、...
プログラミング

【これで完璧】CSSで文字や要素に影を付ける3つの方法と応用例を解説

こんにちは、Webプログラマーのトムです。 さて今回はCSSで文字や要素に影を付ける方法について解説します。影を付ける方法は3通りの方法(プロパティ)があります。それぞれ文字に付ける時に使ったり要素に付けたりと使い方が異なるので混乱...
プログラミング

【色々便利】シンプルな表を簡単作成!説明リストタグ【dl・dt・dd】を使いこなそう

こんにちは、Webプログラマーのトムです。 さて今回は説明リストタグ【dl・dt・dd】の使い方について解説していきます。何らかの言葉や用語を説明する時に利用するのが基本ですが、従来はtableタグで書いていたようなシーンで、この説...
プログラミング

【簡単便利】画像を指定サイズに簡単フィット!object-fitプロパティを使いこなそう

こんにちは、Webプログラマーのトムです。 さて今回は、画像の拡大・縮小において非常に便利なプロパティである"object-fit"の使い方について解説していきます。以前に画像の拡大・縮小(リサイズ)について解説しましたが、今回はそ...
プログラミング

【できるじゃん】flexboxでflexアイテムを縦方向に折り返してみよう

こんにちは、Webプログラマーのトムです。 以前「flexboxはアイテムの横並びが簡単にできるからバリバリ使おう!」という記事を投稿しましたが、前からflexboxに対してずっと抱えてた疑問が、「flexboxは横方向の折り返しで...
プログラミング

【簡単コード】CSSによる背景画像の拡大・縮小(リサイズ)を理解しよう

こんにちは、トム@Webプログラマーです。 先日、imgタグで描画される画像のリサイズ(拡大・縮小)について解説しました。今回はimgタグの画像ではなく「背景画像」に対するリサイズの動作を確認してみようと思います。 いつものこ...
プログラミング

【簡単コード】CSSで画像とテキストを横に並べる方法(レスポンシブデザイン対応)

こんにちは、Webプログラマー(見習いは卒業しました!)のトムです。 今回は、初見では意外と詰まってしまう、画像とテキストを横に並べる方法について解説します。前提としてPCでの閲覧時は横並び、モバイルデバイスでの閲覧時には縦方向に並...
プログラミング

【超基本】CSSで画像を拡大・縮小(リサイズ)してみよう

こんにちは、Webプログラマー見習いのトムです。 さて今回はコードを書いてて意外とハマリ易い画像の拡大と縮小(リサイズ)について、CSSでどう書けばどのように動作するのかについて検証してみます。前提として配置する画像は<img...
プログラミング

【超基本】CSSで長方形の画像の角を丸くしたり、丸くくり抜いて正円にしてみよう

こんにちは、Webプログラマー見習いのトムです(いつまで見習いなんでしょう^^; さて今回はCSSを使い、Webサイトで頻繁に見かける画像の角を丸くする手法について解説します。単に角を丸くするだけだと面白くないので、画像を丸くくり抜...
プログラミング

【簡単コード】CSSでヘッダーとグローバルナビゲーションを上部に固定してみよう

こんにちは、Webプログラマー見習いのトムです。 さて先日には「シンプルなグローバルナビゲーションを作成しよう」という記事を投稿しましたが、今回はその続きで、CSSでヘッダー固定を実装してみたいと思います。ちなみに正確には、ヘッダー...
プログラミング

【超基本】flexboxでシンプルなグローバルナビゲーションを作成しよう

こんにちは、Webプログラマー見習いのトムです。 今回はブログや企業サイトで良く出てくる「グローバルナビゲーション」をCSSを使って作成してみます。ちなみに私、毎度のことで恐縮ですが、つい先日までグローバルナビゲーションって用語を知...
プログラミング

【コピペで完了】リセットCSSを使いこなそう

こんにちは、Webプログラマー見習いのトムです。 今回はリセットCSSについての解説です。正直に申しますがワタクシ、つい先日までこのリセットCSSの役割をちゃんと理解できていませんでした(大汗)。HTMLとCSSでWebサイトを構築...
プログラミング

【超基本】CSSで画像の真ん中に文字を重ねる方法(簡単コード)

こんにちは、トム@Webプログラマー見習いです。 さて私はprogateやcodestepでHTMLやCSSの学習を進めていますが、その中で画像の上に文字を重ねる課題が頻繁に出てきます。特に画像の真ん中に文字を重ねるパターンが非常に...
プログラミング

【簡単コード】背景画像のパララックスをCSSを使って実装しよう

こんにちは、Webプログラマー見習いのトムです。 さて今回は背景画像のパララックスの実装をやってみたいと思います。ちなみに私、パララックスってcodestepの課題やるまで全く知りませんでした(大汗)。意味を引用してみると以下の通り...
プログラミング

【簡単コード】ボタンホバー時にボタンの枠線をアニメーションで囲むオシャレなCSSの書き方

現在 codestep に全力投球中のトム@プログラマー見習いです。 その中に、「ボタンホバー時にボタンを枠線で囲む」という課題があり、大苦戦の末完成しました!!せっかくなので備忘録もかねてコードを掲載します。 今...
スポンサーリンク
タイトルとURLをコピーしました