HTML CSS 【サンプルコードあり】 li(リスト)スタイルで、hoverした時に背景色の変更したが枠いっぱいに反映されない。
li(リスト)スタイルで一覧表を作成して、aタグにhoverした場合、背景色が変わる設定をしても、背景色が枠いっぱいに反映されない場合その解消が出来たので、この方法でホバーした時に反映される範囲を操作しやすくなるそんな内容を記事に書きました。
HTML CSS
HTML CSS 
HTML CSS 【サンプルコードあり】ナビの文字にa要素でリンクつけて下線表示、hoverした時に上下に広がってしまった時にした解消方法。
今回は、ナビゲーションメニューの所で、文字hoverした時に 文字の下に下線が出る設定をした。 文字hoverした時に下線が出るようにはなったが、 hoverしたら上下にふくれるような動きになる。 今回の下記のサンプルの場合は、navの文字...
HTML CSS 【サンプルコードあり】HTML・CSSでコーディングしてて、意図しないマージンと要素の重なり（おかしな重なり）等があった場合の修正
今回、コーディング時に下記のように変な状態になってたんで、 その原因と、今回どうやって修正したか記事にしました。 もし同じような状況になって場合は参考にしてみてください。 改善前の状態 改善後の状態 今回の不具合の原因 このセクションを囲っ...
HTML CSS 【サンプルコードあり】画像に重ねる文字等の上下左右の中央揃えの時に注意する事
今回は、画像に文字等重ねて、中央に配置したい場合の やり方、positionを使うと簡単にできます。 その時の注意点、実際に私が失敗したので 改善前と改善後の方法を書いてみました。 コードを書く時には、レスポンシブの事も考えて 出来るだけ、...
HTML CSS カーゾルを合わせると、矢印が横に伸びるボタンの作成方法
カーゾルを合わせると、矢印が横に伸びるボタンの作成方法 今回は、カーゾルを合わせると、矢印が横に伸びるボタンを はじめて作る際に、どうやって形にしていったかを記事に してみました。 コーディングにしてもプログラミングにしても、実際に 自分が...
HTML CSS 意図しない所がクリック出来る、a要素のリンクがヘンな場所にある場合、なくすには小さくしたり、反映範囲の指定でＯＫ 【サンプルコードあり】
a要素のリンクがヘンな場所にある場合、なくすには小さくしたり、反映範囲の指定でＯＫ HTML/CSSでコーディングしてる時。 画像にリンクをつけた時、意図しない変なところがリンクできる状態に なってませんか？ これ、よくあります。 画像の外...
HTML CSS HTML/CSSで要素の４辺の空間を指定する方法 marginを指定すると、要素の外側に領域を作成します。
HTML/CSSで要素の４辺の空間を指定する方法 marginを指定すると、要素の外側に領域を作成します。 margin プロパティ があります。 margin でよく使う設定方法 表示ページの左右真ん中に配置 margin: auto; ...
HTML CSS 【サンプルコードあり】CSSセレクタの擬似クラス ｐ:nth-child()・p：nth-of-type() 一定間隔の要素を指定することができる。
CSSセレクタの擬似クラス 一定間隔の要素を指定することができる。 使用例は、テーブルの行単位で色を変えたい。 複数の場所にCSSで指定をしたい場合などに指定することが可能。 ｐ:nth-child()とｐ：nth-of-type()があり...
HTML CSS 画像（img) を中央よせにする方法。インライン要素・ブロック要素の違いに注意。
CSSでimg真ん中に寄せる方法 CSSで画像（img要素）を中央に寄せて表示させる方法は、 寄せたい画像の外枠になる、div要素にtext-align : center を付与するとうまくいきます。 imgを真ん中に配置 今回の場合で、画...
HTML CSS CSSでの文字の装飾、蛍光ペンで書いたようなマーカーを付けるのも簡単に出来た。
CSSでの文字の装飾で、蛍光ペンで書いたようなマーカーを付ける方法をやってみた。 文章中の文字を強調したい時によく使われる、 蛍光ペンで書いたようなマーカーを、CSSでも簡単に 表現することが可能です。 この記事では、その方法を書いていきま...