プログラミング【簡単コード】CSSでホバー時にボタンの透明度やフォントをアニメーションさせてみよう こんにちは、Webプログラマーのトムです。 今回はボタンにホバー(マウスを乗せた)した時にボタンの透明度やフォント等の要素をアニメーションで変化させてみようと思います。 以前にFontAwesomeを利用したSNSのアイコンの... 2021.09.18プログラミング
プログラミング【簡単コード】Font Awesomeを使ってSNSのアイコンを表示しよう Font Awesomeを使ってInstagramやTwitterなどのSNSのアイコンをWebサイトに表示するための、簡単に利用できるサンプルコードを提供します。 2021.09.16プログラミング
プログラミング【これで完璧】CSSで文字や要素に影を付ける3つの方法と応用例を解説 こんにちは、Webプログラマーのトムです。 さて今回はCSSで文字や要素に影を付ける方法について解説します。影を付ける方法は3通りの方法(プロパティ)があります。それぞれ文字に付ける時に使ったり要素に付けたりと使い方が異なるので混乱... 2021.09.15プログラミング
プログラミング【色々便利】シンプルな表を簡単作成!説明リストタグ【dl・dt・dd】を使いこなそう こんにちは、Webプログラマーのトムです。 さて今回は説明リストタグ【dl・dt・dd】の使い方について解説していきます。何らかの言葉や用語を説明する時に利用するのが基本ですが、従来はtableタグで書いていたようなシーンで、この説... 2021.09.14プログラミング
プログラミング【簡単便利】画像を指定サイズに簡単フィット!object-fitプロパティを使いこなそう こんにちは、Webプログラマーのトムです。 さて今回は、画像の拡大・縮小において非常に便利なプロパティである"object-fit"の使い方について解説していきます。以前に画像の拡大・縮小(リサイズ)について解説しましたが、今回はそ... 2021.09.13プログラミング
プログラミング【できるじゃん】flexboxでflexアイテムを縦方向に折り返してみよう こんにちは、Webプログラマーのトムです。 以前「flexboxはアイテムの横並びが簡単にできるからバリバリ使おう!」という記事を投稿しましたが、前からflexboxに対してずっと抱えてた疑問が、「flexboxは横方向の折り返しで... 2021.09.11プログラミング
プログラミング【簡単コード】CSSによる背景画像の拡大・縮小(リサイズ)を理解しよう 背景画像のリサイズを行うCSSのサンプルコードを提供します。拡大・縮小の様々なパターンでのサンプルコードがありますので実践ですぐに使えちゃいます!意図と異なる動作をする場合が度々ありますので留意点も併せて記します。 2021.09.11プログラミング
プログラミング【簡単コード】CSSで画像とテキストを横に並べる方法(レスポンシブデザイン対応) こんにちは、Webプログラマー(見習いは卒業しました!)のトムです。 今回は、初見では意外と詰まってしまう、画像とテキストを横に並べる方法について解説します。前提としてPCでの閲覧時は横並び、モバイルデバイスでの閲覧時には縦方向に並... 2021.09.10プログラミング
プログラミング【超基本】CSSで画像を拡大・縮小(リサイズ)してみよう CSSで意外とハマリ易い画像の拡大と縮小(リサイズ)について、すぐに使える様々なパターンのサンプルコードを提供します。リサイズは画像(img)に解像度の指定で実現。ピクセル指定(px)とパーセント(%)指定が可能。片方向のみの指定では画像の縦横比を維持します。 2021.09.09プログラミング
プログラミング【超基本】CSSで長方形の画像の角を丸くしたり、丸くくり抜いて正円にしてみよう こんにちは、Webプログラマー見習いのトムです(いつまで見習いなんでしょう^^; さて今回はCSSを使い、Webサイトで頻繁に見かける画像の角を丸くする手法について解説します。単に角を丸くするだけだと面白くないので、画像を丸くくり抜... 2021.09.08プログラミング
プログラミング【簡単コード】CSSでヘッダーとグローバルナビゲーションを上部に固定してみよう こんにちは、Webプログラマー見習いのトムです。 さて先日には「シンプルなグローバルナビゲーションを作成しよう」という記事を投稿しましたが、今回はその続きで、CSSでヘッダー固定を実装してみたいと思います。ちなみに正確には、ヘッダー... 2021.09.07プログラミング
プログラミング【超基本】flexboxでシンプルなグローバルナビゲーションを作成しよう こんにちは、Webプログラマー見習いのトムです。 今回はブログや企業サイトで良く出てくる「グローバルナビゲーション」をCSSを使って作成してみます。ちなみに私、毎度のことで恐縮ですが、つい先日までグローバルナビゲーションって用語を知... 2021.09.05プログラミング
プログラミング【コピペで完了】リセットCSSを使いこなそう 今回はリセットCSSについての解説です。HTMLとCSSでWebサイトを構築する上ではめちゃめちゃ大事なツールなので、ぜひ内容を理解しましょう。私のお勧めリセットCSSはress。headタグに1行コピペするだけで使えるので楽ちんです 2021.09.05プログラミング
プログラミング【超基本】CSSで画像の真ん中に文字を重ねる方法(簡単コード) こんにちは、トム@Webプログラマー見習いです。 さて私はprogateやcodestepでHTMLやCSSの学習を進めていますが、その中で画像の上に文字を重ねる課題が頻繁に出てきます。特に画像の真ん中に文字を重ねるパターンが非常に... 2021.09.04プログラミング
プログラミング【簡単コード】背景画像のパララックスをCSSを使って実装しよう こんにちは、Webプログラマー見習いのトムです。 さて今回は背景画像のパララックスの実装をやってみたいと思います。ちなみに私、パララックスってcodestepの課題やるまで全く知りませんでした(大汗)。意味を引用してみると以下の通り... 2021.09.03プログラミング
プログラミング【簡単コード】ボタンホバー時にボタンの枠線をアニメーションで囲むオシャレなCSSの書き方 ボタンホバー時にボタンの枠線をアニメーションで囲むオシャレなCSSの書き方を簡単コードで実現!ボタンのbefore と afterを定義しボタンの左上、右下の位置にセット。ホバー(hover)時にbeforeとafterの枠線のwidthとheightを変更します 2021.09.01プログラミング