CSS

WEBデザイン

【コーディング備忘録】CSSで画像やボタンを右寄せにする方法

コーディングをしていると要素を左右上下に寄せる場面が多々ありますよね。 私の場合、そんな場面で真っ先に思い浮かぶのがtext-align:〇〇(位置指定)なんです。しかし、text-alignが通用しない場面に遭遇してあたふたするこ...
WEBデザイン

【コーディング備忘録】テキストリンクにカーソルを置いた時に下線を表示させるCSS

テキストにaタグを使ってリンクを設定すると、デフォルトの状態だと デザインはじめました このように、ちょっと古くさい見た目で表示されてしまいますよね。文字色が青だと、配色が整ったデザインを損なってしまう恐れがあります。 ...
WEBデザイン

【コーディング備忘録】改行タグ<br>に余白を指定する方法

文章を改行する際に使用する<br>タグですが、文章の余白を調整するのにも便利だったりします。 今回は、長文を読みやすくするために行間や段落間の余白を空けたい時に有効な<br>の活用法を解説したいと思います。 See the...
WEBデザイン

【CSS】カーソルを乗せると画像が「ズームイン」するホバーエフェクトの使い方をご紹介

画像やリンクボタン等にカーソルを乗せた時の動きを「ホバーエフェクト」と呼びますが、調べてみると沢山の種類のエフェクトが紹介されていたりします。その中でもメジャーなズームイン系のホバーエフェクトを先日初めて使ってみたので、この場でおさらいし...
WEBデザイン

【コーディング備忘録】border-radiusを使って色々な丸をつくる!〜CSS〜

CSSで四角いオブジェクトを作ることはあったけど、円はどうやって作るんだろう?とふと疑問に思い調べてみました。 今後も使うことになると思うので備忘録として書き残しておこうと思います! 正円の作り方 See the Pen bo...
WEBデザイン

【コーディング初心者向け講座】「!important」を使って優先度を変える方法について学ぶ!〜CSS〜

CSS上で指定したスタイルがなぜか適用されていなかったり、一部を変更したいけど既に指定したCSSが優先されてしまってどうしよう!なんてことありませんか? こんなとき「!important」を使ったら上手くいくかもしれません! そ...
WEBデザイン

【コーディング備忘録】固定ヘッダーによりページ内リンクの位置がズレてしまう問題を解決する〜CSS〜

本日はページ内リンクにまつわる、ちょっとしたコーディング備忘録です。 ページ内リンクを複数設定し、正常にリンクできているか確認を行っていたところ、飛んだ先の見出しに固定ヘッダーが重なっているのを発見しました。見出しからきれいに表示させ...
WEBデザイン

【コーディング備忘録】boldを使っていないのに、文字が太字になっているとき

本日もコーディング初心者が「なんでだろう?」とつまずいてしまった、何でもないようなことを書いていきますよ。 それは最初のページのコーディングが最終段階に入り、余白やフォントが適切かどうかデザインカンプを見ながら確認していたとき。文字の...
WEBデザイン

【コーディング備忘録】「display:inline-block」でリストを横並びにした時に生じる余白の対処法

グローバルナビなどリストを横並びにする時に発生してしまう余白について書き記しておこうと思います。 先日、リストタグに対して「display:inline-block」を使って要素を横並びにした時に、liとliの間に謎の余白が発生してい...
WEBデザイン

【コーディング備忘録】ヘッダーを固定させる方法と注意点

ヘッダーに何も設定していない状態だと、メニューを選択しにまたページトップまで戻る手間が生じてしまいます。 本日は、スクロールしても常にページの上部にヘッダーを固定表示させることができるCSSプロパティ「position:fixed」を...
タイトルとURLをコピーしました