background-imageで設定した背景画像の位置を変えたい場合は多々ある。 たとえば↓のような場合 この空の写真をど真ん中に持っていきたい！ そういう時に使えるのが background-positionだ。 背景画像の位置を変えるのだから、 なんでbackground-image-positionの方が正確な...
CSS
CSSの記事一覧
今回は背景画像の繰り返しを止める方法について 背景に画像とかイラストを設定したい時がある。 設置方法はbackground-imageプロパティを使うのだが、それだけだと↓のようになってしまうことがよくある。 CSS body{ background-image: url(images/test.jpg); backg...
箇条書きの先頭は基本は いぬ ねこ たぬき ↑こんな感じで黒丸になる。 その先頭の黒丸を四角に変えたい場合は、 CSSでlist-style-typeプロパティでsquareを指定すれば一発だ。 list-style-typeプロパティというのは、箇条書きリストの先頭の記号を変えるプロパティ。 初心者にとってCSSのプ...
今回は文章の背景に画像を入れたい場合について。 下記写真のように文章の背景に画像を入れたいことがよくある。 HTMLにimgタグで画像を挿入すれば、文章を左右どちらかに回り込ませることは出来る。 だけど、文章の背景には写真を入れることが出来ないのだ。 ではどうすればいいかというと、背景に写真を組み込みたい場合は、CSS...
箇条書きリスト（ulタグ）は通常は縦に並ぶ。 箇条書きを超シンプルなコードで書くと下記のようになる <ul> <li>さる</li> <li>とり</li> <li>いぬ</li> </ul> 表示結果↓ さる とり いぬ ...
クリックすると別のページに飛ぶリンクテキストには大抵デフォルトで下線が入っている。 例えば↓の感じで。 こんな感じで下線が入る ただ、その下線が邪魔だから消したい時が結構ある。 そういう時に使えるのがtext-decorationプロパティだ！ 下記のようにリンクを作るaタグもしくはaタグに設定するclassやidにt...
「ここの文章、行間が狭くて読みにくいな。」 って思う時がある。 そういう時に使えるのが、行の高さを調整するline-heghtプロパティだ。 これは文字の大きさを決めるfont-sizeプロパティと合わせて設定すると行間をうまくコントロールできる。 例えば、 p { font-size:14px } の場合→つまり、文...
CSSで 「文字に影を付けたい！」 って時は、text-shadowプロパティを使う。 ボックス自体に影をつけたい場合は、box-shadowプロパティを使うよね？ それと同じ感じで文字にはtext-shadowプロパティを使うのだ。 例えばHTMLのpタグの文字に影を入れるとする。 その場合、 【CSS】 p{ te...
floatプロパティを使って、画像の横に文章を回り込ませたはいいけど、 「画像と文章がくっついて見づらいわ！」 っていう時が多々あるよね。 そういう時はmarginを使って、画像と文章の間にすき間を空ければいいことを学んだ。 例えば、 【CSS】 img { float:left; } として画像を左側に配置して、文章...
CSSの記述をしていて、「画像の横に文章を回り込ませたい！」って時は多い。 そういう時はfloatプロパティを使えばいい。 HTMLで <img src="~" alt="写真"> と記述するだけでは文章は画像の下に配置されるから、画像の横にスペースがあっても、回り込めない。 それを回り込ませるためには、f...