CSSでよく出てくる「margin」と「padding」。 プログラミング勉強をし始めの時に 「marginとpaddingって何が違うの？？」 とずっと疑問に思っていた。 marginは外側の余白 marginは外側の余白のことだ。 繰り返しになるが、私は最初の頃は本当にmarginとpaddingの区別が全然つかな...

name="viewport" content="width=device-width, initial-scale=1"とは？ レスポンシブのサイトのコードを見るとheadタグ内に <meta name="viewport" content="width=device-width, initial-scale=...

「文字の間隔を狭めたい！」 という時に有効なのが、letter-spacingプロパティだ。 単語の意味としては letter＝文字 spacing＝間隔 なので、letter-spacing＝文字の間隔を調整するプロパティと覚えておくと良いと思う。 通常は使うことは少ないかもしれないけど、カタカナの文字を見出しに使う...

JavaScriptで、1+2+3＋4,,,で50まで足した時の和と求めたりするときによく使うのが sum+=i　だ。 下はsum=1+2+3+4+,,の合計が50以下になるまで繰り返す式だ。 …...

今回は背景画像のサイズを変えたい場合について！ CSSで背景画像を設定したけど、↓みたいにそのサイズが 「大きすぎる！写真が全部入ってないじゃん。」 ってことがよくあると思う。 「この画像の大きさを変えたい！」 って時に…...

プログラミング小僧のような初心者にとって、 「あれ？CSSが反映されない、、、なぜだ？」 という時がめちゃくちゃある。 たいていは凡ミスなことが多いのだが、情けないのだがなかなかその凡ミスに気づけないのだ。 そのため、C…...

background-imageで設定した背景画像の位置を変えたい場合は多々ある。 たとえば↓のような場合 この空の写真をど真ん中に持っていきたい！ そういう時に使えるのが background-position だ。 今回はわかりやすいようにbody自体に背景画像を設定してみた。 →通常はclassで設定するとは思う...

今回は背景画像の繰り返しを止める方法について 背景に画像とかイラストを設定したい時がある。 設置方法はbackground-imageプロパティを使うのだが、それだけだと↓のようになってしまうことがよくある。 CSS body{ background-image: url(images/test.jpg); backg...

箇条書きの先頭は基本は いぬ ねこ たぬき ↑こんな感じで黒丸になる。 その先頭の黒丸を四角に変えたい場合は、list-style-typeプロパティでsquareを指定すれば一発だ。 list-style-typeプロパティというのは、箇条書きリストの先頭の記号を変えるプロパティ。 初心者にとってCSSのプロパティは...

今回は文章の背景に画像を入れたい場合について。 下記写真のように文章の背景に画像を入れたいことがよくある。 HTMLにimgタグで画像を挿入すれば、文章を左右どちらかに回り込ませることは出来る。 しかし、それでは文章の背景には写真を入れることが出来ないのだ。 ではどうすればいいかというと、背景に写真を組み込みたい場合は...