CSS 【CSS】画像を隙間無く横並びにするいくつかの方法
画像を横並びにする時なぜか空く隙間。 その隙間を埋めてレイアウトする方法をいくつか紹介します。 CSSでのレイアウトで利用しやすいものをご利用ください。 【inline-block】で横並び 要素を横並びにする時よく使うのが「display...
CSSについての記事一覧
CSS 
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（相対的）」？ 「...
CSS CSSで背景に色を設定する方法
背景の色は、基本どこも白が多いけれど、特設サイトやブランドカラーがある場合 背景にカラーを適応すると、サイトの印象がガラッと変わります。 今回は、印象的なサイトを作るための背景色変更方法を解説します。 まずは背景に色を追加してみよう！ 背景...
CSS CSSやSass、SCSSでコメントアウト（テキスト非表示）方法
CSSを書いててスペースで区切るだけでは、分かりにくいことがあったりします。 そんな時便利なのが、コメントアウト。 このスタイルは、ヘッダー要素のだよ！とか、共通部分をまとめる時にここから～ここまで。 みたいに使い方は色々なコメントアウトの...
CSS 要素が消えた！？CSSで即、解決するいくつかの方法
コーディングをしてると、CSSで指定しているはずの要素がどこかへ居なくなってしまうことがあります。 そんな時の解決方法をご紹介します。 要素の重なりを疑う 背景全体にカラーを敷いてたり、画像を敷いてたり要素を重ねてたりすると、起こる現象。 ...
CSS 【jQuery・CSS】画像保存禁止方法まとめ
スマホ、PCの画像保存を禁止する方法まとめ。 結果から言うと、スマホのスクショで保存を止めることはできませんでした。 まずは、PCの画像保存禁止から 【PC】右クリックを禁止するjQuery jQueryで右クリックを禁止する【画像保存禁止...
CSS PC・スマホで画像保存させない方法【画像保存禁止】
jQueryで画像をDivで囲う CSSとjQueryで画像の手前に透明な要素を追加して、画像を保存しようとしても画像に触れなくする方法。 まずは、jQueryで画像（imgタグ）を検知し、その画像をDivで囲います。 この時、CSSでスタ...
CSS CSSでスマホの長押し禁止【画像保存禁止方法】
CSSだけでスマホの長押し画像保存を禁止する方法をご紹介します。 PCでは少しだけダウンロードされにくくなるだけなので、スマホだけ有効にすべきです。 （右クリックで画像をダウンロードすると、画像が保存されるのではなくページで利用されているソ...
CSS CSSのtransitionについて深く知る
普段使っている「transition」を、自分はあやふやにまとめて定義していました。 自分がそうなら、きっとみんなもそうだろうと思い改めて詳しく勉強したいと思います。 transitionとは？ transitionとは、Google翻訳す...
CSS 三角形の作り方｜CSS
CSSで上向き、下向き、右、左向きの三角形の作り方のご紹介です。 三角形を作るうえで必要になってくるプロパティが「border」だ。 これが、またよくわからない原理で三角形が作られているのでその辺りも解説していこうと思います。 border...
