全画面の背景画像をCSSのマウスホバーで切り替える(画像のプレロードあり) | UNORTHODOX WORKBOOK | Blog
全画面に設置した背景画像をマウスホバーで切り替える方法。全画面の背景画像を含め、全てCSSだけでやっています。 切り替えるだけであれば、間接セレクタを使ってマウスホバー時の背景画像を用意しておけばいいだけなので、結構簡単ですが、画像切り替えの際に読み込みのための遅延を無くしたかったので、頭を悩ませました。 いわゆる画像のプレロード(事前読み込み)ですが、JSを使わずにCSSだけでやる方法がないか模索した結果、以下の様な形となりました(プリロードとも言う)。 プレロードなしの場合 まずは、画像のプレロードがない場合のものです。つまり、オンマウスの時に初めて画像を読み込むということになり、背景画像が切り替わる際に若干の遅延(タイムラグ)が生まれるんですね。これは初めての時だけで、2回目のオンマウス時には既に画像が読み込まれているので、遅延は生じません。 【DEMO】全画面の背景画像をCSSのマ
CSSのコード整形ツール
公開日: 2015/08/28 | 更新日: 2017/05/29 Minify処理などで難読化してあるスタイルシートのコードに、インデントや改行を付けて見やすく整形するツールです。他サイトのCSSを分析したい時、間違えてMinify前のコードを消してしまった時などにご利用下さい。 変換「変換前」のフォームに、コードを入力するか、ファイルをドロップして下さい。「変換後」のフォームに変換結果が表示されます。
ドロワーメニューが作れるjQueryライブラリ「drawer.js」のご紹介！ | HPcode
対応ブラウザ CSS3をサポートしているブラウザが対象です。 IE10 ～SafariChromeFirefox 公式サイトとCDNの設置 公式サイトにアクセスするとCDNが用意されています。GitHubでファイルをダウンロードすることもできますが、CDNの方が楽なので今回はこちらを利用します。 公式サイト → http://git.blivesta.com/drawer/ 記載されているサンプルコードを元に解説していきます。 完成形のソース こちらを「index.html」などの拡張子.htmlで保存するとドロワーの動作が確認できるはずです。 <!DOCTYPE html> <html> <head> <!-- drawer.css --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/drawer
jQueryを使わずにスライドメニューを実装しよう
2022年4月27日 CSS, JavaScript スマートフォンのアプリやモバイルサイズのWebサイトでよく見かけるスライドメニュー。どうも「jQueryがないと実装できない」と思っている人がちょこちょこいるようなので、簡単なJavaScriptで実装できるんだよーというのを記事にしてみます。 ↑私が10年以上利用している会計ソフト！ このようにボタンをクリックすると横からひゅるっと出てくるメニューを作っていきます。 1. メニューを開いた状態を作成 まずはHTMLとCSSで「Menu」ボタンをクリックしてメニューが開いている状態を作成します。メニュー部分は position: absolute; で位置を指定しています。また、メニュー項目に white-space: nowrap; を加えることで、スライドさせた時に日本語が変に改行されるのを防ぎます。それ以外は色や線、余白の指定など
【コピペOK】Sassで簡単にメディアクエリを使用する方法｜macoblog
Sassは簡単にスタイルを記述できる便利なものって思ってませんか？、、、間違ってはいませんがその認識だけじゃ勿体ない、Sassの真価を体感できるのはメディアクエリを使った時です。 Sassで便利なメディアクエリの書き方【コピペOK】 CSSでメディアクエリを指定するのってめんどくさいですよね、たくさん作ると管理も大変だし、工夫してまとめるにしても少し手間がかかるので正直だるいです。 そこで、これから紹介するSass式メディアクエリを使えば、コード量もグッと減り、width指定も一括で管理できるようになるので管理コストも大幅に減らせます。 ①：変数とミックスインで定義 下記をコピペしてください。 style.scss $pc: 1024px; // PC $tab: 680px; // タブレット $sp: 480px; // スマホ @mixin pc { @media (max-widt
CSSで変数（カスタムプロパティ）を使ってみよう
2020年5月13日 CSS プログラミングではおなじみの変数。SassやLESSといったCSSプリプロセッサーをお使いの方もよく使うものですね。この一度定義しておけば繰り返し利用できる便利な変数が、CSSでも使えるようになりました！今回はCSS変数（カスタムプロパティ）の使い方と注意点をまとめていきます！ ↑私が10年以上利用している会計ソフト！ CSSカスタムプロパティとは？ 公式では「カスケード変数のためのCSSカスタムプロパティ（CSS custom properties for cascading variables）」としていますが、単に「CSSカスタムプロパティ」や「CSS変数」などとも呼ばれています。 変数は文字列や数値などを入れる箱のようなものです。例えば数学では「y = 3x」のような式があり、この y や x の中には自由に数字を当てはめられます。これが変数というもの
【CSS】 テキストを折り返す方法！自動で改行・レスポンシブにも対応
「テキストが中途半端なところで折り返される」 「英語や文字がはみ出てしまう」 こんな悩みを持ったことはありませんか？ 小さなことですが、サイトの印象に関わる深刻な悩みの一つです。 例えば、見出しに英語が含まれていて、それが単語の途中で折り返されたら、非常に読みづらいと思いませんか？ ここで使うのが、文字の折り返しを制御するCSSです。 これは知っているかどうかだけなのですが、癖があるCSSプロパティで、よくわからないという声も聞きます。 安心してください。 この記事では、よく使われる2種類の文字の折り返しプロパティ(「word-break」と「overflow-wrap」)を丁寧に解説しています。 CSSを学習し始めた人には理解に時間がかかるプロパティですが、頑張って習得しましょう。 経験者向けではありませんので、経験者は必要に応じて読み飛ばしてください。 参考：【初心者向け】CSS(スタ
はみ出たtableを横スクロールで滑らかに表示するCSS - Qiita
table { display: block; overflow-x: scroll; white-space: nowrap; -webkit-overflow-scrolling: touch; } 2行目： 隠れた部分をx方向（=横）にスクロールして表示する 3行目： 自動で改行しない（←必要であれば） 4行目： スマホで滑らかにスクールする ただ、セルの幅が効かない <table></table>に上記CSSを一括で当てると、予期せぬレイアウト崩れが起きる。 スクロールが必要ないテーブルの場合、セルは中身の幅にフィットした横幅までしか広がらないので、右側に空白が生まれてしまう・・・ 解決策その１：tableをdivで囲む スクロールが必要なテーブルだけに、CSSが当たるようにする。 .scroll-table table { display: block; overflow-x:
【css】要素をposition:absoluteで中央に配置する最新の方法(上下左右、上下、左右)
positionを使って要素を配置する際、その要素を中央に配置したいといったことはよくあると思います。その場合どうすしたらいいのか悩まれた経験はありませんか？ 今回は、positionで、要素の幅が確定していなくても上下中央、左右中央、上下左右中央に配置できるcssの設定方法をご紹介します。 positionとtranslateを使って要素を中央に配置する方法 具体例と解説 それでは、具体例を示しながら実際の設置方法を解説していきたいと思います。 例は、画像の上にテキストを配置するケースで、テキストの配置位置は、上下左右中央になるようにする場合です。 完成イメージは下記図になります。（わかりづらいかもしれませんが、水色部分が画像[img]だと仮定してください） 図 それでは、具体的にソースを示してから解説していきたいと思います。 まずは、htmlとcssをご確認ください。 html
【CSS3】height:100vh で背景が切れてしまう問題について|長野県のホームページ制作ならファブデザイン｜FABB design 【CSS3】height:100vh で背景が切れてしまう問題について
こんにちは、デザイナーの野田沢です 。 ブラウザの高さに対する割合を指定することが可能な「vw、vh」。 とっても便利ですよね。 私も多用します。 私はよく height:100vh で背景に画像を敷いて使用することが多いのですが、スクロールで背景の画像が切れてしまうのです。もしかしたら、height:100vh に限ったことではないのかもしれませんが、今回はちょっとニッチなこの問題について解決したいと思います。 メインとなる背景のcssはこんな感じ。 main { position:relative; width:100vw; height:100vh; background: url(bg.jpg) 50% 50% no-repeat; background-size:cover; } もちろん最初はキレイに見えています。 しかし、ブラウザを小さくしてスクロールしてみると… 背景の画像
CSSで作る！押したくなるボタンデザイン100（Web用）
.btn-square { display: inline-block; padding: 0.5em 1em; text-decoration: none; background: #668ad8;/*ボタン色*/ color: #FFF; border-bottom: solid 4px #627295; border-radius: 3px; } .btn-square:active { /*ボタンを押したとき*/ -webkit-transform: translateY(4px); transform: translateY(4px);/*下に動く*/ border-bottom: none;/*線を消す*/ }
サンプル付き！簡単にスライドを作れるライブラリSwiper.js超解説（基礎編） | ガリガリコード
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"> <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script> 最新版は公式ページを確認してください。 Use Swiper from CDN - Swiper ※バージョンが変わるとパラメータの書き方が変わることがあるので注意。 本記事は11.0.5（2023年11月22日リリース版）対応の内容です。 .cssは<HEAD></HEAD>内に追加します。 .jsは<BODY></BODY>内の方が多少ページの描画が速くなります。（Swiper設置箇所より前に読み込む） 自分のサーバーに置きたい人は、Git
マーケティングエージェンシー 株式会社Oz link（オズ・リンク）
about 特長 顧客起点の科学的マーケティングを一気通貫で支援することで、 企業の持続的な成長を実現します。
FLOCSSを扱いきれないあなたに贈る、スリムなCSS設計の話 | WebNAUT by Beeworks
※この記事は2017年4月7日に執筆された記事です。現在は仕様が異なる可能性があります。 Webの開発をやったことのある方なら誰しも、「CSSって結局どう書くのがベストなの？」という悩みを感じたことがあるでしょう。 一見簡単なCSSですが、一度書き始めるとそのあまりの自由さに、まるで大海原に放り出された赤子のような気分になってしまいますよね。 人生何事も、ある程度制約があったほうがやりやすいものです。 そんなわけで今日はCSSの設計について考えてみましょう。 目次 どんな設計があるの？ F、L、O、Uの4つに分けよう Foundation Layout Object Utility FLOU設計のメリットは？ レイアウトが劇的に楽 CSSの見通しが良くなる FLOUで書くときのポイントは？ まとめ どんな設計があるの？ CSS設計について調べてみると、OOCSSだとかSMACSSだとかFL
FLOCSSを使って破綻しにくいCSS設計を！ | HPcode（えいちぴーこーど）
この記事では個人的に大事だと思う部分を自分の解釈と共に紹介していくような感じとなります。 FLOCSSの書き方 FLOCSSは大きくは「Foundation」「Layout」「Object」の3つ。そして。「Object」の中の「Component」「Project」「Utility」から成り立っています。この5つの構成を正しく守り順番に読み込むことで破綻しにくいCSSとなるわけです。 それぞれに記載する内容をざっくり分けると以下のような感じです。 Foundation ・・・ 要素の初期化やmixinなどのベースを設定。リセットCSSなど。 Layout ・・・ ヘッダーやフッターなど大枠のレイアウトに関する定義。装飾はなく枠だけを用意しているイメージ。 Component ・・・ 再利用ができる最小限のパーツ。どの案件でも使える単位でのパーツです。 Project ・・・ サイト固有の
CSSの疑似要素とは？beforeとafterの使い方まとめ
今回はCSSの超便利な疑似要素「after」と「before」の使い方をまとめます。初心者の方でも分かるように丁寧に解説していきます。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSのfilterの使い方 - 画像フィルターで明度・彩度・ぼかしなどを調整
【CSS3】サイズがわからない画像の縦横比を維持したまま表示する方法【object-fit】 - Qiita
CSSで文字列の折り返しをさせない方法
GitHub - hiloki/flocss: CSS organization methodology.
