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化できた!はい、おしまい!」 ということではなかった。 必要な作...
その他 ワードプレスのサイトをSSL化して、Google Chromeの「保護されていない通信」を解消する(さくらのレンタルサーバー) 2018年11月15日 最近Google ChromeでURLのところに保護されていない通信と出るようになって、自分のサイトのURLがhttp://~と表示され、SSL化(https://~)されていないことに気付いた。 どうやらSSL化されていないhttp://のサイトに対して、保護されていない通信、と表示してChromeが「安全上少し危険...
CSS 【CSS】classセレクタとIDセレクタの違いとは? 2018年11月5日 今回はclassセレクタとIDセレクタの違いについて。 classセレクタ classセレクタはHTMLコードにおいて、下記のように指定されているものだ。 <div class="skill">~</div>。 classセレクタの記述方法はHTMLではクラス名を指定。 【HTML】 <d...
その他 【WordPress】過去記事と似たような記事を書くならDuplicate Postプラグインで記事を複製してから始めよう! 2018年10月25日 過去の記事と似たような構造で内容を変えた記事を書きたいって場合がよくある。 そんな時に便利なのが、Duplicate Postプラグインだ。 過去記事を参考に内容を修正するのはプログラミング小僧がブログでよく使うので、備忘録!...