CSS CSSの「position relative」の役割
「position:relative;」って何のためにあるの？その疑問を解決します。「position」とはそのままポジション（位置）を整えるプロパティ。次に、どの様にポジションを整えるかというと「relative（相対的）」？「relat...
CSS
CSS 
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: 80...
CSS 【CSS】文章（テキスト）の改行を禁止する方法
テキストの扱いって時に、厄介な時があるよね。これ以上文字入れたらレイアウト崩れちゃうとか、タイトルが長すぎて本来のデザインと違った感じになっちゃったり。それをCSSでスッと解決するテキストを改行させないCSSテクニックを紹介します。
CSS CSSだけで出来るボタンのホバーエフェクト集
javascriptは使わずにCSSとHTMLだけで装飾できるボタンのホバーエフェクトをご紹介します。コピペですぐ実装できるので、このページをブックマークしておくと便利です。薄くなるボタンボタン01HTML<div class="btn01...
CSS ホバーで変化するテキストの作り方｜CSS
ユーザーアクションで表示を切り替えるのってよく見ますよね。今回は、パソコンでマウスカーソルを持ってくと、文字を「ふわっ」と変化させるテクニックのご紹介です。
CSS CSSで全ての要素を上下左右中央揃えにするテクニック
どんな時も、上下左右中央寄せにする時は、「transform: transslate(-50%, -50%);」があればなんとかなりますね。
