CSS CSSの「position relative」の役割 「position:relative;」って何のためにあるの?その疑問を解決します。「position」とはそのままポジション(位置)を整えるプロパティ。次に、どの様にポジションを整えるかというと「relative(相対的)」?「relat... 2019年12月03日 CSS
CSS CSSで背景に色を設定する方法 背景の色は、基本どこも白が多いけれど、特設サイトやブランドカラーがある場合背景にカラーを適応すると、サイトの印象がガラッと変わります。今回は、印象的なサイトを作るための背景色変更方法を解説します。まずは背景に色を追加してみよう!背景に色を追... 2019年12月01日 CSS
CSS CSSやSass、SCSSでコメントアウト(テキスト非表示)方法 CSSを書いててスペースで区切るだけでは、分かりにくいことがあったりします。そんな時便利なのが、コメントアウト。このスタイルは、ヘッダー要素のだよ!とか、共通部分をまとめる時にここから~ここまで。みたいに使い方は色々なコメントアウトの記述方... 2019年09月15日 CSSSASS・SCSSサイト制作
CSS 要素が消えた!?CSSで即、解決するいくつかの方法 コーディングをしてると、CSSで指定しているはずの要素がどこかへ居なくなってしまうことがあります。そんな時の解決方法をご紹介します。要素の重なりを疑う背景全体にカラーを敷いてたり、画像を敷いてたり要素を重ねてたりすると、起こる現象。こんな時... 2019年08月05日 CSS
CSS 【jQuery・CSS】画像保存禁止方法まとめ スマホ、PCの画像保存を禁止する方法まとめ。結果から言うと、スマホのスクショで保存を止めることはできませんでした。まずは、PCの画像保存禁止から【PC】右クリックを禁止するjQuery jQueryで右クリックを禁止する【画像保存禁止方法】... 2019年07月16日 CSSjQueryjavascript
CSS PC・スマホで画像保存させない方法【画像保存禁止】 jQueryで画像をDivで囲うCSSとjQueryで画像の手前に透明な要素を追加して、画像を保存しようとしても画像に触れなくする方法。まずは、jQueryで画像(imgタグ)を検知し、その画像をDivで囲います。この時、CSSでスタイルを... 2019年07月15日 CSSjQueryjavascriptサイト制作
CSS CSSでスマホの長押し禁止【画像保存禁止方法】 CSSだけでスマホの長押し画像保存を禁止する方法をご紹介します。PCでは少しだけダウンロードされにくくなるだけなので、スマホだけ有効にすべきです。(右クリックで画像をダウンロードすると、画像が保存されるのではなくページで利用されているソース... 2019年07月14日 CSSjQueryjavascriptサイト制作
CSS CSSのtransitionについて深く知る 普段使っている「transition」を、自分はあやふやにまとめて定義していました。自分がそうなら、きっとみんなもそうだろうと思い改めて詳しく勉強したいと思います。transitionとは?transitionとは、Google翻訳すると「... 2019年07月04日 CSSサイト制作
CSS 三角形の作り方|CSS CSSで上向き、下向き、右、左向きの三角形の作り方のご紹介です。三角形を作るうえで必要になってくるプロパティが「border」だ。これが、またよくわからない原理で三角形が作られているのでその辺りも解説していこうと思います。borderで三角... 2019年06月30日 CSSサイト制作
CSS 画像を丸く切り抜く方法|CSS TwitterやInstagramのプロフィール画像でよく見る丸く切り抜かれた画像を実装するCSSのご紹介です。やりかたは2種類あり、自分は2つ目が好みでよく使用しています。1つめは、下記のみたいにHTMLでimgタグで画像を表示し周りを切... 2019年06月29日 CSS
CSS ページ幅をこれ以上広げないCSS パソコンでウェブを見ると、中心にコンテンツが表示されるのが一般的です。CSSでこれを表現するには、下記の記述をコンテンツの最も外のDivに付ければOK。【CSS】 .contents { width: 100%; max-width: 80... 2019年06月27日 CSS
CSS 【CSS】文章(テキスト)の改行を禁止する方法 テキストの扱いって時に、厄介な時があるよね。これ以上文字入れたらレイアウト崩れちゃうとか、タイトルが長すぎて本来のデザインと違った感じになっちゃったり。それをCSSでスッと解決するテキストを改行させないCSSテクニックを紹介します。 2019年06月22日 CSSサイト制作
CSS CSSだけで出来るボタンのホバーエフェクト集 javascriptは使わずにCSSとHTMLだけで装飾できるボタンのホバーエフェクトをご紹介します。コピペですぐ実装できるので、このページをブックマークしておくと便利です。薄くなるボタンボタン01HTML<div class="btn01... 2019年06月20日 CSSサイト制作
CSS ホバーで変化するテキストの作り方|CSS ユーザーアクションで表示を切り替えるのってよく見ますよね。今回は、パソコンでマウスカーソルを持ってくと、文字を「ふわっ」と変化させるテクニックのご紹介です。 2019年06月18日 CSSサイト制作
CSS CSSで全ての要素を上下左右中央揃えにするテクニック どんな時も、上下左右中央寄せにする時は、「transform: transslate(-50%, -50%);」があればなんとかなりますね。 2019年06月17日 CSS