【CSS】ぷるぷる動くボタンなど、コピペで使えるアニメーションボタン10種類
押したくなるボタンはどれ？ ぷるぷる動くボタン① ぷるぷる動くボタン② 上下に揺れるボタン 左右に揺れるボタン 上下左右に揺れるボタン もっちり動くボタン ぺこぺこ凹むボタン ぱつんと跳ねるボタン ぶるりと震えるボタン ドキドキしてるボタン まずは基本のボタンのソースコード ただのボタン box-shadowで影を落としたシンプルなボタンです。 文字の前のマークは「Font Awesome」のアイコンフォントを使用しています。 HTMLコード <a href="リンク先のURL"><span class="button-simple">ただのボタン</span></a> CSSコード .button-simple { position: relative; font-weight: bold; padding: 5px 15px; margin: 0px 5px; border-radiu
画像を丸く円形にくり抜いて表示するCSS - スタイルシートTipsふぁくとりー
《2017年7月3日 20:00 公開/更新》 画像を丸く円形にくり抜いて表示するCSS [イメージ] スタイルシート(CSS)を使って、四角い画像を丸く表示させる書き方を紹介。わざわざ画像を直接加工しなくても、CSSを使うだけで丸く(円形に)表示できます。画像を丸くカットするだけでなく、画像の周囲に丸い枠線を加えて縁取りして表示することもできます。 画像を直接加工することなくCSSで丸く円形にくり抜いて表示したい 四角い画像をスタイルシートで丸く円形に表示させる方法2通り 1. 四角い画像を丸く円形にくり抜いて表示する方法(画像の縦横比を崩しても構わない場合) 2. 四角い画像を丸く円形にくり抜いて表示する方法(画像の縦横比を維持したい場合) 2B. 縦横比を維持したまま円形で表示した上で、枠線を付加したい場合 画像を直接加工することなくCSSで丸く円形にくり抜いて表示したい 四角い画像
CSS3: クラス・id 名に特定文字列を含む要素を指定する方法 | siro:chro
CSS クラス・id 名に規則性があれば正規表現を利用し、特定文字列を対象としたスタイル指定が有効です。 今回は、クラス・id 名に 特定の文字が含まれる要素を指定 する記述方法を説明したいと思います。 部分一致 クラス名に 「xxx- が含まれる」 「div 要素」 の 「背景色に red」 を指定する記述は以下のようになります。 [code] div[class*=”xxx-“] { background: red; } [/code] 前方一致 + 部分一致 クラス名の 「先頭が xxx- で始まる」 「div 要素」 の 「背景色に red」 を指定する記述は以下のようになります。 [code] div[class^=”xxx-“], div[class*=” xxx-“] { background: red; } [/code] 基本的に class^= の 前方一致 により目的
1行追加でOK！CSSだけで画像をトリミングできる「object-fit」プロパティー
2018年4月5日 CSS 画像の一覧を表示する時などは、画像のサイズが統一されていると並べて表示させてもすっきりキレイに整って見えますが、必ずしもサイズが同じとは限りません。かといってPhotoshopを使ってすべての画像をリサイズできない…ということもあるでしょう。そんな時はCSSでトリミングすると楽です！今回は「object-fit」というプロパティーを使って、画像の縦横比を保ちつつトリミングする方法を紹介します。 ↑私が10年以上利用している会計ソフト！ 画像を中央の位置でトリミングする まずはこの縦長の画像、横長の画像を並べ、縦横250pxの正方形の形で表示させてみましょう。 img { width: 250px; height: 250px; } CSSでこのように画像に対してサイズを指定すると… こんな感じでグチャッとつぶれて表示されちゃいます…。 そこで画像に対して obj
CSSでドット柄（水玉）を作る方法 | コトダマウェブ
円形グラデーションというのはこんな感じのグラデーションです。 ここでは円形のグラデーションをスタイルシートで実装する方法について見ていきます。 線形グラデーションについて知りたい方は下記の記事もご参照ください。 radial-gr... radial-gradient関数を理解していないと、この先の話がよく分からないと思いますので、気をつけてくださいね。 それでは、最初にドットをひとつだけ作ってみます。 See the Pen dot01 by kenichi (@ken81) on CodePen. まずは、分かりやすくするために要素のサイズとbackground-sizeの値を同じにしました。radial-gradientを使って中心の色を黄色に、外側の色を青に指定してあります。 余談ですが、正方形の要素にぴったり収まる円を作るには、radial-gradientでグラデーションの終了
z-index再入門 | 第1回 z-indexの仕組み
次のようなケースでは、冒頭のサンプルのような意図しない重なりになる可能性が高いため注意が必要です。 positionプロパティの値をrelative、absoluteにし、かつz-indexの値をauto以外の整数値にしたとき positionプロパティの値をfixed、stickyにしたとき なぜなら、上記の条件下では、スタック文脈というものが形成されるからです。次に、スタック文脈を解説します。 スタック文脈とスタックレベル スタック文脈（stacking contexts）、スタックレベル（stack level）という概念は、z-indexを扱う上でとても重要なものです。 スタック文脈 スタック文脈とは、ある条件を満たした要素によって形成される階層構造（文脈）のことです。 スタック文脈を形成する条件は前述した通りですが、例えば、position: absoluteとz-indexに整
iframeのレスポンシブ対応はもの凄く簡単 - Webデザイン・プログラミングオンライン個別指導のAkros
今日は、意識してあまり使わない要素でもある「iframe」要素についてのお話しになります。 html5になってからも少ないですが、使われる機会があるiframe要素ですが、皆さんはどんな時に使ったりしますか？ よくある例としては、Google MapやYoutube動画の埋め込みがあると思いますが、そのときのレスポンシブ対応について、実はものすごく簡単に対応できますので、知らない方に向けての記事になります！ iframeは固定？ Google Mapを例にiframe要素を見てみると、「埋め込みサイズ」を決める必要があります。 そのため、レスポンシブ（＝デバイス幅による動的変化）はできないかも？と思ってる方が意外と多いようです。 確かに、属性でサイズを指定しただけですと「固定」となりますが、CSSを使うことによってレスポンシブ対応は可能です。 ブラウザによって多少異なるかもしれませんが、基
【CSS】テキストの左右にボーダーを入れる方法
表示結果 Dummy Text 解説 display: flex;(CSS:4行目) p要素をflexコンテナ化することで、内包するテキストがflexアイテムになります。 align-items: center;(CSS:5行目) flexアイテム（p要素内のテキストと、before,afterで生成された疑似要素）を上下中央に配置。 flex-grow: 1;(CSS:9行目) 左右の疑似要素（ボーダー）の幅を、空いているスペースいっぱいまで広げています。 height,background(CSS:10,11行目) heightでボーダーの太さを、backgroundで色を指定しています。 display: block;(CSS:12行目) 疑似要素は、displayプロパティにblockやinlineを指定しないとIEで表示されません。 margin-○○: .4em;(CSS:15
[CSS]高さが分からない要素やテキストを中央寄せに配置するスタイルシートのまとめ
テキストやdiv要素など、高さが分からない要素を外側の容器の高さが不明でも、上下・左右・上下左右・ビューポートの上下左右の中央寄せに配置するCSSのテクニックを紹介します。 イラスト: Girls Design Materials 2016年1月12日にIEの古いバージョンのサポートが終了し、Windows 7/8はIE11、VistaはIE9がサポートブラウザになりました。Vistaはアレなので、実質IE11を考えてWeb制作をすればよいことになります。 参考: Internet Explorer サポートポリシー変更の重要なお知らせ そんなIE11時代、そして万が一のIE9を考慮した中央寄せに配置テクニックを紹介します。 テキストや要素を左右の中央寄せに配置 テキストや要素を上下の中央寄せに配置 テキストや要素を上下左右の中央寄せに配置 テキストや要素をビューポートの上下左右の中央寄せ
![[CSS]高さが分からない要素やテキストを中央寄せに配置するスタイルシートのまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/e06dab83915ff3fa91a0d356ebe7f551b51c01f7/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201601%2F2016012101.png)
CSSすら不要！detailsとsummaryタグで作る簡単アコーディオン
2018年11月14日 CSS, HTML 長い文章や補足説明をアコーディオン（折りたたみ）にしたい時ってありますよね。そんな時に使える details と summary タグを紹介します。CSSなしでも実装できますが、CSSを加えてより素敵な表現をする方法も挑戦しましょう！ detailsとsummaryタグの基本的な使い方 details タグで囲んだ部分がアコーディオンとして設定されます。その中に summary タグで最初から表示させておきたい部分を囲めば完成！ summary タグの部分をクリックすると、詳細文が表示されます。 HTML <details> <summary>Adobe Photoshop</summary> 画像編集ソフト。写真やイラスト、3Dアートワークの作成、webサイトやモバイルアプリのデザイン、動画編集や描画などはPhotoshopで。 </detai
CSSリセット、2019年におすすめのカスタマイズ方法
Webサイトを制作する際、CSSリセットを使用されている人が多いと思います。Eric MeyerのCSS Resetをはじめ、Normalize.css、Sanitize.css、そして最近ではReboot.cssが登場しました。 Eric MeyerのCSS Resetをベースに、marginやpaddingなどのスペースを上か下かのどちらかに統一できるようにカスタマイズされたCSSリセットを紹介します。 My CSS Reset/Base 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 CSSリセットについて margin, padding, borderのCSSリセット フォントのCSSリセット レイアウトとbox-sizingのCSSリセット 特定要素のCSSリセット 属性と状態のCSSリセット スクリーンリーダー専用の
スタイルシートで画像を円形に表示する方法 | Web技術指南書
デモ See the Pen 正方形画像の円形切り抜き by JaSTIN (@JaSTIN) on CodePen.24295 しかし切り抜く対象の画像が長方形の場合、上記の方法では楕円形で切り抜かれてしまいますのでそのままでは使用することが出来ません。デモ See the Pen 長方形画像の円形切り抜き error by JaSTIN (@JaSTIN) on CodePen.24295 長方形画像の場合（background-image:で設定する方法） <img>は使用せず、background-image:プロパティに切り抜きたい画像パスを設定したdivボックスを作成します。HTMLマークアップ
Font AwesomeをCSSのcontentプロパティで使用する
ホーム ブログ CSS Font AwesomeをCSSのcontentプロパティで使用する Font AwesomeをCSSのcontentプロパティで使用する このサイトでもアイコンとして利用しているFont Awesome 通常Font Awesomeはi要素を追加しますが、CSSのcontentプロパティに記述することでHTMLを変更することなく使用できます。 例：Bootstrap 3 のパンくずで、/を右矢印 に変更する Unicodeは F105 .breadcrumb > li + li:before { content: "\f105"; font-family: FontAwesome; } 簡単な記述で、ご覧のとおり
CSS3で斜線・ストライプなどの背景装飾のコードまとめ-コピペですぐ使える！
みなさんはCSS3での装飾はどれくらいしていますか？ 僕はモダンブラウザのシェアが最近上がってきているので、PCサイトでも気にせず使ったりしています。 ちょっとしたコードでPhotoshopを使わずに簡単に装飾出来るのでズボラな僕にはピッタリです。 しかし！毎回コードを書くのは面倒くさい･･･ ということで、すぐにコピペして使えるようにまとめて見ました！良ければ使ってみて下さい！ 斜めストライプ(斜線)による装飾 ボーダー(横線)による装飾 ストライプ(斜線)による装飾 四角(ブロックパターン)による装飾 気が向いたらどんどんサンプルを増やしていきます！ 斜線による装飾 SAMPLE 1 background-color: #F9F2B3; background-image: -webkit-gradient(linear, 0 0, 100% 100%,color-stop(.25, #
CSSだけで実装できるボタンアニメーション（マテリアルデザイン用）
この記事では、CSSだけを使ってボタンにアニメーションをつける方法を解説していきます。 1. 浮き上がるような動き（影の変化） 「ホバー（カーソルを当てること）により浮き上がる」という単純な動きであれば、ものすごく簡単に実装できます。実際にCSSを紹介していきます。 #fab {/*円の部分*/ display: block; width: 56px;/*幅*/ height: 56px;/*高さ*/ background: #03a9f4;/*背景色*/ text-align: center;/*中央寄せ*/ border-radius: 50%;/*角丸く*/ transition: .3s;/*滑らかな動きに*/ box-shadow: 0 2px 2px 0 rgba(0,0,0,.12), 0 2px 2px 0 rgba(0,0,0,.24);/*影*/ } #fab:hove
CSSで作る！押したくなるボタンデザイン100（Web用）
.btn-square { display: inline-block; padding: 0.5em 1em; text-decoration: none; background: #668ad8;/*ボタン色*/ color: #FFF; border-bottom: solid 4px #627295; border-radius: 3px; } .btn-square:active { /*ボタンを押したとき*/ -webkit-transform: translateY(4px); transform: translateY(4px);/*下に動く*/ border-bottom: none;/*線を消す*/ }
CSS の Flexbox で、要素の左右中央寄せ、均等割り、右寄せ（ justyify-content ）の方法｜レンタルサーバーナレッジ
Flexbox で中央寄せにする方法 flex-container に「 justyify-content 」プロパティを使用します。 各プロパティの値は下記の通りで、例えば中央寄せにしたい場合は、center を指定します。 サンプルコード <!DOCTYPE html> <html lang="ja"> <head> <title>Flexboxテスト</title> <meta charset="UTF-8"> </head> <style> .container{ display: flex; width: 100%; background-color: #aaa; /*並び順*/ /* flex-start：左寄せ（デフォルト） flex-end：右寄せ center： 中央寄せ space-between：残り余白の均等割り space-around：左右余白 ＋ 均等割り *
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
codit.work - このウェブサイトは販売用です！ - codit リソースおよび情報
【jQuery・CSS】jQueryとCSSで作るアコーディオンメニュー
UIkit
