HTML CSS white-space : pre;これを指定すると。長い文章の場合でも折り返さずに表示できる。CSS
CSS で white-space: pre;を指定すると。長い文章の場合でも折り返さずに表示できる。通常何も指定してない場合は。要素の端で自動で折り返される。white-spaceは、要素内での文字列を制御するとこが出来るプロパティ。
HTML CSS
HTML CSS 
HTML CSS 【サンプルコードあり】HTML/CSSで flex-wrap: wrap; が効かない場合の対処の方法
flex-wrap: wrap; が効かない場合の対処方法はいくつかの方法があります。今回、ページを縮めた時に要素が下に折り返す設定を下が、要素が縮むだけで折り返されない状態になってました。 その解消法はいろいろあります。その中の１つで今...
HTML CSS 【サンプルコードあり】 ナビゲーションバー(nav)をinline-blockを使って作った方法。
ナビゲーションバー（nav）の作成方法はいろいろありますが、この記事ではnavをulのliで作成して、liをinline-blockにすると横並びになるのでその方法で作成。calcで均等配置して作成。実際のサンプルコードも記載してます。
HTML CSS Page Ruler Reduxが使えなくなったので、代わりにグリッド定規(Grid Ruler)とDimensionsでページの要素などのサイズを測定の拡張機能使ってみた。
ページの要素などのサイズを測定できるGoogle Chromeの拡張機能。Page Ruler Reduxを使ってたのですが、最近この拡張機能がポリシーに違反してるとのことで、使用出来なくなった。そこで、変わりに使える拡張機能探したのですが...
HTML CSS 【サンプルコードあり】 li(リスト)スタイルで、hoverした時に背景色の変更したが枠いっぱいに反映されない。
li(リスト)スタイルで一覧表を作成して、aタグにhoverした場合、背景色が変わる設定をしても、背景色が枠いっぱいに反映されない場合その解消が出来たので、この方法でホバーした時に反映される範囲を操作しやすくなるそんな内容を記事に書きました。
HTML CSS 【サンプルコードあり】ナビの文字にa要素でリンクつけて下線表示、hoverした時に上下に広がってしまった時にした解消方法。
今回は、ナビゲーションメニューの所で、文字hoverした時に文字の下に下線が出る設定をした。文字hoverした時に下線が出るようにはなったが、hoverしたら上下にふくれるような動きになる。今回の下記のサンプルの場合は、navの文字がhov...
HTML CSS 【サンプルコードあり】HTML・CSSでコーディングしてて、意図しないマージンと要素の重なり（おかしな重なり）等があった場合の修正
今回、コーディング時に下記のように変な状態になってたんで、その原因と、今回どうやって修正したか記事にしました。もし同じような状況になって場合は参考にしてみてください。改善前の状態改善後の状態今回の不具合の原因このセクションを囲ってる中に、M...
HTML CSS 【サンプルコードあり】画像に重ねる文字等の上下左右の中央揃えの時に注意する事
今回は、画像に文字等重ねて、中央に配置したい場合のやり方、positionを使うと簡単にできます。その時の注意点、実際に私が失敗したので改善前と改善後の方法を書いてみました。コードを書く時には、レスポンシブの事も考えて出来るだけ、まとまりで...
HTML CSS カーゾルを合わせると、矢印が横に伸びるボタンの作成方法
カーゾルを合わせると、矢印が横に伸びるボタンの作成方法今回は、カーゾルを合わせると、矢印が横に伸びるボタンをはじめて作る際に、どうやって形にしていったかを記事にしてみました。コーディングにしてもプログラミングにしても、実際に自分が表現したい...
HTML CSS 意図しない所がクリック出来る、a要素のリンクがヘンな場所にある場合、なくすには小さくしたり、反映範囲の指定でＯＫ 【サンプルコードあり】
a要素のリンクがヘンな場所にある場合、なくすには小さくしたり、反映範囲の指定でＯＫHTML/CSSでコーディングしてる時。画像にリンクをつけた時、意図しない変なところがリンクできる状態になってませんか？これ、よくあります。画像の外にリンクが...