今回は文章の背景に画像を入れたい場合について。 下記写真のように文章の背景に画像を入れたいことがよくある。 HTMLにimgタグで画像を挿入すれば、文章を左右どちらかに回り込ませることは出来る。 しかし、それでは文章の背景には写真を入れることが出来ないのだ。 ではどうすればいいかというと、背景に写真を組み込みたい場合は...
新着記事
箇条書きリスト（ulタグ）は通常は縦に並ぶ。 箇条書きを超シンプルなコードで書くと下記のようになる <ul> <li>さる</li> <li>とり</li> <li>いぬ</li> </ul> 表示結果↓ さる とり いぬ ...
クリックすると別のページに飛ぶリンクテキストには大抵デフォルトで下線が入っている。 例えば↓の感じで。 こんな感じで下線が入る ただ、その下線が邪魔だから消したい時が結構ある。 そういう時に使えるのがtext-decorationプロパティだ！ 下記のようにリンクを作るaタグもしくはaタグに設定するclassやidにt...
「ここの文章、行間が狭くて読みにくいな。」 と思う時がある。 そういう時に使えるのが、行の高さを調整するline-heghtプロパティだ。 これは文字の大きさを決めるfont-sizeプロパティと合わせて設定すると行間をうまくコントロールできる。 例えば、下記のように文字のサイズが14pxの場合。 p { font-s...
CSSで「文字に影を付けたい！」という時は、text-shadowプロパティを使う。 ボックス自体に影をつけたい場合は、box-shadowプロパティを使う。 それと同じように、文字にはtext-shadowプロパティを使うのだ。 例えばHTMLのpタグの文字に影を入れるとする。 その場合の指定の仕方は下記の通りだ。 ...
floatプロパティを使って、画像の横に文章を回り込ませたはいいけど、 「画像と文章がくっついて見づらい、、、」 という時が多々ある。 そういう時はmarginを使って、画像と文章の間にすき間を空ければいいことを学んだ。 例えば、下記のように指定し、画像を左側に配置して、文章を右側に回り込ませたとする。 img { f...
CSSの記述をしていて、「画像の横に文章を回り込ませたい！」という時は多い。 そういう時はfloatプロパティを使えばいい。 単純にHTMLで下記のように記述するだけでは文章は画像の下に配置される。 <img src="sampleImage" alt="サンプル画像"> そのため、画像の横にスペースがあっ...
プログラミングを勉強しているとよく出てくる絶対パスと相対パス。 この2つが混乱しがちだったので備忘録兼ねて整理しておきたいと思う。 絶対パス なんか難しく感じるけど、要は 絶対パスはURLなど。 →たとえば、https://programmingnote.jp とか。 トップの位置から目的地までの道筋はどうか？ってのを...
CSSを勉強している時に出てくる疑似クラス。 なんてわかりにくい用語なんだろう（笑） 絶対用語の難しさが理解を妨げている気がする、、、 って文句はこれぐらいにしておいて、 「疑似クラスとはなんじゃい？」 ってことで簡単に…...
先日サイトをSSL化してhttps://～にした。 サイト自体のSSL化はさくらのレンタルサーバーだったから、かなりやりやすかった。 でも、サイトをSSL化するということはhttps://~にhttp://~から変更するということだから、 「サイトをSSL化できた！はい、おしまい！」 ということではなかった。 必要な作...