CSS ニューモフィズム・ジェネレーター
2020年3月現在。最近流行っているニューモフィズムのジェネレーターがあると聞き使ってみたくなった。 そもそもニューモフィズムってな～に？ ニューモーフィズムは、一昔前に流行った「スキューモーフィズム」のリアルな質感と、フラットやマテリアル...
CSSについての記事一覧
CSS 
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...
CSS 画像を丸く切り抜く方法｜CSS
TwitterやInstagramのプロフィール画像でよく見る丸く切り抜かれた画像を実装するCSSのご紹介です。 やりかたは2種類あり、自分は2つ目が好みでよく使用しています。 １つめは、下記のみたいにHTMLでimgタグで画像を表示し周り...
CSS ページ幅をこれ以上広げないCSS
パソコンでウェブを見ると、中心にコンテンツが表示されるのが一般的です。 CSSでこれを表現するには、下記の記述をコンテンツの最も外のDivに付ければOK。 【CSS】 .contents { width: 100%; max-width: ...
CSS 【CSS】文章（テキスト）の改行を禁止する方法
テキストの扱いって時に、厄介な時があるよね。これ以上文字入れたらレイアウト崩れちゃうとか、タイトルが長すぎて本来のデザインと違った感じになっちゃったり。それをCSSでスッと解決するテキストを改行させないCSSテクニックを紹介します。
