コピペでできる！cssとhtmlのみでフォームのセレクトボックスをいい感じにするデザイン8選 - copypet.jp｜パーツで探す、web制作に使えるコピペサイト。
<div class="cp_ipselect cp_sl01"> <select required> <option value="" hidden>Choose</option> <option value="1">cat</option> <option value="2">dog</option> <option value="3">rabbit</option> <option value="4">squirrel</option> </select> </div> .cp_ipselect { overflow: hidden; width: 90%; margin: 2em auto; text-align: center; } .cp_ipselect select { width: 100%; padding-right: 1em; cursor: pointer; te
【意外と便利！】特定の子要素を持つ親要素にcssスタイルを適用する方法
【意外と便利！】特定の子要素を持つ親要素にcssスタイルを適用する方法 Web2017年3月27日 「特定の子要素を持つ親要素にcssを適用したい」というケースはしばしばありますが、css3を駆使してもこれを実現するセレクタは存在しません。そこで、jsを使って実現する方法を本記事ではご紹介いたします。jQueryでもVanilla JS（生のjavascript）でもどちらでも可能ですので、サイト環境に合う方法をどうぞお使いください。 サンプルコード html <ul class="hoge"> <li><p>特にスタイルを当てる必要なし</p></li> <li><p>特にスタイルを当てる必要なし</p></li> <li><p class="moge">これの親要素liにだけcssを適用したい</p></li> <li><p>特にスタイルを当てる必要なし</p></li> <li><p
【CSS/JS】スライドイン表示後にマスクがスライドアウトするアニメーション
こんにちは、Ryohei（@ityryohei）です！ ボックスがスライドインで表示された後、重なり要素（マスク）がスライドアウトするアニメーションのご紹介です。 ページを下にスクロールしていくと、ボックスがスライドインで表示されます。その後、グラデーションの要素がスライドアウトしてコンテンツが表示されるアニメーションになります。 具体的には、下記のデモのような処理となります。 See the Pen Box Slide In Animation | jQuery by ryoy (@intotheprogram) on CodePen. 最近、このタイプのアニメーションが流行しているみたいで、似た表現を取り入れたサイトをよく見かけます。 今回、私なりに「こんな感じで実装しているのかな？」と考えながら、CSSとjQueryでスライドインアニメーションを実装してみました。同様の処理を検討して
サクッとできるparallax(パララックス)エフェクト4つ
簡単に出来るパララックス効果をまとめてみました。 CSSや短いjQueryで出来るものです。 パララックスって、やりたいな～とは思うけど、コンバージョン考えると使えるサイト少ないですよね。 よくあるやつ CSSのcoverで作る、よくあるやつです。 Demo デモはこちら Html <div id="para1"> <div class="first"><p><i>Parallax demo1</i></p></div> <div class="a">a</div> <div class="b">b</div> <div class="c">c</div> <div class="d">d</div> </div>
の番号だけ装飾するには？CSSカウンタを使ってみた
順序リストの表示に利用するol要素。 デフォルトではごくシンプルな番号つきリストですが、デザイナーさんからこんな風に番号部分だけ色を変えるなどの装飾がされたデザインを渡されたらどのようにCSSを作りますか？ …簡単そうに見えて、意外と悩むのではないでしょうか？ 今回の記事では、こんなシーンで使えるCSSのTipsをご紹介します。 最初からついている数字は使わない 結論から言うと、list-style-typeによって付与される数字は使いません。 ここだけを装飾する方法はないので、せっかくですが指定自体を無くすことになります。 ol{ list-style-type: none; } ここから活躍するのが当記事の主役、CSS2から登場した「カウンタ機能」です。 これを使って1,2,3,4…といった連番を疑似要素:beforeにつけなおす方法をとった上で、自由に装飾できるようにしてみましょう。
LightBoxで簡単にギャラリーの実装ができたので導入と使い方メモ - Qiita
はじめに 公式サイト 公式ドキュメント、デモはこちらから LightBoxとは 簡単に言うとWebサイトでよく見かける、クリックすると画像がぽわ〜っと拡大して表示されるアレです。 個人的な依頼でWebサイトをつくることになりまして、 「ギャラリーページが欲しい」 「んで画像の横クリックしたら次の画像に移動するやつがいい」 「それと画像のグループが変わり目では移動させないで」 「あ、画像毎にタイトルも表示させたい」 と言った要望があり、色々と探した結果LightBoxに行き着きました。 ではどんな機能か、まさしく要望にあった通りです。 サムネイルをクリックすると拡大画像が表示され、 画像クリックで遷移でき、 グルーピングやキャプションの設定ができる 加えてCSSでデザインの変更も用意 導入も非常に簡単 夢のようですね。 JavaScript戦士のジョブ経験がない自分にはまさに夢のようです。
セクションを斜めに区切るデザインをCSSで実装する方法 - Qiita
<div class="content"> <section class="content01"></section> <section class="content02"></section> </div> .content01 { height: 300px; width: 100%; background-color: #74c23a; /* きみどり */ } .content02 { height: 300px; width: 100%; background-color: #8B3DC5; /* むらさき */ } .content { overflow: hidden; /* はみ出た部分は表示しない */ } .content01{ position: relative; height: 300px; width: 100%; background-color: #74c2
斜め背景でカッコいいフロントエンドデザイン - Qiita
<section class="contents"> <div class="contents_inner"> <!-- ここはコンテンツ --> </div> </section> .contents { position: relative; overflow: hidden; margin: 10% 0; padding: 80px 0; } .contents:before { content: ''; position: absolute; top: 0; left: 0; width: 120%; height: 80%; margin: 3% -10% 0; background: #011931; -webkit-transform-origin: left center; -ms-transform-origin: left center; transform-origi
WEBクリエイターの部屋
スマホ対応などでグローバルナビゲーションを格納しハンバーガーメニューで開閉させるといった実装は一般的によくありますが、ハンバーガーメニューを固定で配置した際にス...
cssのみで三角形・矢印やリボンを表現する最新の方法、レスポンシブにも対応！
【図1】のような三角形の矢印のような表現をCSSのみでするとき、borderを使った方法がよく取り上げられているのですが、あれって使い勝手悪くないですか？ 特に写真の上に配置したい時とか、三角形の幅を自由に可変させたいと […]
imgタグで設置したSVGファイルをインラインSVGに変換してくれるJavaScriptライブラリ「deSVG」
deSVGは、imgタグで設置しているSVGファイルをインラインSVGに変換してくれるJavaScriptライブラリです。 SVGの色をCSSで変更しようと思った場合、imgタグで設置されているSVGファイルは変更できず、インラインSVGとしてHTMLにコードが記述されている必要があります。 ですが、SVGのコードは非常に長くなる場合もあり、HTMLに直接記述するのは嫌だなーと思うかもしれません。そんな時はdeSVGを使えば、HTMLにはimgタグとして記述し、ページが読み込まれた時にインラインSVGに変換するといったことが可能になります。 例えば、以下のようにimgタグでsample.svgを読み込んでいたとします。 <img src="sample.svg" alt="" class="svg"> deSVGを使うと、以下のようなインラインSVGに変換することができます。 <svg i
.matchMedia()でJSでもメディアクエリを使って条件分岐する | SPYWEB
if (matchMedia('(max-width: 798px)').matches) { // ウィンドウサイズが798px以下のとき } else { // それ以外 } .matchMedia() を使うことでCSSのメディアクエリのように条件分岐することができます。しかし、この記述だと ページが読み込まれた時 にしか実行されません。CSSのメディアクエリはウィンドウサイズを変更したらスタイルが適用されますよね。 var mediaQuery = matchMedia('(max-width: 798px)'); // ページが読み込まれた時に実行 handle(mediaQuery); // ウィンドウサイズが変更されても実行されるように mediaQuery.addListener(handle); function handle(mq) { if (mq.matches)
スクロールでふわっと現れるフェードインの動きをjQueryで実装
この記事の結論 すぐに実装したい方はこちら フェードは雰囲気作りや強調に使うのが効果的。 ブログは文章がメインなのであまり適していない。アイキャッチなどを強調するならOK ホームページでよく見かける スクロールすると要素がふわっとフェードする動きありますよね。 具体的には以下のような感じ。 あーこれか。見たことあるな。なんかオシャレっぽいやつな どうやらフェードがこの記事にも実装されているようですね。 ぶっちゃけブログだと見づらいよね。 文章読みたいだけなのに何フェードしてんだよっていう このようなふわっとした動きは、 jQueryのプラグインを使えば簡単に実装することは出来るのですが、 今回は備忘録も兼ねて1から作ってみました。 コメントも入れているので、 jQueryを勉強中の方は是非参考にしてみてください。 完成コード まずは今回作ったコードを先に載せておきます。 そのままコピペで動
最近よく見る、マウスオーバー時にヌルっと拡大する画像の作り方+α
最近トップページの記事一覧をグリッドレイアウトで組んでいるブログが多いですよね（うちのブログもだけど） そして、ほとんどのブログが各コンテンツにというカードっぽいデザイン（上に画像・下にタイトル）を採用しています。まぁ普通にお洒落です…が、画像部分にマウスオーバーした時、何もエフェクトが掛からないのってちょっと味気ないですよね。 そこで今回は、マウスオーバーした際に画像をヌルっと拡大させる方法を紹介します。ﾇﾙﾘ。
iOSでCSSでborder-radius と overflow:hiddenを指定した、角丸マスクが効かなくてハマった話 | MONOCHROME DESIGN｜東京杉並のフリーランスWEBデザイナー。WordPressホームページ/ウェブサイト制作
iOSでCSSでborder-radius と overflow:hiddenを指定した、角丸マスクが効かなくてハマった話 作っていたサイトで、ちょっと写真をカッコよく表示したいなと思いborder-radiusとoverflow:hiddenを利用した角丸マスクで表示するようなものを作りました。その時iOSで少しハマったので、その対処法などをご紹介します。 実際に作ったのが以下のようなものです。 See the Pen border radius & overflow hidden by monochrome (@monochrome-design) on CodePen. それなりに上手く出来たと思っていたのですが、スマホで見てみると丸くマスクされていない事が判明。。。 あれ？と思いmacのsafariで見てみると同じくマスクされていませんでした。しかし、chromeやfirefoxで
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
タッチデバイスでCSSの:activeや:hoverを機能させる。 - Qiita
jQuery で5秒後とかに addClass したいとき · Issue #61 · shikakun/tips