CSS CSSのposition:stickyを使ったスクロール特定範囲の固定方法
サイドバーやコンテンツで一定範囲、スクロールに追随する要素の作り方のご紹介です。まずは、デモで動きを確認してみよう。DEMO12345678910HTML<div class="demo1"> <div class="demo1_conte...
CSS
CSS 
CSS CSSで高さの違う横並び要素を上揃えで配置する方法
「display:inline-block」を使って横並びにした要素の高さが違うと、思った配置にならない時が結構ある。そんな時に使うCSSのご紹介です。高さの違うコンテンツに下の「vertical-align」を指定すれば上揃えや下揃えや中...
CSS 背景（background）を２つ以上設置するCSSの書き方
CSSでレイアウトしていて上下に画像を配置する時、HTMLにIMGタグで配置するかCSSで「background」を使用するか迷うところ。デザインがコンテンツぎっしりの場合、HTMLにIMGタグで書くとぐちゃぐちゃになっちゃうから、そんな時...
CSS 【CSS】テキストを左揃え、右揃え、中央揃え
テキストの中央揃え、右揃え、左揃えはページを作っていると必ず出てくる指定の一つ。それらの指定プラス、行が多くなった時に綺麗に見える指定方法をDEMOと一緒に見ていきましょう。中央揃え初めての真ん中ブログCSS p { text-align:...
CSS 【CSS】画像を隙間無く横並びにするいくつかの方法
画像を横並びにする時なぜか空く隙間。その隙間を埋めてレイアウトする方法をいくつか紹介します。CSSでのレイアウトで利用しやすいものをご利用ください。【inline-block】で横並び要素を横並びにする時よく使うのが「display:inl...
CSS 【CSS】テキストの縦書き！
「和」を感じさせるサイトや、「西尾 維新」のサイトのように原稿をテーマにしたサイトを作る時、必ず必要になるHTMLでの文章の縦書き方法を解説。文章の縦書き全ブラウザがこのタグに対応しているが、IE11だけにはベンダープレフィックスを付ける必...
CSS CSSはどこに書くのが最適なのか
CSSの書くところは大きく分けて３つある。インラインで書くHTMLファイルに直接記述する。インラインで書く場合、なるべく「head」内にスタイルを記述。「head」内に書かなくてもスタイリングできるけど、コードが読み辛くなるのでなるべくね。...
CSS ニューモフィズム・ジェネレーター
2020年3月現在。最近流行っているニューモフィズムのジェネレーターがあると聞き使ってみたくなった。そもそもニューモフィズムってな～に？ニューモーフィズムは、一昔前に流行った「スキューモーフィズム」のリアルな質感と、フラットやマテリアルデザ...
CSS ドラッグで変化するカーソルの作り方｜CSS
Swiper.jsなんかを使う時、ドラッグして横にスライドできるけど矢印のままじゃユーザーに分かりずらいから、ちゃんとスライドできる範囲は「パー」にしてドラッグしたら「グー」にするCSS。【DEMO】お分かりいただけただろうか？エリアに入る...
CSS CSS｜iOS safariで滑らかスクロール
iOSで厄介な挙動をするCSSの「overflow:scroll;」でいつも通りの慣性スクロールを実現。-webkit-overflow-scrolling: touch;
CSS CSSの「position relative」の役割
「position:relative;」って何のためにあるの？その疑問を解決します。「position」とはそのままポジション（位置）を整えるプロパティ。次に、どの様にポジションを整えるかというと「relative（相対的）」？「relat...
CSS CSSで背景に色を設定する方法
背景の色は、基本どこも白が多いけれど、特設サイトやブランドカラーがある場合背景にカラーを適応すると、サイトの印象がガラッと変わります。今回は、印象的なサイトを作るための背景色変更方法を解説します。まずは背景に色を追加してみよう！背景に色を追...
CSS CSSやSass、SCSSでコメントアウト（テキスト非表示）方法
CSSを書いててスペースで区切るだけでは、分かりにくいことがあったりします。そんな時便利なのが、コメントアウト。このスタイルは、ヘッダー要素のだよ！とか、共通部分をまとめる時にここから～ここまで。みたいに使い方は色々なコメントアウトの記述方...
CSS 要素が消えた！？CSSで即、解決するいくつかの方法
コーディングをしてると、CSSで指定しているはずの要素がどこかへ居なくなってしまうことがあります。そんな時の解決方法をご紹介します。要素の重なりを疑う背景全体にカラーを敷いてたり、画像を敷いてたり要素を重ねてたりすると、起こる現象。こんな時...
CSS 【jQuery・CSS】画像保存禁止方法まとめ
スマホ、PCの画像保存を禁止する方法まとめ。結果から言うと、スマホのスクショで保存を止めることはできませんでした。まずは、PCの画像保存禁止から【PC】右クリックを禁止するjQuery jQueryで右クリックを禁止する【画像保存禁止方法】...
