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