Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
A Free Gallery of Fantastic and Unique CSS Gradients.
前置き CSSでの余白の取り方について、後輩に「margin-topとmargin-bottomどっち派ですか？」と聞かれたので、 回答内容を記事として残します。 昔、会社のOJTで学んだことの共有となります。 原則 1. 基本的にmargin-topを使う 理由としては、そちらの方が後々調節しやすいからです。 また、後述の優先度で設定していけば、margin-bottomの出番はほぼなくなります。 2. どうしても無理な場合にbottomを使う margin-bottomは他の方法ではどうしても設定が無理なケースのみ使いましょう。 3. 隣接セレクタをうまく使うとトルツメしやすい 特定の要素同士が並んだ時だけマージンを取る＝余白の打ち消し設定が不要になります。 設定の優先度 要素がいくらネストしても下記の優先度は変わりません。 この優先度で余白を設定していけば、margin-bottom
CSSの position: sticky を使ってテーブルのヘッダー行・列を固定する方法を解説します。動作確認したブラウザーは次のとおりです。 Google Chrome 71 Firefox 64 Safari 12 Microsoft Edge 43 (EdgeHTML 17) ちなみに、IE 11などの対応していないブラウザーで見た場合、ヘッダー行・列が固定されないだけで、表示が崩れたりはしません。 theadを固定するかthを固定するか 縦スクロール時にヘッダー行を固定するにあたり、thead に対して position: sticky を指定したくなりますが、これはあまり筋が良くなさそうです。まずChromeやEdgeは thead や tr の固定に対応していません1。 display: block などで回避できますが、列の幅が決まっていないといけないという制約が生まれたり
※こちらの記事が400はてブ以上ついて、総合とテクノロジーの人気エントリーに入りました！ こんにちは。Kazutaka Shimizuです。 フリーランスとしてPM、エンジニアをやっています。 元々はWebマーケティングのコンサルタントをやっていましたが、独学でWeb開発を勉強してプロダクトを作って起業しました。 最近は創業した会社を離れ、フリーランスとして活動したり、プログラミングを独学した経験をこちらのツイッターで発信しています。 みなさんはGoogle Chromeのデベロッパーツールをご存知ですか？ ドットインストールなど一部のプログラミング学習サービスでは、デベロッパーツールのレッスンがあるなど、おそらく全く知らない人はかなり少ないと思います。 しかし、とにかく多機能なため、意外と便利な機能を使ったことがないというプログラミング初心者の方も多いようです。 僕自身、何度か自分のTw
Result どんな背景でもテキストを読める状態にする、というもの ちょっと語弊があるかもしれませんが、要は背景画像の明度とコントラストをfilterプロパティで抑えて#fffに指定したテキストの可読性を維持しよう、という内容です CGMサイトなんかで使う機会があるかも、と思ったので備忘録 css .bg { background-image:url(https://example.com/foobar.jpg); background-repeat:no-repeat; background-size:cover; bottom:0; filter:contrast(.7) brightness(.7);/*明度とコントラストを70%にしておく*/ left:0; position:fixed; right:0; top:0; } can i use
<div class="box"> <div class="bgImg src1"></div> <div class="bgImg src2"></div> <div class="bgImg src3"></div> <div class="bgImg src4"></div> <div class="boxString">フェード<br>切り替え</div> </div> <style type="text/css"> /* --- 背景が上下左右に動くのBOX定義 ------------------------ */ .box { position : relative; max-width : 500px; /* 背景の大きさに変更 */ height : 200px; margin : auto; background : #ffffff; } /* --- 背景が上下左右に
CSSセレクタのチートシートでは、要素セレクタ / classセレクタ / idセレクタ / 属性セレクタ / 複数セレクタ / 子孫セレクタ / 兄弟セレクタ / 隣接セレクタ / 擬似クラス / 擬似要素 / 全称セレクターから37パターンのセレクタの説明と実際のコードで使い方サンプルを紹介しています。
Introduction Modern CSS is a powerful tool you can use to create many advanced User Interface (UI) features. In the past, these features relied on JavaScript libraries. In this guide, you will set up a few CSS lines to create a scrolling parallax effect on a web page. You will use images from placekitten.com as placeholder background images. You will have a webpage with a pure CSS scrolling parall
Result かなり昔にJSによる方法を書きましたがどこちらの方がスマートだったのでメモ ハイライトは要素にユーザーの注視を促す手法として効果的なので今でも健在の手法だと思います css span {/*アニメーション*/ padding: 0 1rem; transition: opacity 0.2s; } .sibling-fade:hover span:not(:hover) {/*透過処理*/ opacity: 0.5; } 親要素にホバーしたら全体を透過、更に要素にホバーしたもの以外に適応させる これでマウスホバー中のアイテムだけは透過処理範囲から外れるようになります html <div class="sibling-fade"> <span>Item 1</span> <span>Item 2</spa
画像を使わずにCSSだけで実装するストライプデザイン集です サンプルではdivにクラス「bg」に適用しています html <div class="bg"></div>チェック柄・ストライプ柄のCSSジェネレーターを作成しましたので是非お試し下さい 横ストライプSee the Pen 横ストライプ by yochans (@yochans) on CodePen. CSS .bg{ width:100%; height:260px; background: repeating-linear-gradient(white 0px, #a9a9a9 0px, #a9a9a9 15px, #696969 15px, #696969 30px); }縦ストライプSee the Pen 縦ストライプ by yochans (@yochans) on CodePen. CSS .bg{ width:10
1行追加でOK！CSSだけで画像をトリミングできる「object-fit」プロパティー画像の一覧を表示する時などは、画像のサイズが統一されていると並べて表示させてもすっきりキレイに整って見えますが、必ずしもサイズが同じとは限りません。かといってPhotoshopを使ってすべての画像をリサイズできない…ということもあるでしょう。そんな時はCSSでトリミングすると楽です！今回は「object-fit」というプロパティーを使って、画像の縦横比を保ちつつトリミングする方法を紹介します。 画像を中央の位置でトリミングするまずはこの縦長の画像、横長の画像を並べ、縦横 250px の正方形の形で表示させてみましょう。 img { width: 250px; height: 250px; } CSS でこのように画像に対してサイズを指定すると… こんな感じでグチャッとつぶれて表示されちゃいます…。 そこで
スマートフォンだと:hover擬似クラスを使ったマウスオーバーエフェクトが反応しない！なんて事ありませんか？ 実は、普通にCSSの:hoverと:activeにスタイルを設定してもスマホでは適用されないんですね。 とは言え、PCよりもスマホでのアクセスが多いモバイルファーストの時代なので、スマホでもマウスオーバーエフェクトを実装したいですよね。 結論！ ontouchstart属性を追加するだけ 結論から言うと、:hover擬似クラスを適用させたい要素に ontouchstart属性を追加するだけで、スマホでもマウスオーバーエフェクトが実装できます。 ontouchstart属性のプロパティは空でOKです。
ページ内のアンカーやページの上部にアニメーションで、スムーズにスクロールさせるCSS、単体のJavaScript、Vue.jsやjQueryのプラグインを紹介します。 現在では、CSSだけでも実装できるようになりました。IEは例のごとく非対応ですが、ポリフィルがあるので利用できます。 イラスト: Girls Design Materials CSSでページをアニメーションでスクロールさせる JavaScript単体でページをアニメーションでスクロールさせる プラグインでページをアニメーションでスクロールさせる CSSでページをアニメーションでスクロールさせる CSSのプロパティ「Scroll-behavior」を使用すると、アニメーションを使用してスムーズにスクロールさせることができます。 Scroll-behaviorのサポートブラウザ scroll-behavior -MDN web
Bootstrap DatepickerはBootstrapのフレームワークを利用した、日付入力補助プラグインです。 ユーザーがカレンダーから直感的に日付を選ぶことができる、 日付を入力する際のUIとして便利なプラグインです。 今回はよく使われるサンプルとその説明を用意しました。 サンプルデモページ サンプルページを作成しました。 ブログ記事内だと、表示が崩れるので、サンプルページで動作の確認をしてください。 ⇒デモページはこちら ライトプラン 詳細はこちら セッティング方法 導入方法は、 プラグインをこのサイトからダウンロードしてください。https://github.com/uxsolutions/bootstrap-datepicker プラグインのオプション設定方法は、このページで確認できます。オンラインデモ セッティング方法は、簡単。jquery、bootstrap、font-a
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
