CSS CSS内で外部CSSを読み込む方法
リセットCSSなどの絶対必要だけど忘れがちなCSSファイルは、CSSでサクッとインポートしちゃいましょう！書き方は以下の通りです。 CSS @import url("reset.css"); 外部CSSのインポートは複数書いても問題ありませ...
CSSについての記事一覧
CSS 
CSS CSSでダークモードに即対応。OSの画面設定をウェブでも利用しよう！
海外のサイトとか見てると、自分のiphoneの設定をダークモードにしてる時、勝手に暗いデザインで表示されてるのを見てどうやってやってるのか疑問だった。 きっとjsでデバイス情報を取得して、なにかしてるんだろうと思ったけど違った。 CSSだけ...
CSS 修正したCSSが反映されない！？強制的にキャッシュを再読み込みさせる方法
ページデザインが完成してレスポンシブもばっちりと思って、提出すると「変わってないですが。。。」と言われてしまう。 キャッシュをクリアして再読み込みすればいいから「shift」を押して更新すれば良いじゃん！と思っちゃうけど、お客さんにひと手間...
CSS 【CSS】テキストを選択した時の背景や文字色を変更する方法
カーソルで文字を選択した時、なにも指定しないと青い背景で白文字になるけど、サイトのカラーに合わないなぁと思ったら変えよう！ ページ全体を同じ感じにするときは、CSSで「::selection」の中に選択した時のスタイルを記述します。 // ...
CSS CSSで太字～細字の調整方法
なんとな～くだけど、タイトルは見やすく「太字」。テキストは読みやすく「細字」。 みたいにある日本語のウェブサイトの文字ルール。そんなルールも扱えなくちゃ従えないじゃない。 基本を押さえるために、学習は大事。 文字の太さの変更は「font-w...
CSS CSSで角丸四角の作り方
ボダンや画像など、やんわりと表現したいときや、流行りのデザインっぽさを取り入れたいときに使うのがCSSのborder-radius。 border-radiusには2つの書き方があり「border-radius: 10px;（全部の角を10...
CSS 【CSS】iPhoneでsubmitボタンのスタイルをリセットする方法
作ったサイトをPCのchromeデベロッパー機能で確認して即、OK！即、提出した後、ウェブ担当者から 「送信ボタンがiPhoneで見ると変なんですけど…。」って確認不足で脇汗出ちゃうやつ。 iPhoneで見てみると角丸のグラデーションボタ...
CSS placeholder(プレースホルダー)の文字色を変える方法
Placeholder(プレースホルダー)の色を変える方法のご紹介です。 IEと古いEDGEに対応しています。 今のままだと文字色がピンクになっちゃうから、サイトに合う色に変えてね！ input::placeholder { color: ...
CSS IEでセレクトボックスの矢印を消す方法
CSSでセレクトボックスのスタイルを作っていると、chromeやfirefox、EDGEは大丈夫なんだけれど 「IE」がやっぱりダメなんだよなぁ。 サポートは終わったけど、やっぱり対応しておかないとね。 全部同じ条件にした方がデザインしやす...
CSS ホバーした時にCSSだけで出来る様々な画像切り替え方法
CSSだけでホバーした時に、様々な画像切り替え方法のご紹介。 色んなパターンの画像切り替えサンプルを用意しますので、まずは基本のHTMLを。 このHTMLを書いて2枚画像を用意して、目的のCSSをコピペすれば同じ動きになります。 沢山サンプ...
CSS width 100%なのに、なぜはみ出た！？を解決する方法｜CSS
幅を指定したのにはみ出ちゃう時「width」を98%とかに指定して何とかはみ出さないようにと考えちゃうけど、それは間違っている。ちゃんと「width:100%」でpaddingやborderを含んでいてもはみ出さない方法をご紹介します。
CSS CSSのposition:stickyを使ったスクロール特定範囲の固定方法
サイドバーやコンテンツで一定範囲、スクロールに追随する要素の作り方のご紹介です。 まずは、デモで動きを確認してみよう。 DEMO 1 2 3 4 5 6 7 8 9 10 HTML <div class="demo1"> <div clas...
CSS CSSで高さの違う横並び要素を上揃えで配置する方法
「display:inline-block」を使って横並びにした要素の高さが違うと、思った配置にならない時が結構ある。 そんな時に使うCSSのご紹介です。 高さの違うコンテンツに下の「vertical-align」を指定すれば上揃えや下揃え...
CSS 背景（background）を２つ以上設置するCSSの書き方
CSSでレイアウトしていて上下に画像を配置する時、HTMLにIMGタグで配置するかCSSで「background」を使用するか迷うところ。 デザインがコンテンツぎっしりの場合、HTMLにIMGタグで書くとぐちゃぐちゃになっちゃうから、そんな...
CSS 【CSS】テキストを左揃え、右揃え、中央揃え
テキストの中央揃え、右揃え、左揃えはページを作っていると必ず出てくる指定の一つ。 それらの指定プラス、行が多くなった時に綺麗に見える指定方法をDEMOと一緒に見ていきましょう。 中央揃え 初めての真ん中ブログ CSS p { text-al...
