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:
[jQuery] プラグインを使わずに横からスライドインするメニューを簡単に作る
Modified 2015-10-17 更新情報 メニュースライドイン時スクロールできるサンプルを追記しました。コメント欄での返答で誤りがあった箇所を削除しました。 コンテンツ 部分をクリックしても閉じることができるようにするコードを追記しました。 スマートフォンやレスポンシブサイトなどでよく見かける、メニューボタンをクリックするとコンテンツを押し出してメニューがスライドインしてくる動きを jQuery と CSS で作る方法です。やってみると意外と簡単なコードで作ることができます。 サンプルデモとダウンロード ◆ 横からスライドインするメニュー demo｜memocarilog このサンプルコードは以下よりダウンロードできます。 ◆ SaoriMiyazaki/SlideIn_Menu HTMLコード スライドインしてくるメニューとメニューボタンの記述をします。 <!-- スライドメニュ
![[jQuery] プラグインを使わずに横からスライドインするメニューを簡単に作る](https://cdn-ak-scissors.b.st-hatena.com/image/square/90e0d5fd2040a360e7449fe29a2efc39e3dd577c/height=288;version=1;width=512/https%3A%2F%2Fmemocarilog.info%2Fwp-content%2Fuploads%2F2014%2F11%2FjQueryicon.png)
CSSボタンを演出する155個のHoverエフェクトまとめ
Bruno Profile Work 制作の方針について Brunoが生み出すWebサイトは、文章や写真を活かすためのデザインをご提供します。訪問者へアピールするためのコンテンツがメイン。この意識のもと、適切な見せ方を追求しながら制作しております。 制作料金 基本WordPressサイトの制作となりますが、ご希望に合わせてHTMLの静的サイトの制作ももちろんお請けさせていただきます。また、デザインだけやコーディングだけといった制作工程単位でのご依頼も対応しております。 よくある質問 BrunoのWebサイト制作では、できるだけクライアント様にご不安を与えることなく、お問い合わせ時から制作完了時、その後の運用までサポートさせていただいておりますが、その際によく頂くご質問についてご紹介致します。
ナビメニュー100連発！CSSで表現できるコピペ可能なHTMLスニペットまとめ
ウェブサイトにおいてユーザーが特に操作する機会の多い部分のひとつが、ナビゲーションメニューでしょう。モバイル端末でのアクセスが増えているいま、より使いやすいスタイルが求められるようになっています。 今回は HTML と CSS、わずかな JavaScript で実装できるさまざまなナビゲーションメニュー用コードスニペットをまとめてご紹介します。アコーディオン型やサークル型、ドロップダウンやフルスクリーン、水平型、モバイル用、Off-Canvasメニューなどをスタイル別に100個まとめています。あらゆるWebデザインプロジェクトで使えるスニペットを、きっと見つけることができるでしょう。 ハンバーガーメニューはもう古い！代わりに使えるモバイル用ナビメニュー5つまとめ コンテンツ目次 1. アコーディオンメニュー 2. サークル型ナビメニュー 3. ドロップダウンメニュー 4. フルスクリーンメ
クールなグラデーションのカラーコードやCSSコードを確認できるサイトまとめ - NxWorld
近年見かける機会が多くなった、クールなグラデーションカラーを知りたいときに便利なサイトのまとめです。 いずれもあらかじめグラデーションカラーの一覧が用意されているので、それらから選んでカラーコードやCSSで実装するためのコードを確認することができ、さらにサイトによってはそれを自分好みに調整してからコード出力したり、デザインで使える素材でダウンロードできるようにもなっています。 uiGradients ページ左右に配置されている矢印でカラーを切り替えていく他、もっと一覧化された状態で見たい場合は左上にある「Show all gradients」から確認でき、キーカラーを選んでフィルター表示にすることもできます。 カラーコードは画面中央上部に記載、その他のオプションについては画面右上にそれぞれ配置されており、角度変更（クリックの度に角度が変わります）・CSSコードの出力・JPG形式でのダウンロ
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
<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
ブロック要素とインライン要素の違い (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
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
背景デザインを楽しくする、参考にしたい HTML/CSS スニペットまとめ
CSS3 が主要ブラウザに対応したことから、これまではむずかしかったアイデアやコンセプトも、手軽にスタイリングできるようになってきています。今回は、背景デザインにスパイスを加えるエフェクト用コードスニペットを、コード共有サイト CodePen からピックアップしまとめています。 コピペで利用できる手軽なものから、これってどう表現するんだろうという面白スタリングまで、注目をあつめるテクニックを中心に揃えています。デザイン制作に悩んだときに活用してみてはいかがでしょう。 詳細は以下から。 背景デザインを楽しくする、参考にしたい HTML/CSS スニペットまとめ ※ デモが動かないときは、「RETURN」ボタンをクリックすることで、再読み込みされます。 ※ ページの読み込みに多少時間がかかります、すこし待ってからスクロールするとスムーズに表示されます。 Pure CSS Cinema Effe
【第2弾】少しのコードで実装可能な20のCSS小技集
2019年5月17日 CSS はるか6年前に書いた記事「少しのコードで実装可能な20のCSS小技集」の第二弾です！（スパンながっ）簡単なコードで素敵な効果が得られる小技をダダっと紹介してみます。前回に引き続き、初心者さんからベテランさんまで参考にしてみてください！ ↑私が10年以上利用している会計ソフト！ 目次 画像を丸く表示 1本線のテーブル 1本線の水平線 線色を指定しなくても文字色と同一色になる 複数の背景画像 背景画像のサイズ Webフォントを使う 画像をモノクロやセピアにする リストマーカーの色を変更 グラデーション グラデーションボーダー フラットだけど立体的ボタン 画像をぼかす レスポンシブに対応した動画 要素を真ん中に配置 カンマで分けたリスト 文字を縦書き フォーカスすると伸びるテキストボックス iOSでボタンのスタイルをリセット 線のオフセット設定 HTML・CSSの全
リンク付き画像をリストに入れたときにできる変なマージンの回避法 World of granshe.
画像をリストタグとaタグでマークアップしたものをブラウズすると、変な余白が開く現象があります。 長年（過去2回ですが）苦しんできたこの現象の原因と回避法が分かりました。のでメモ。 HTMLバージョンXHTMLTransitional、XML宣言あり。 タグの状況liタグの中にaタグを入れその中にimgタグを入れている。 CSSの状況ul、li、img共にマージンはゼロ。list-styleはnoneに。 表示： marginを0にしているにもかかわらず、Firefox、Safari、IEで変なマージンがでる。 １．プレーンな状態。 CSSに何も指定していない状態。 ちなみにOperaはこの状態でもマージンがないです。 ２．CSSで、ul、li、a、imgタグのmarginを0に。 margin: 0;の指定があるにもかかわらず、変な余白が。 ３．imgにdisplay: block;を指定
CSSセレクタ20個のおさらい
CSSセレクタって意外と分かっていなかったりするので勉強ついでにまとめてみました。比較的実用的かなと思うものを20個紹介していきます。いい復習になればと思います。 CSSセレクタはスタイルを適用する対象を指定するものです。普段何気なく使っているclassやidなどもセレクタの１つです。 属性や要素といった堅苦しい用語が出てきますので図で簡単に説明します。 私のように基礎から勉強していないと、要素や属性と聞いてもピンときませんが、知ってみるとなんてことはないですね。 また、IEが対応しきれていないCSS3のセレクタもありますが、IE6～8でもCSS3セレクタが利用できるツールの決定版「Selectivizr」 で紹介したようにCSS3セレクタはie対策も容易なのでぜひお試しください。 SelectivizrはCSSを外部ファイルで指定した方がいいのですが、今回のサンプルはCSSを外部ファイル
横並びのリストを中央寄せにする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;
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【HTML】CSSの変更内容を確実に反映させる！ | トランスソフトだより
指定した要素の直下の子要素にだけCSSを適用する | Blog
CSSレイアウトを学ぶ
CSSで14px/1.4の部分の記述は正しい？
http://msugai.fc2web.com/web/CSS/font.html