WEBデザイン 【コーディング備忘録】CSSで文字を斜めにする方法
最近、CSSで文字に角度をつける方法を学びました。デザインソフト上で文字を斜めにすることはあっても、コーディングでは意外と機会がなくやってこなかったんですよね。 またいつか役立つかもしれないので忘れないうちに共有しておきます！ font-s...
コーディング
WEBデザイン 
WEBデザイン 【コーディング備忘録】HTML上で文字色を指定できる「span style」
先日、コーディングをしている時に困ってしまったこと。 ひとつのキャッチコピーの中に複数の色や大きさの違う文字が使われていて、それぞれにどう指定したらいいか頭を悩ませました。なるべくスタイルシートの記述を増やさずに対処できないかなぁと模索して...
WEBデザイン 【コーディング備忘録】IE 環境でSVG画像が欠けた時の対処法
Internet ExplorerでSVGで書き出した画像がこのように欠けて表示されることはないでしょうか？ 他の環境ではちゃんと表示されているのに、IEだとなぜか欠けてしまう...。今回は、IEだとうまく表示されないSVG画像の対処法につ...
WEBデザイン 【コーディング備忘録】CSSで画像やボタンを右寄せにする方法
コーディングをしていると要素を左右上下に寄せる場面が多々ありますよね。 私の場合、そんな場面で真っ先に思い浮かぶのがtext-align：〇〇（位置指定）なんです。しかし、text-alignが通用しない場面に遭遇してあたふたすることも。（...
WEBデザイン 【コーディング備忘録】テキストリンクにカーソルを置いた時に下線を表示させるCSS
テキストにaタグを使ってリンクを設定すると、デフォルトの状態だと デザインはじめました このように、ちょっと古くさい見た目で表示されてしまいますよね。文字色が青だと、配色が整ったデザインを損なってしまう恐れがあります。 今回はそれを解消し、...
WEBデザイン 【コーディング備忘録】改行タグ＜br＞に余白を指定する方法
文章を改行する際に使用する＜br＞タグですが、文章の余白を調整するのにも便利だったりします。 今回は、長文を読みやすくするために行間や段落間の余白を空けたい時に有効な＜br＞の活用法を解説したいと思います。 See the Pen <br>...
WEBデザイン 【コーディング備忘録】○番目の要素を指定する際の「nth-child」と「nth-of-type」について学ぶ
「○番目」や「奇数・偶数」などの特定の要素にだけ変化をつけたい、そんな時に便利な疑似クラス「nth-child」と「nth-of-type」について学んでみましょう。使う機会は多いものの、忘れたりごっちゃになったり、なかなか定着しないので簡...
WEBデザイン 【コーディング備忘録】border-radiusを使って色々な丸をつくる！〜CSS〜
CSSで四角いオブジェクトを作ることはあったけど、円はどうやって作るんだろう？とふと疑問に思い調べてみました。 今後も使うことになると思うので備忘録として書き残しておこうと思います！ 正円の作り方 See the Pen border-ra...
WEBデザイン 【コーディング初心者向け講座】「!important」を使って優先度を変える方法について学ぶ！〜CSS〜
CSS上で指定したスタイルがなぜか適用されていなかったり、一部を変更したいけど既に指定したCSSが優先されてしまってどうしよう！なんてことありませんか？ こんなとき「!important」を使ったら上手くいくかもしれません！ そういうわけで...
WEBデザイン 【コーディング備忘録】固定ヘッダーによりページ内リンクの位置がズレてしまう問題を解決する〜CSS〜
本日はページ内リンクにまつわる、ちょっとしたコーディング備忘録です。 ページ内リンクを複数設定し、正常にリンクできているか確認を行っていたところ、飛んだ先の見出しに固定ヘッダーが重なっているのを発見しました。見出しからきれいに表示させるため...