CSS CSSで太字～細字の調整方法
なんとな～くだけど、タイトルは見やすく「太字」。テキストは読みやすく「細字」。 みたいにある日本語のウェブサイトの文字ルール。そんなルールも扱えなくちゃ従えないじゃない。 基本を押さえるために、学習は大事。 文字の太さの変更は「font-w...
CSSについての記事一覧
CSS 
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...
CSS 【CSS】画像を隙間無く横並びにするいくつかの方法
画像を横並びにする時なぜか空く隙間。 その隙間を埋めてレイアウトする方法をいくつか紹介します。 CSSでのレイアウトで利用しやすいものをご利用ください。 【inline-block】で横並び 要素を横並びにする時よく使うのが「display...
CSS 【CSS】テキストの縦書き！
「和」を感じさせるサイトや、「西尾 維新」のサイトのように原稿をテーマにしたサイトを作る時、必ず必要になるHTMLでの文章の縦書き方法を解説。 文章の縦書き 全ブラウザがこのタグに対応しているが、IE11だけにはベンダープレフィックスを付け...
CSS CSSはどこに書くのが最適なのか
CSSの書くところは大きく分けて３つある。 インラインで書く HTMLファイルに直接記述する。 インラインで書く場合、なるべく「head」内にスタイルを記述。 「head」内に書かなくてもスタイリングできるけど、コードが読み辛くなるのでなる...
CSS ニューモフィズム・ジェネレーター
2020年3月現在。最近流行っているニューモフィズムのジェネレーターがあると聞き使ってみたくなった。 そもそもニューモフィズムってな～に？ ニューモーフィズムは、一昔前に流行った「スキューモーフィズム」のリアルな質感と、フラットやマテリアル...
