タグ

CSSに関するricopinxのブックマーク (81)

  • CSSで背景のみをぼかす方法

    今回はCSSで背景画像のみをぼかす方法を紹介します。 ぼかすとなると「 filter: blur();」を使うことは簡単に想像できると思いますが、これが少し厄介なんですよね。背景だけには適応できず、内包している要素がすべてぼかされてしまいます。 そこで擬似要素を使用して実現します。 デモサイト html <div class="key" style="background-image:url(key.jpg)"> <p><img src="key.jpg" alt=""></p> </div> インラインで背景画像の指定 インラインで背景画像の指定をしているのはCMS等でアイキャッチ画像と共通の画像を背景画像に設定することを想定しています。 .key{ background: no-repeat center center; background-size: cover; padding:

    CSSで背景のみをぼかす方法
  • [jQuery] プラグインを使わずに横からスライドインするメニューを簡単に作る

    Modified 2015-10-17 更新情報 メニュースライドイン時スクロールできるサンプルを追記しました。コメント欄での返答で誤りがあった箇所を削除しました。 コンテンツ 部分をクリックしても閉じることができるようにするコードを追記しました。 スマートフォンやレスポンシブサイトなどでよく見かける、メニューボタンをクリックするとコンテンツを押し出してメニューがスライドインしてくる動きを jQuery と CSS で作る方法です。やってみると意外と簡単なコードで作ることができます。 サンプルデモとダウンロード ◆ 横からスライドインするメニュー demo|memocarilog このサンプルコードは以下よりダウンロードできます。 ◆ SaoriMiyazaki/SlideIn_Menu HTMLコード スライドインしてくるメニューとメニューボタンの記述をします。 <!-- スライドメニュ

    [jQuery] プラグインを使わずに横からスライドインするメニューを簡単に作る
  • CSSボタンを演出する155個のHoverエフェクトまとめ

    Bruno Profile Work 制作の方針について Brunoが生み出すWebサイトは、文章や写真を活かすためのデザインをご提供します。訪問者へアピールするためのコンテンツがメイン。この意識のもと、適切な見せ方を追求しながら制作しております。 制作料金 基WordPressサイトの制作となりますが、ご希望に合わせてHTMLの静的サイトの制作ももちろんお請けさせていただきます。また、デザインだけやコーディングだけといった制作工程単位でのご依頼も対応しております。 よくある質問 BrunoのWebサイト制作では、できるだけクライアント様にご不安を与えることなく、お問い合わせ時から制作完了時、その後の運用までサポートさせていただいておりますが、その際によく頂くご質問についてご紹介致します。

    CSSボタンを演出する155個のHoverエフェクトまとめ
  • ナビメニュー100連発!CSSで表現できるコピペ可能なHTMLスニペットまとめ

    ウェブサイトにおいてユーザーが特に操作する機会の多い部分のひとつが、ナビゲーションメニューでしょう。モバイル端末でのアクセスが増えているいま、より使いやすいスタイルが求められるようになっています。 今回は HTMLCSS、わずかな JavaScript で実装できるさまざまなナビゲーションメニュー用コードスニペットをまとめてご紹介します。アコーディオン型やサークル型、ドロップダウンやフルスクリーン、水平型、モバイル用、Off-Canvasメニューなどをスタイル別に100個まとめています。あらゆるWebデザインプロジェクトで使えるスニペットを、きっと見つけることができるでしょう。 ハンバーガーメニューはもう古い!代わりに使えるモバイル用ナビメニュー5つまとめ コンテンツ目次 1. アコーディオンメニュー 2. サークル型ナビメニュー 3. ドロップダウンメニュー 4. フルスクリーンメ

    ナビメニュー100連発!CSSで表現できるコピペ可能なHTMLスニペットまとめ
  • クールなグラデーションのカラーコードやCSSコードを確認できるサイトまとめ - NxWorld

    近年見かける機会が多くなった、クールなグラデーションカラーを知りたいときに便利なサイトのまとめです。 いずれもあらかじめグラデーションカラーの一覧が用意されているので、それらから選んでカラーコードやCSSで実装するためのコードを確認することができ、さらにサイトによってはそれを自分好みに調整してからコード出力したり、デザインで使える素材でダウンロードできるようにもなっています。 uiGradients ページ左右に配置されている矢印でカラーを切り替えていく他、もっと一覧化された状態で見たい場合は左上にある「Show all gradients」から確認でき、キーカラーを選んでフィルター表示にすることもできます。 カラーコードは画面中央上部に記載、その他のオプションについては画面右上にそれぞれ配置されており、角度変更(クリックの度に角度が変わります)・CSSコードの出力・JPG形式でのダウンロ

    クールなグラデーションのカラーコードやCSSコードを確認できるサイトまとめ - NxWorld
  • 株式会社トランスソフト

    About us- トランスソフトについて- 弊社の営業スタイルは 開発コンセプト「小さく産んで大きく育てる」を キーワードに、金融機関の“痒い所に手が届く”システムの 開発・提供を目指しています。 VIEW MORE Service― 事業内容 ― 3つの事業を軸に情報セキュリティを意識した、設計技術と長年にわたる技術蓄積により、 最適なソリューションを提案します。 金融機関向けSI(システムインテグレーション)事業 ユーザー企業向け システム開発 SI 企業向け支援 VIEW MORE

    ricopinx
    ricopinx 2017/04/20
    ※クエリー文はcssではなくhtml側で行うものなので、cssそのもののファイル名は変更せず、HTML内のcssのURLにクエリー文字を付けるだけ。cssの内容を変更した際には、必ずhtml側も修正する必要がある。
  • CSSで背景画像のシームレスパターンを無限スクロールさせるアニメーション | 9ineBB

    CSSのアニメーションを使って、シームレスなパターンで背景を無限スクロールさせる 背景画像がシームレスパターンの時に使えるテクニックです。シームレスパターンなパターンをbackgroundで背景画像に利用し、background position で背景画像を動かすアニメーションを繰り返すものです。背景画像は自動でrepeatで敷き詰められるのを利用しています。 ー CODE ー HTML <section> <h1>BACK GROUND SCROLL</h1> </section> CSS body { margin: 0; padding: 0; } section { height: 300px; margin: 100px 10px; background-image: url(bg.png); -webkit-background-size: 500px; background

    CSSで背景画像のシームレスパターンを無限スクロールさせるアニメーション | 9ineBB
  • <li>タグ(リスト)を入れ子にして階層化させる | チョイ録

    HTMLでプルダウンメニューなど、<li>タグを入れ子にして階層化させることは多いので、<li>タグを使った入れ子の基的なコーディングについて紹介します。 <li>タグの入れ子について リスト項目を階層化するのに便利な入れ子ですが、記述にはルールがあります。 入れ子にするリストは<li>内に記述する 入れ子にするリストは親リストの外に記述するのではなく、親リストの<li>タグ内に記述します。 下記の「入れ子にできるタグ」も親リスト内に記述し階層化します。 例)pを子リストに追加する場合:<li><p>~</p></li> liの入れ子にできるタグ ul、ol、dl、div、h1~h6、p、span、img、strongなど 入れ子のコードサンプル 入れ子で間違い易いのは、子リストを追加する親リストの開始タグ(濃いグレー)の部分になります。 【HTML】 <ul> <li>親リスト1 <u

    <li>タグ(リスト)を入れ子にして階層化させる | チョイ録
  • ブロック要素とインライン要素の違い (kuruman.org > 駄的HTML改善計画)

    ブロック要素とインライン要素の違いは非常に重要にも関わらず、気にも留めずにHTMLを記述している人が多く見受けられます。 ここできちんと理解してしまいましょう。 基事項 ブロック要素って何だ? ブロック要素とは、 文書の骨組み です。 例えば見出しを表す <h1> や、段落を表す <p> などがブロック要素です。 これらは視覚表現をするUA(例えばMSIEやMozillaなど)で、特にスタイルを指定しない場合、幅を画面いっぱいに取り、前後が改行されます。 簡単に言ってしまうならば、ブロックを作り出します。 これらの中には大抵他のブロック要素や、インライン要素を含む事が出来ます。 ブロック要素の一覧はインライン要素を知ってから説明することにしたいと思います。 インライン要素って何だ? inlineを直訳すると「行内」であるとおり、インライン要素は 行の中の文字に論理的な意味を持たせたりしま

  • floatで横並びさせたリストをセンタリングするときの方法 | 株式会社LIG(リグ)|DX支援・システム開発・Web制作

    ページネーションなどのlistをfloatさせた要素をセンタリングするときのメモです。 ナビゲーションやページネーションなどでliタグをfloatさせて横並びにすることがよくあると思います。 しかし、センタリングしようと思っても「margin:0 auto;」も「text-align:center;」も効きませんよね? こんなとき、「position:relative;」を使うと上手くいくようです。 コード HTMLコード <div id="menu"> <ul> <li>メニュー1</li> <li>メニュー2</li> <li>メニュー3</li> <li>メニュー4</li> <li>メニュー5</li> </ul> </div> CSSコード div#menu { position: relative; overflow: hidden; } div#menu ul { float

    floatで横並びさせたリストをセンタリングするときの方法 | 株式会社LIG(リグ)|DX支援・システム開発・Web制作
  • CSSで作ったドロップダウンメニューのドロップの動きいろいろ

    CSSだけで作ったドロップダウンメニューのドロップの動きをいろいろと考えてみました。ちょっとしたことですが、目を引く動きはサイトの印象をよくするかもしれないです。 では解説していきます。まずはHTMLからです。 <ul id="normal" class="dropmenu"> <li><a href="#">menu</a> <ul> <li><a href="#">submenu</a></li> <li><a href="#">submenu</a></li> <li><a href="#">submenu</a></li> <li><a href="#">submenu</a></li> </ul> </li> <li><a href="#">menu</a> <ul> <li><a href="#">submenu</a></li> <li><a href="#">submenu

    CSSで作ったドロップダウンメニューのドロップの動きいろいろ
  • 背景デザインを楽しくする、参考にしたい HTML/CSS スニペットまとめ

    CSS3 が主要ブラウザに対応したことから、これまではむずかしかったアイデアやコンセプトも、手軽にスタイリングできるようになってきています。今回は、背景デザインにスパイスを加えるエフェクト用コードスニペットを、コード共有サイト CodePen からピックアップしまとめています。 コピペで利用できる手軽なものから、これってどう表現するんだろうという面白スタリングまで、注目をあつめるテクニックを中心に揃えています。デザイン制作に悩んだときに活用してみてはいかがでしょう。 詳細は以下から。 背景デザインを楽しくする、参考にしたい HTML/CSS スニペットまとめ ※ デモが動かないときは、「RETURN」ボタンをクリックすることで、再読み込みされます。 ※ ページの読み込みに多少時間がかかります、すこし待ってからスクロールするとスムーズに表示されます。 Pure CSS Cinema Effe

    背景デザインを楽しくする、参考にしたい HTML/CSS スニペットまとめ
  • 【第2弾】少しのコードで実装可能な20のCSS小技集

    【第2弾】少しのコードで実装可能な20のCSS小技集はるか6年前に書いた記事「少しのコードで実装可能な20のCSS小技集」の第二弾です!(スパンながっ)簡単なコードで素敵な効果が得られる小技をダダっと紹介してみます。前回に引き続き、初心者さんからベテランさんまで参考にしてみてください! 少しのコードで実装可能な 20 の CSS 小技集 目次画像を丸く表示1 線のテーブル1 線の水平線線色を指定しなくても文字色と同一色になる複数の背景画像背景画像のサイズWeb フォントを使う画像をモノクロやセピアにするリストマーカーの色を変更グラデーショングラデーションボーダーフラットだけど立体的ボタン画像をぼかすレスポンシブに対応した動画要素を真ん中に配置カンマで分けたリスト文字を縦書きフォーカスすると伸びるテキストボックスiOS でボタンのスタイルをリセット線のオフセット設定HTMLCSS の全

    【第2弾】少しのコードで実装可能な20のCSS小技集
  • リンク付き画像をリストに入れたときにできる変なマージンの回避法 World of granshe.

    画像をリストタグとaタグでマークアップしたものをブラウズすると、変な余白が開く現象があります。 長年(過去2回ですが)苦しんできたこの現象の原因と回避法が分かりました。のでメモ。 HTMLバージョンXHTMLTransitional、XML宣言あり。 タグの状況liタグの中にaタグを入れその中にimgタグを入れている。 CSSの状況ul、li、img共にマージンはゼロ。list-styleはnoneに。 表示: marginを0にしているにもかかわらず、Firefox、Safari、IEで変なマージンがでる。 1.プレーンな状態。 CSSに何も指定していない状態。 ちなみにOperaはこの状態でもマージンがないです。 2.CSSで、ul、li、a、imgタグのmarginを0に。 margin: 0;の指定があるにもかかわらず、変な余白が。 3.imgにdisplay: block;を指定

  • 指定した要素の直下の子要素にだけCSSを適用する | Blog

  • CSSセレクタ20個のおさらい

    CSSセレクタって意外と分かっていなかったりするので勉強ついでにまとめてみました。比較的実用的かなと思うものを20個紹介していきます。いい復習になればと思います。 CSSセレクタはスタイルを適用する対象を指定するものです。普段何気なく使っているclassやidなどもセレクタの1つです。 属性や要素といった堅苦しい用語が出てきますので図で簡単に説明します。 私のように基礎から勉強していないと、要素や属性と聞いてもピンときませんが、知ってみるとなんてことはないですね。 また、IEが対応しきれていないCSS3のセレクタもありますが、IE6~8でもCSS3セレクタが利用できるツールの決定版「Selectivizr」 で紹介したようにCSS3セレクタはie対策も容易なのでぜひお試しください。 SelectivizrはCSSを外部ファイルで指定した方がいいのですが、今回のサンプルはCSSを外部ファイル

    CSSセレクタ20個のおさらい
    ricopinx
    ricopinx 2016/09/16
    >とか:first-childとか
  • CSSレイアウトを学ぶ

  • CSSで14px/1.4の部分の記述は正しい?

    とあるサイトのCSSを見ていたら次のような記述がありました。 font:normal normal normal 14px/1.4 "MS Pゴシック", "Osaka", "sans-serif"; normalが3つ続くのも謎ですが、フォントのサイズと思える部分で分数のようにして使われています。 14px/1.4で10pxのこと? このような記述はできるのでしょうか? そのサイトはCSSを使いこなせるような人が作っているようでデザインや文字などはとても読みやすくできています。

    CSSで14px/1.4の部分の記述は正しい?
  • 横並びのリストを中央寄せにする5つの方法 - CSSテクニック - acky.info

    HTMLコード <ul class="float"> <li>1</li> <li>2</li> <li>3</li> </ul> <ul class="inline"> <li>1</li> <li>2</li> <li>3</li> </ul> <ul class="inline-block"> <li>1</li> <li>2</li> <li>3</li> </ul> <ul class="table-cell"> <li>1</li> <li>2</li> <li>3</li> </ul> <ul class="flex"> <li>1</li> <li>2</li> <li>3</li> </ul> CSSコード ul { list-style-type: none; padding-left: 0; } li { background: #CCC; width: 50px;

    横並びのリストを中央寄せにする5つの方法 - CSSテクニック - acky.info
  • http://msugai.fc2web.com/web/CSS/font.html

    ricopinx
    ricopinx 2016/07/19
    Times New Romanの比較