CSS 【CSS】文字の間隔を調整するにはletter-spacingを使う 2020年11月12日 「文字の間隔を狭めたい!」 という時に有効なのが、letter-spacingプロパティだ。 単語の意味としては letter=文字 spacing=間隔 なので、letter-spacing=文字の間隔を調整するプロパティと覚えておくと良いと思う。 通常は使うことは少ないかもしれないけど、カタカナの文字を見出しに使う...
JavaScript 【JavaScript】1+2+3+,,,の和とかで使うsum+=i ってどんな意味?? 2019年10月16日 JavaScriptで、1+2+3+4,,,で50まで足した時の和と求めたりするときによく使うのが sum+=i だ。 下はsum=1+2+3+4+,,の合計が50以下になるまで繰り返す式だ。 …...
CSS 【CSS】背景画像のサイズ(大きさ)を変えたいならbackground-sizeを使う! 2019年10月7日 今回は背景画像のサイズを変えたい場合について! CSSで背景画像を設定したけど、↓みたいにそのサイズが 「大きすぎる!写真が全部入ってないじゃん。」 ってことがよくあると思う。 「この画像の大きさを変えたい!」 って時に…...
CSS 【CSS】変更が反映されない時のための初心者用チェックリスト(初心者編) 2019年10月5日 初心者にとって、 「あれ?CSSが反映されない、、、なぜだ?」 という時はめちゃくちゃある。 大体は凡ミスなことが多いのだが、慣れていないとなかなかその凡ミスに気づけないのだ。 そのため、CSSが反映されない時のためのチェックリストを備忘録のために記録しておきたい。...
CSS 【CSS】背景画像の位置を変えたい場合はbackground-positionを使う! 2019年10月3日 background-imageで設定した背景画像の位置を変えたい場合は多々ある。 たとえば↓のような場合 この空の写真をど真ん中に持っていきたい! そういう時に使えるのが background-position だ。 今回はわかりやすいようにbody自体に背景画像を設定してみた。 →通常はclassで設定するとは思う...
CSS 【CSS】背景画像の繰り返しを止めるにはbackground-repeat : no-repeat を使う! 2019年9月30日 今回は背景画像の繰り返しを止める方法について 背景に画像とかイラストを設定したい時がある。 設置方法はbackground-imageプロパティを使うのだが、それだけだと↓のようになってしまうことがよくある。 CSS body{ background-image: url(images/test.jpg); backg...
CSS 【CSS】箇条書きの先頭記号を四角にするにはlist-style-type:squareを使う! 2019年9月25日 箇条書きの先頭は基本は いぬ ねこ たぬき ↑こんな感じで黒丸になる。 その先頭の黒丸を四角に変えたい場合は、list-style-typeプロパティでsquareを指定すれば一発だ。 list-style-typeプロパティというのは、箇条書きリストの先頭の記号を変えるプロパティ。 初心者にとってCSSのプロパティは...
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...