jQueryでスクロールすると表示する系いろいろ 最近はスクロールするときにいろいろ仕掛けをするのが流行なようです。 ここではシンプルにある要素の位置とか最下部までスクロールしたら何か表示するということをやってみます。 投稿日2012年03月08日 更新日2019年12月19日 ちょっとスクロールするとフェードして「トップへ戻るボタン」を表示を表示します。 ボタンは下の方にこんな感じで配置します。 html <p id="page-top"><a href="#wrap">PAGE TOP</a></p> fixedにすると固定配置されます。 css #page-top { position: fixed; bottom: 20px; right: 20px; font-size: 77%; } #page-top a { background: #666; text-decoration

ブラウザごとに異なるHTMLの各要素のスタイルの相違を吸収し、各要素のデフォルトのスタイルが定義されたCSSリセット用のスタイルシートを紹介します。 normalize.cssを最近のWeb制作にあうようカスタマイズされたもので、対応ブラウザはすべてのモダンブラウザ、IEは8+対応です。 ress -GitHub 参考: normalize.cssの特徴とコード 2015年、Web制作者が押さえておきたいCSSの各種リセット ressの特徴 ress: html, グローバルセレクタの定義 ress: 一般的な要素の定義 ress: フォーム要素の定義 ress: メディア要素の定義 ress: アクセシビリティ用の定義 ress: ::selectionの定義 ressの特徴 ressは「normalize.css」をカスタマイズしたもので、スタイルシートを始める時のしっかりしたベースな

CSSプロパティの1つである display は、CSSレイアウトに用いるプロパティの中でも極めて重要なものです。よく使われているのは、 block や inline 、 none あたりでしょう。 table や inline-block も、今ではかなり一般的になってきたと言えます。一方、 flex は新たに登場したものです。きっとユーザに気に入られるでしょう。これはレイアウト用に特別に作られたdisplayプロパティです。さらには、この先、 grid がまもなく私たちの秘密兵器となるでしょう（現在、盛んに取り組まれています）。これもまた、レイアウトに特化したプロパティです。 本記事は、当初予定していたよりもずっと長くなりました。ご希望に応じて、自由にサブセクションに飛んでお読みいただければと思います。もし、お時間を割いて全体を読んでいただけるのでしたら、大変嬉しく思います???? 目

CSS チュートリアル CSS の基本 CSS の第一歩 CSS の第一歩の概要 CSS とは何か CSS 入門 CSS の全体像 CSS の働き 評価課題: 経歴ページのスタイル設定 CSS の構成要素 CSS の構成要素の概要 CSS セレクター Type, class, and ID selectors Attribute selectors Pseudo-classes and pseudo-elements Combinators カスケードと継承 Cascade layers ボックスモデル 背景と境界 書字方向の操作 内容のはみ出し CSS の値と単位 CSS における大きさの指定 画像、メディア、フォームの要素 表のスタイル付け CSS のデバッグ CSS の整理 評価課題: CSS の基本的な理解度 評価課題: 素敵なレターヘッドの便箋の作成 評価課題: かっこいいボック

2015-10-31 2015年10月度のflexboxの書き方 CSS3 １年ぶりに業務でコーディング・・・が、早速つまずく。「display:flexは、仕様やら、OSやら、端末やら、いろんなものがコロコロ変わったみたいだけど、今はどう指定すれば良いの？」ってことで、flexboxの書き方を調べました。 ブラウザのサポート状況などから まずは、先にやってくれてる人がいないかネット検索。比較的新しめの記事がこちらでした。 Flexboxの書き方 IE10、Safari、iOS Safari、Androidブラウザへの対応【実践編1】を紹介します【2015年4月現在】 Flexboxの書き方 IE10、Safari、iOS Safari、Androidブラウザへの対応【実践編2】を紹介します【2015年4月現在】 コリスでは各プロパティを図で詳しく説明してくれています。 CSS3 Flex

最近のWebページで人気のある縦長ページ、繊細なインタラクション、大きい写真画像を使ったヘッダ、カード型コンポーネントなど、UIデザインのトレンドが取り入られたHTML5/CSS3で作成された商用利用無料のテンプレートを紹介します。 各デバイスごとのレイアウト、気持ちいいアニメーションなどの勉強にもいいですね。 Synthetica デモページ 最近のトレンドでもあるビジュアルのセクションを広く確保し、洗練されたアニメーションを備えたインタラクションが気持ちいいテンプレート。個人のポートフォリオからプロダクトのランディングページまで、何かを見せることに適しています。

マークアップエンジニアの　　です。 CSSだけでRadioボタンの作り方みたいな内容の記事をよくお見かけしますが殆どのマークアップが気持ち悪く感じるのは僕だけでしょうか？ 大体が <section> <input type="radio" name="hoge" value="テストRadio" id="radio_item" checked /> <label for="radio_item" class="radio">TestRadio</label> </section> 繰り返す様ですが コレって気持ち悪いし使いづらいと思うのは僕だけでしょうか？ 気持ち悪いと思う点 labelタグの使い方 チェックさせる為にid属性をわざわざ振っちゃう radioボタンに紐づくtextが存在しない場合にどうする気ですか？ Tab移動意識してますか？ で、気持ち悪い気持ち悪いと言っていても問題は解

毎度書くのが煩わしいので、 よく使う組み合わせの角丸CSS3をまとめて単語登録しておこうかと思ってまとめました。 といいつつ単語登録めんどくさくて このページ見てコピペで済ませそうな私がみえる…！ ということで角丸いろいろ。 自分のサイトは 角丸はほぼCSS3使ってやってます。 最近はお仕事のサイトでも角丸はCSS3でやるようになってきました。 他のことに時間とお金を使った方がイイ！ 早くどのブラウザでも実現できるようになるといいのになぁ…！ みなさんは角丸、どうしていますか？？？ /*全体角丸*/ border-radius: 6px; /* CSS3草案 */ -webkit-border-radius: 6px; /* Safari,Google Chrome用 */ -moz-border-radius: 6px; /* Firefox用 */ /* 左上のみ角丸 */ borde

WP-D Week Day 2 「CSSについてLevel Up!」での発表資料です。

Webサイトやブログを作成する時にCSSでよく使うコード、ブレイクポイントの定義・Flexboxのグリッド・ボタン・フォーム・画像周り・ライン・ユーティリティ・アニメーションなどがまとめられたCorpusを紹介します。 スニペットに登録したり、ブックマークしておくと便利ですね。 Corpus Corpusでは、作者自らが新しいプロジェクトを始める時によく使用するコードのセットをまとめており、汎用的に利用できるようSCSSでダウンロードできます。 参考として、更に掘り下げた記事もピックアップしました。

WEB上で、ボタンや画像などの補足説明に用いられるツールチップ、そこまで多くは見かけませんが、ユーザーナビゲーションとしては直感的で有効な手法で、制作するにあたって導入を検討するWEBデザイナーの方は多いのではないでしょうか？今日紹介するのはCSSのみで実現する軽量なツールチップ「Ballon.css」です。 CSSのみで制作されていますが、なめらかなアニメーションを実現しています。ICONフォントや絵文字にも対応しています。 詳しくは以下 上、下、左、右と4方向にツールチップが出せ、単語から文章まで大きさも5段階にコントロールする事が可能です。 導入は非常にシンプルで、「Ballon.css」CSSを読み込ませて、あとは動かしたい所定の動きをdata-balloon-posという型で呼び出すだけで実装できます。ソースコードなどは「Balloon.css — CSS tooltips fo

『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年３月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材／配色やWeb制作といった最新トレンドも公開中。

『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年３月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材／配色やWeb制作といった最新トレンドも公開中。

2016年3月10日 CSS, Webデザイン 要素に加えれば、画面に立体感をもたらすシャドウ。なんだか最近シャドウを取り入れたデザインをよく見かけるので、今回はシャドウを使う時の注意点やコツをまとめてみようと思います。 ↑私が10年以上利用している会計ソフト！ If you took a 3 year break from UI design, now you're all caught up: pic.twitter.com/4pdL17dXaF — Dylan Jones (@tDJ) March 2, 2016 このTweetにも描かれているとおり、1年周期でシャドウの扱いが変わっていますね。2014年は影なしの完全フラットデザイン。2015年はロングシャドウ。そして2016年はこれから紹介するぼんやりふんわりシャドウ。 CSSで実装するシャドウの基礎 通常のシャドウ 要素にシャド

iOSのフォーム（inputやtextarea）要素に標準で適用されているボックスシャドウですが、フォームを自作でデザインする際などに、CSSにbox-shadowを指定してもボックスシャドウが無効にできない時の解決方法になります。 見た目から推測すると、iOSのinput要素には、CSSで「box-shadow」が標準で適用されているように思えるのですが、実際に適用されているのはグラデーションを指定する時に使う「-webkit-gradient」です。 以下、CSSでWebkit向けのベンダープレフィックスを使用した変更方法にりますので、iOSでSafariやChromeでの表示結果を確認しながら作業してください。 グラデーション（シャドウ）の量や濃さは「-webkit-gradient」で調整 グラデーションの量や濃さを変更するのであれば「-webkit-gradient」を使用して調

overflow で要素内をスクロールさせると、iPhone やiPad などのiOS で見た場合にスクロールがぎこちなくなります。 そんな時は、iOS 5.0 より実装されたSafari CSS の -webkit-overflow-scrolling プロパティを使うことで、iOS でもスムーズなスクロール（慣性スクロール）を実現できるようになります。 -webkit-overflow-scrolling の指定 -webkit-overflow-scrolling に指定する値は「auto」と「touch」の2 つです。 「auto」はデフォルトで、慣性スクロールしません。 指定した高さの要素内をoverflow: scroll でスクロールさせる際に、以下のように .content { height: 200px; overflow: scroll; -webkit-overflo

CSSはずっとSassを使っていて、gulp-sassでコンパイルする感じの僕でしたがPostCSSに移行してみたのでそのときの工程をメモとして残しておきます。 PostCSSとは何か なぜSassからPostCSSに移行したのか むしゃくしゃしてやった。 ほんとは ただ単にSassを使っているということに飽きたってのが1点。 あとはSassの機能において僕はmixinとかextendとか正直必要ないなって考えていて、変数であるとかネストであるとかimportであるとか(CSSのimportじゃない方の)が使えればそれで良いってのがあって、そうなるとPostCSSの必要な機能だけ読み込んで使うっていうスタンスは良いなっていうのが2点目。 あと結局Sass使ってそのあとにautoprefixerとminifyは確実にやるのでそこでSass以外のツールでCSSのことをあれこれしちゃってるのでそ

文章内のテキストリンクやテキストのみで実装しているようなナビゲーションリンクなどで使えそうなホバーエフェクト・デザインのサンプルです。 文字数が変化したり改行が頻繁に入るような場所などでは正直使い辛くて利用できる場面が限られてしまうものも多いのですが、シンプルなHTMLとCSSで様々な見せ方ができます。 サンプルの中で特にdisplay: inline-block;を記述しているタイプのものが意図しない箇所で改行されたり、逆にされなかったりということがあるので注意して下さい。 実際にどのような動きになってしまうのかはブラウザを縮めて確認してもらったり、または自身で環境を用意して実装・確認をしてもらうとよりわかりやすいと思います。 ここで紹介するエフェクトは、基本的に<a href="#">リンク</a>のようなHTMLに対して実装したものになります。 また、サンプルコードに含まれていません

リンクには既定値で、最初からアンダーラインが表示されるようになっています、逆にマウスオーバーすることで表示させるっていう使い方も結構されます。今回のコードは、text-decorationを使ったものではなく 擬似要素を使って線を表現しています、そのことによってより柔軟な表現が可能になります コードの解説と実装方法 アンダーラインの部分は a の擬似要素 after を使って作られています。 それを transition で変化させています 変化する基準は scaleです。 scaleは拡大縮小を行うことが出来ます このコードでは、X軸に対して拡大縮小します。つまり横方向のみに伸びたり縮んだりして見えるようになります これをマウスオーバーすることで動作するようにしています。 コード SCSS版 a { position: relative; display: inline-block; p