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)を2つ以上設置するCSSの書き方

CSSでレイアウトしていて上下に画像を配置する時、HTMLにIMGタグで配置するかCSSで「background」を使用するか迷うところ。 デザインがコンテンツぎっしりの場合、HTMLにIMGタグで書くとぐちゃぐちゃになっちゃうから、そんな...
CSS

【CSS】テキストを左揃え、右揃え、中央揃え

テキストの中央揃え、右揃え、左揃えはページを作っていると必ず出てくる指定の一つ。 それらの指定プラス、行が多くなった時に綺麗に見える指定方法をDEMOと一緒に見ていきましょう。 中央揃え 初めての真ん中ブログ CSS p { text-al...
CSS

【CSS】画像を隙間無く横並びにするいくつかの方法

画像を横並びにする時なぜか空く隙間。 その隙間を埋めてレイアウトする方法をいくつか紹介します。 CSSでのレイアウトで利用しやすいものをご利用ください。 【inline-block】で横並び 要素を横並びにする時よく使うのが「display...
CSS

【CSS】テキストの縦書き!

「和」を感じさせるサイトや、「西尾 維新」のサイトのように原稿をテーマにしたサイトを作る時、必ず必要になるHTMLでの文章の縦書き方法を解説。 文章の縦書き 全ブラウザがこのタグに対応しているが、IE11だけにはベンダープレフィックスを付け...
広告