WEB制作

convert

Photoshopのドロップシャドウはコンバーターを使って時短コーディング

2024/4/4    

Photoshopからコーディングをするときに、ボックスやテキストのシャドウを表現するのって、けっこう手間じゃありませんか? 角度、長さ、ぼかし、広がり、を読み取って、CSSに入力します。 &nbsp ...

text-center

【CSS】要素を中央に寄せるテクニック6選 場面によって使い分けよう

2024/4/4    , ,

要素を中央に寄せることは頻繁にあります。 やり方もケースバイケースです。   今回の記事では、要素を中央に寄せるためのテクニックをまとめてみました。 一元的な記事ですので、状況に応じて参考に ...

text-leftStay-center

【CSS】テキストを左寄せの状態で中央にもってくる方法をご紹介

2024/4/4    

今回は、テキストを左に寄せた状態で中央寄せにする方法を紹介します。 初心者の方はけっこう「あれ?どうやるんだろ」となります。   解決方法としては、text-align の left と c ...

header-summary

【CSS】ヘッダー作成でよく使うCSSとよくあるエラーのまとめ記事

ヘッダーに関する記事が増えてきたので、まとめ記事を作ってみました。 よく使うCSSや初心者がよくつまづくエラーを一挙に紹介します。   ヘッダーの作成はある程度パターンが決まっておりますので ...

slide_menu-header_fix

【CSS】スライドメニューを表示させたままスクロール&ヘッダー固定

CSSでヘッダーを固定したのに、スライドメニューを表示したまま下へスクロールするとヘッダーがついてこない。 というエラーでつまづいたのでメモ代わりに記事として残します。   エラー内容 まず ...

text

文字を折り返しさせない white-space: nowrap; 

2024/4/4    

テキストの折り返しをさせたくない場合はどのようなCSSを設定すればいいでしょうか。 今回はその方法をご紹介します。   私の場合は、レスポンシブデザインの確認でブラウザを伸縮させていたら、ボ ...

text-BeSmart

【CSS】すぐに使える 擬似要素で画像やアイコンを表示する方法 

2024/4/4    , ,

今回は、擬似要素で画像やアイコン( Font Awesome)を表示する方法をご紹介します。   タイトルの装飾やアクセントをつけるときに画像を使用するときがあります。   img ...

title--z-index

【CSS】擬似要素を文字とかさねてオシャレな見出しをつくろう

2024/4/4    ,

おしゃれな見出しをつくりたいけど何かいい方法はないかな? という疑問にお答えします。   ということで今回は擬似要素を使って見出しをオシャレにする方法です。   先日WEBサイトを ...

book-and-pen

【CSS】テキストがグッときわ立つアンダーラインの引き方3選 

2024/4/4    

今回はCSSでアンダーライン(下線)の引き方をご紹介します。   さっぱりわからない人はサクッと覚えてしまいましょう。 いつも同じ方法でコーディングしている人はバリエーションを増やしましょう ...

file

相対パスの階層をおさえてCSSや画像の読み込みエラーを防ごう

2024/4/4    

WEB制作の初学者の方でハマりすいのがファイルの階層です。 えらそうなことを言っている私もハマった1人です。   絶対パスや相対パスについてはわかっている人も多いと思うので、 そこは省略しま ...

© 2024 人生フリーハンド Powered by AFFINGER5