プログラミング

コードを書いていて、困った時、つまづいた時に解決した方法、調べて勉強になったとこを落とし込んでいきます。

title--z-index

【CSS】擬似要素を文字とかさねてオシャレな見出しをつくろう

今回は擬似要素を使って見出しをオシャレにする方法です。 先日WEBサイトを作成していたら、「なるほど」と思った見出しがありましたので、メモとして記事にしておきます。 それではさっそく見ていきましょう。 ...

book-and-pen

【CSS】アンダーラインの引き方をご紹介 テキストがグッときわ立ちます

今回はCSSでアンダーライン(下線)の引き方をご紹介します。   さっぱりわからない人はサクッと覚えてしまいましょう。 いつも同じ方法でコーディングしている人はバリエーションを増やしましょう ...

file

相対パスの階層をしっかりおさえよう CSSや画像の読み込みエラーの原因になります

WEB制作の初学者の方でハマりすいのがファイルの階層です。 えらそうなことを言っている私もハマった1人です。   絶対パスや相対パスについてはわかっている人も多いと思うので、 そこは省略しま ...

Bootstrap grid generator

【Bootstrap】コーディングがとってもラクになる Bootstrap grid generator

今回は、Bootstrapのコーディングがめちゃくちゃラクにできるツール、 MD Bootstrap grid generator を紹介します。   Bootstrapのグリッドシステムは ...

number

【CSS】grid で並べた要素の順番を変える方法 CSSでorderを設定しよう

Web制作を勉強中のみなさん、こんにちは。 今回は、grid で並べた要素の順番を変える方法を紹介します。   gridで横並びにした要素があるとします。 その要素をスマホサイズで縦並びにす ...

【CSS】ブラウザの大きさに合わせて画像の大きさを自動調節する方法

2022/10/3  

Web制作の勉強中のみなさん、こんにちは。 今回は、画像の大きさを自動調節する方法をご紹介します。 「最適化」といった方がいいのかな。   レスポンシブデザインで画像の大きさを変えたい時があ ...

pointer

【CSS】:hoverで別要素をアクションさせる方法

今回は「:hover」で別要素をアクションさせる方法を紹介します。 私自身、CSSを学習しはじめたころ、「なるほど」と思ったのでメモ書きとして記事を書きました。 困っている方の参考になれば幸いです。 ...

grid-center

【CSS】gridで並べた要素を中央に寄せる方法

今回は grid で並べた要素を中央に寄せる方法を紹介します。 親要素のなかに、複数の子要素をgridで並べたとき、 「中央に寄せたい」って思うときありますよね。 でも、どうやるの? と思った方に紹介 ...

fonts

【CSS】Google Fonts の使い方をご紹介 Web制作には欠かせません

今回は、Google Fonts の使い方を紹介します。 それほど難しくありませんが、私が初めて使用した時、少しわかりづらかったので、 初心者さん向けに手順を紹介していきます。   Goog ...

title-image-svg

SVG画像が表示されない! を解決します

SVG画像って、みなさんもけっこう使うと思います。 画質が落ちないということもあり、私もけっこう使います。 無料でSVG画像をダウンロードできるサイトがありますし、PhotoshopでSVGとして画像 ...

© 2023 サカらいふ Powered by AFFINGER5