Web制作

2023/3/23

縁取り文字をtext-strokeとtext-shadowを使って実装する方法を解説します。どちらも注意点があり、デモを見ながらその違いも確認できます。両方知っておくと使い分けができるようになります。

2023/3/23

text-shadowでテキスト(文字)に影をつける方法をサンプルを使って解説します。影は位置、色、ぼかしなど変えられるので、1つずつ解説していきます。また影を複数つけたり全方向にして縁取り文字のようにすることも可能です。

2023/3/23

box-shadowでボックス要素や画像に影をつける方法をサンプルを使って解説します。影は位置、色、大きさ、ぼかし、向きなど変えられるので、1つずつ解説していきます。

2023/3/22

Flexboxで画像とテキストを横並びにしたら画像や要素が小さく潰れた(縮む)ことはありませんか？これはCSSに1行書けば解説することができます。今回はその対処方法と原因をデモを使って解説します。

2023/3/21

CSSで文章を縦書きにする方法をデモを使って解説しています。また縦書きで使えるテクニックについてもご紹介しています。縦書きは日本風のサイトではよくあるデザインなので、実装できるようにしておくと便利です。

2023/3/21

サンクスページや404ページなど、コンテンツ量が少なく短いページでもフッターを最下部に表示する方法を解説します。ページの高さが足りないページは対策しないとフッターの下に余白が出来てしまうので、ちゃんと対策しておきましょう。

2023/3/21

CSSのhover(マウスオーバー)で画像を切り替える方法を解説。回転・スライド・フェードなど様々な方法と方向での切替方法をデモとコードを使って解説しています。

2023/3/20

CSSでhoverしたら画像や文字など要素を回転させる方法を解説しています。hoverしたときだけ回転させる場合と、hoverを離したときにも回転させる場合の両方解説しています。アニメーションは簡単に実装できるので、ぜひ試してみて下さい。

2023/3/20

CSSで要素を回転させる方法をアニメーションも使いながら解説しています。コードとデモがあるので、コピペで実装可能です。要素を回転・傾けることは実務でもたまにあるので、覚えておくと便利です。

2023/3/17

Chromeのデベロッパーツールの使い方を解説しています。HTML・CSSの編集、レスポンシブのチェック、日本語化についても解説。コーディングする際には必ず使うものなので、勉強中の人も少しずつ使って慣れていくのがおすすめです。