CSS 【CSS】文字に影をつけるには、text-shadowプロパティを使う! 2018年11月27日 CSSで 「文字に影を付けたい!」 って時は、text-shadowプロパティを使う。 ボックス自体に影をつけたい場合は、box-shadowプロパティを使うよね? それと同じ感じで文字にはtext-shadowプロパティを使うのだ。 例えばHTMLのpタグの文字に影を入れるとする。 その場合、 【CSS】 p{ te...
CSS 【CSS】floatプロパティで回り込ませた文章と画像の間に間隔を空けるにはmarginを使う! 2018年11月26日 floatプロパティを使って、画像の横に文章を回り込ませたはいいけど、 「画像と文章がくっついて見づらいわ!」 っていう時が多々あるよね。 そういう時はmarginを使って、画像と文章の間にすき間を空ければいいことを学んだ。 例えば、 【CSS】 img { float:left; } として画像を左側に配置して、文章...
CSS 【CSS】画像の横に文章を回り込ませるにはfloatプロパティを使う 2018年11月26日 CSSの記述をしていて、「画像の横に文章を回り込ませたい!」って時は多い。 そういう時はfloatプロパティを使えばいい。 HTMLで <img src="~" alt="写真"> と記述するだけでは文章は画像の下に配置されるから、画像の横にスペースがあっても、回り込めない。 それを回り込ませるためには、f...
HTML 【HTML】絶対パスと相対パスって何が違うの? 2018年11月23日 プログラミングの勉強をしていると、絶対パスと相対パスっていう言葉が出てくる。 絶対パス なんか難しく感じるけど、要は 絶対パスはURLなど。 →たとえば、https://programmingnote.jp とか。 トップの位置から目的地までの道筋はどうか?ってのを伝える。 自分がどこにいようが、トップの位置は変わらな...
CSS 【CSS】classやidのセレクタ名を付ける時に注意すべきことって何? 2018年11月23日 HTMLの一部のデザインを変更したい時によく使う class="~"や id=”~”。 CSSの記述の時は .~{}のやつね。 その~(これ、セレクタって名前ね)の名前を付ける時は注意すべきことがある。 使えるものが制限されているからだ。 セレクタ名(class="~"の~の部分のことね)で使えるのは 半角アルファベッ...
CSS 【CSS】疑似クラスって一体なんだ? 2018年11月19日 CSSを勉強している時に出てくる疑似クラス。 なんてわかりにくい用語なんだろう(笑) 絶対用語の難しさが理解を妨げている気がする、、、 って文句はこれぐらいにしておいて、 「疑似クラスとはなんじゃい?」 ってことで簡単に…...
Google Search Console サイトをSSL化(https化)した後にやるべきことを整理する 2018年11月19日 先日サイトをSSL化してhttps://~にした。 サイト自体のSSL化はさくらのレンタルサーバーだったから、かなりやりやすかった。 でも、サイトをSSL化するということはhttps://~にhttp://~から変更するということだから、 「サイトをSSL化できた!はーい、おしまい!」 ってことではなかった。 必要な作...
WordPress ワードプレスのサイトをSSL化して、Google Chromeの「保護されていない通信」を解消する(さくらのレンタルサーバー) 2018年11月15日 最近Google ChromeでURLのところに保護されていない通信と出るようになって、自分のサイトのURLがhttp://~とで、SSL化(https://~)されていないことに気付いた。 どうやらSSL化されていないhttp://のサイトに対して、保護されていない通信、と表示してChromeが「安全上少し危険です」...
CSS 【CSS】セレクタの種類ごとの優先順位は? 2018年11月12日 CSSでよく使う、IDセレクタ、classセレクタ、要素型セレクタ(タイプセレクタ)には優先順位がある。 IDセレクタ>classセレクタ>要素型セレクタ、の順だ。 ちなみに要素型セレクタというのは、HTMLのタグを指定するセレクタのことね。 例えば、h2{ color : red;}って感じのやつ。 この優先順位をし...
CSS 【CSS】classセレクタとIDセレクタの記述方法とは? 2018年11月5日 CSSのセレクタの基本はHTMLタグ(h2とかpタグとか)だけど、同じタグのデザインが全て同じだと困る。 ということでオリジナルのセレクタがCSSには用意されていて、それが classセレクタ IDセレクタ の2つだ。 classセレクタ classセレクタは、 <div class="skill">~~&...