「ここの文章、行間が狭くて読みにくいな。」 と思う時がある。 そういう時に使えるのが、行の高さを調整するline-heghtプロパティだ。 これは文字の大きさを決めるfont-sizeプロパティと合わせて設定すると行間をうまくコントロールできる。 例えば、下記のように文字のサイズが14pxの場合。 p { font-s...
Programing Youngster
Programing Youngsterの記事一覧
CSSで「文字に影を付けたい！」という時は、text-shadowプロパティを使う。 ボックス自体に影をつけたい場合は、box-shadowプロパティを使う。 それと同じように、文字にはtext-shadowプロパティを使うのだ。 例えばHTMLのpタグの文字に影を入れるとする。 その場合の指定の仕方は下記の通りだ。 ...
floatプロパティを使って、画像の横に文章を回り込ませたはいいけど、 「画像と文章がくっついて見づらい、、、」 という時が多々ある。 そういう時はmarginを使って、画像と文章の間にすき間を空ければいいことを学んだ。 例えば、下記のように指定し、画像を左側に配置して、文章を右側に回り込ませたとする。 img { f...
CSSの記述をしていて、「画像の横に文章を回り込ませたい！」という時は多い。 そういう時はfloatプロパティを使えばいい。 単純にHTMLで下記のように記述するだけでは文章は画像の下に配置される。 <img src="sampleImage" alt="サンプル画像"> そのため、画像の横にスペースがあっ...
プログラミングを勉強しているとよく出てくる絶対パスと相対パス。 この2つが混乱しがちだったので備忘録兼ねて整理しておきたいと思う。 絶対パス なんか難しく感じるけど、要は 絶対パスはURLなど。 →たとえば、https://programmingnote.jp とか。 トップの位置から目的地までの道筋はどうか？ってのを...
CSSを勉強している時に出てくる疑似クラス。 なんてわかりにくい用語なんだろう（笑） 絶対用語の難しさが理解を妨げている気がする、、、 って文句はこれぐらいにしておいて、 「疑似クラスとはなんじゃい？」 ってことで簡単に…...
先日サイトをSSL化してhttps://～にした。 サイト自体のSSL化はさくらのレンタルサーバーだったから、かなりやりやすかった。 でも、サイトをSSL化するということはhttps://~にhttp://~から変更するということだから、 「サイトをSSL化できた！はい、おしまい！」 ということではなかった。 必要な作...
最近Google ChromeでURLのところに保護されていない通信と出るようになって、自分のサイトのURLがhttp://～と表示され、SSL化（https://～）されていないことに気付いた。 どうやらSSL化されていないhttp://のサイトに対して、保護されていない通信、と表示してChromeが「安全上少し危険...
今回はclassセレクタとIDセレクタの違いについて。 classセレクタ classセレクタはHTMLコードにおいて、下記のように指定されているものだ。 <div class="skill">~</div>。 classセレクタの記述方法はHTMLではクラス名を指定。 【HTML】 <d...
過去の記事と似たような構造で内容を変えた記事を書きたいって場合がよくある。 そんな時に便利なのが、Duplicate Postプラグインだ。 過去記事を参考に内容を修正するのはプログラミング小僧がブログでよく使うので、備忘録！...