タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
こんにちは。フロントエンド開発で一番好きなのはCSS、Mhousetreeです。 普段はCSSアニメーションで遊んだりしています。 （頑張って作ったのでよかったら見てね！！！！！） 何かと使う中央揃え。なんとなく覚えているものを順番に試して中央に来たらOK！と思っていませんか？ 現在ではかなりいろんな種類の方法があり、それぞれ異なる特徴を持っています。 この記事ではCSSでよく使う（気がする）レイアウトパターンの中で、センタリングに関するものをまとめました！ まえがき この記事では各実例を独自の指標で評価して示しています。 長い記事になる予定なので、部分的に読まれる場合の参考になさってください。 実用性：記述量や例外（中身の文章が長い・改行がある要素など）への対応力など。 よく見る度：コーディングしていて出てくる頻度(n=1)。 お前しか勝たん度：独自性が強い・他の方法では代替しづらいもの
【CSSサンプル】ちょっと言いにくい話なんですけど…【小ネタ】 - Little Strange Software
どうも！LSSです！！ このブログで、 などの「最初は表示されていないけど、ユーザーアクションによって表示される隠し文字」ネタを、これまでもいくつかご紹介してきました。 今回の記事のものも、その一種と言えそうですが、ちょっと変わり種です^^ ちょっと言いにくい話なんですけど… コード ざっくりコード解説 あとがき ちょっと言いにくい話なんですけど… ちょっと、言いにくい話なんですけど、実は…ただこれだけの小ネタなんですよね。あえてぼかしておきますが、知りたい人はボカシ部分にマウスカーソルをあわせてみてください。 コード <style><!-- .txsd{ color:transparent; text-shadow:0px 0px 10px #000; transition:0.5s; } .txsd:hover{ text-shadow:0px 0px 0px #000; } --><
【CSSサンプル】亀の甲羅のような模様 - Little Strange Software
どうも！LSSです！！ 【CSS】CSSオンリーでレンガ模様・改善版 で、conic-gradientを使う事で複雑な繰り返し模様が作れそう、と味をしめました。 四角ベースの模様ならかなり自由に作れそうですが、conic-gradientらしさを活かしつつ、違う繰り返し模様も「ずらし」を使う事で実現できるのでは？と試みたところ、こんな感じのものが出来ました。 亀の甲羅のような模様 コード 模様の構造について 亀の甲羅のような模様 repeating-conic-gradient を使って、亀の甲羅のような模様を描いてみました。 実際のところ、「Ｙ字型」を２段分、ずらしながら並べている、という感じです。 コード <style> .turtle{ padding:0.6em; background: repeating-conic-gradient(from 40deg at 50% 75%,
【CSSサンプル】２つの四角形に囲まれたボックス - Little Strange Software
こんな風に、２つの色の違う四角い枠線がズレて配置されたようなボックスを作ってみました！ 実はこれ、枠線じゃなくて背景だったりします。 でも、枠の内容のサイズに応じて伸縮しても支障なく表示されますよ^^ どうも！LSSです！！ 実は以前からCSSサンプルのネタとして↑のような枠を思いついていたんですが、 border outline box-shadow のどれを使ってもしっくりこなくて、伸ばし伸ばしになっていました^^; …が、ふっと別の方法を思いついたのでやってみたところ、うまくいったのが今回のサンプルとなります！ コード 枠線の正体 アニメ―ションもつけてみました 他にも改変のやりようはあります コード <style><!-- .dblsq{ padding:15px; background-image:linear-gradient(red,red),linear-gradient(
【CSSサンプル】カーソルを載せると動くグラデーションバー - Little Strange Software
どうも！LSSです！！ また、なんか謎のCSSサンプルを作ってみました。 カーソルを載せると動くグラデーションバー コード 色変更・移動量変更・変化時間変更について あとがき カーソルを載せると動くグラデーションバー カーソルを載せると動くグラデーションバー ↑にマウスカーソルを載せてみてください。（スマホの方はタップ） コード <style><!-- .grdbar{ --gc1:#aaaaee; --gc2:#bbbbee; background-image:repeating-linear-gradient(135deg,var(--gc1) 0%,var(--gc1) 3%,var(--gc2) 6%,var(--gc1) 12%); background-position:3000px 0px; border-radius:5px; padding:0px 10px; trans
【CSSサンプル】text-shadowが霧散するサンプルを作ってみました【小ネタ】 - Little Strange Software
どうも！LSSです！！ 【CSSサンプル】ふりむきカーン【ほぼジョークｗ】 - Little Strange Software でoutlineのオーラが広がって消えていくものを作りましたが、 「text-shadowとanimationを使えば、文字がまとったオーラが動く様子が表現できるのでは？」 と、試してみました^^ text-shadowが霧散するサンプル コード ちょびっとコード解説 text-shadowが霧散するサンプル さぁ、夏のあつさを、ふきとばそう！ コード <style><!-- @keyframes txtshda{ 0%{text-shadow:0px 0px 10px #ff0000;} 70%{text-shadow:0px 0px 10px #ff0000;} 100%{text-shadow:0px 0px 100px #ff0000;} } .txtsh
【CSSサンプル】サンタさんへの手紙【小ネタ】 - Little Strange Software
どうも！LSSです！！ 「クリスマスカラーを使った、CSSサンプルネタをやってみたい」と思い、やってみたらこうなりました。 サンタさんへの手紙 コード 没案 サンタさんへの手紙 Dear サンタさん 今年のクリスマスプレゼントは Core i9のCPUが欲しいです。 よろしくお願いいたします。 コード <div style=" width: 300px; height: 200px; padding: 20px; border-radius: 25px; background-image: linear-gradient(to bottom right,#ffd900,#ffffff,#ffd900), repeating-linear-gradient(to bottom right,#cc0000 0px 20px,#00aa00 21px 40px); background-clip
【CSS】CSSサンプルができるまで（前編）【困難は分割して考える】 - Little Strange Software
どうも！LSSです！！ 例えばこんなボタンっぽいの 例えば、なんですが、LSSが↑こんなCSSサンプルを作ってみました。 そして、「↓これがコードです」と言って、 コード <div style="display: inline-block; border: 5px outset greenyellow; border-radius: 20px; padding: 10px; background-color: yellowgreen; background-image: radial-gradient(circle at 65% 35%,#ffffffc0,transparent); font-weight: bold; color: white; text-shadow: -1px -1px 0px yellowgreen, 1px 1px 0px greenyellow;">例えばこん
どうも！LSSです！！ 【CSSサンプル】text-shadowが霧散するサンプルを作ってみました【小ネタ】 - Little Strange Software のコメント欄にて、 421miyako(id:m421miyako) いいですね。カーソルをあてると、四方八方に星が飛び散るなんていうのはどうでしょう？とんでもないこと言いだしてすみません。 とのコメントをいただきました^^ パッと思いつくのは、before要素やafter要素に★を置いて、その要素だけにtext-shadow効果をつけて、それをアニメーションで位置変化させれば出来るかな？と。 それって出来るんだっけ？？と思ったので、試してみました！ 421miyako様、アイデアありがとうございます^^ 後ろ（after）に星がついてるバージョン 前 （before）に星がついてるバージョン 前後両方バージョン ちょっとtext
【CSSサンプル】ふりむきカーン【ほぼジョークｗ】 - Little Strange Software
どうも！LSSです！！ 暴れん坊将軍のテーマ、に歌詞があったんですね - Little Strange Software にて、「振り向きカーン（勝手に作った造語）」の魅力を語りました。 が…「このかっこいい演出をCSSに持ち込めないか？」と妙な方向に思考が向かってしまい…作ってみちゃいましたｗ ただ、Web閲覧中に不意に音が鳴るのを自分が良しと思わないため音はでませんが、その代わりにoutlineのアニメーションをつけています。（それカーンか？^^;） ふりむきカーン コード コード解説 振り向きカーンの魅力 ふりむきカーン ふりむきカーン ↑の傾いた四角にマウスカーソルをのせてみてください^^ コード <style><!-- @keyframes knanm{ 0%{outline:0px #ffd400ff solid;} 100%{outline:50px #ffd40000 so
【CSSサンプル】CSSで作るフォトギャラリー - Little Strange Software
どうも！LSSです！！ JavaScriptを使わず、CSSだけで動作するフォトギャラリーを作ってみました。 CSSで作るフォトギャラリー コード 使い方 あとがき CSSで作るフォトギャラリー 小さい画像をクリックすると中央に大きく表示されます。 中央に表示されている画像よりも前の画像は左列に、後の画像は右列に並べられます。 コード <style> .cglry{ display:grid; /*gridレイアウト*/ grid-template:repeat(8,1fr)/1fr 6fr 1fr; /*縦8行に分割／横1:6:1の比で3列に分割*/ gap:5px; /*各グリッドの間に5pxの隙間*/ } .cglry input{display:none;} /*ラジオボタン非表示*/ .cglry label{grid-column:1/2;} /*左列に配置*/ .cglry
【CSSサンプル】タブ切り替え表示【JavaScript不使用】 - Little Strange Software
どうも！LSSです！！ 昨日の記事の実験、 を用いてサンプルを作ってみました。 まず最初は普遍的な（？）ものを作ってみよう、と「タブ」をCSSで実現するのに挑戦！です。 タブ切り替え表示・サンプル コード 作ってから、ググってみると… タブ切り替え表示・サンプル カンマチルダ文字数CSS #nkm1,#nkm2,#nkm3,#nkm4{display:none;} のように、カンマ区切りで複数のidに対して一括で指定する事ができます。 …これ、知ってても忘れそうになりますね^^; #rdb1:checked~#nkm1{display:block;} この「~」は「兄弟要素」を指定する事ができ、この例では 「rdb1というidを持つ物がチェックされた状態の時のnkm1というidを持つ要素」 を指す事になりますが、HTML上で 「nkm1はrdb1より後に書かれている」 必要があります。 「
【CSS】CSSサンプルができるまで（後編）【困難は分割して考える】 - Little Strange Software
どうも！LSSです！！ 前回、前編では、 例えばこんなボタンっぽいの ↑こういう感じのCSSサンプルを作るのに、 コード <div style="display: inline-block; border: 5px outset greenyellow; border-radius: 20px; padding: 10px; background-color: yellowgreen; background-image: radial-gradient(circle at 65% 35%,#ffffffc0,transparent); font-weight: bold; color: white; text-shadow: -1px -1px 0px yellowgreen, 1px 1px 0px greenyellow;">例えばこんなボタンっぽいの</div> ↑こういうコードを書
CSSを使って色々な図形を描画するサンプルコード集になります。 ここにない図形も色々と紹介しています。 CSS 図形デザイン集 | ONE NOTES 図形の中にテキストなどを含める場合の注意点サンプルではできる限り、要素サイズの維持を考慮していますが、中には要素そのものがサイズを持たないサンプルもあります。 そういったサンプルの図形要素内にテキストなどの要素を含める場合は、レイアウトの崩れなどに注意して下さい。 解決策としては以下の方法などがあります。 before、afterの空きがあれば、図形部分は移動するサイズのある親要素を持たせて図形の配置はposition指定にするpaddingや文字サイズ、文字数を調節して図形の範囲内に収めるposition指定で影響を与えないようにするtext-overflowなどでみ出る部分を非表示にする正円（Perfect Circle）正円（せいえん
【CSSサンプル】回転しながら降る、雪の結晶 - Little Strange Software
どうも！LSSです！！ 今回は、さくっと、サンプルとコードだけ。 コード こんだけのコードですが、苦戦しました^^; ￥ ￥ ￥ ￥ ￥ ￥ コード <style><!-- @keyframes kaiten{ 0%{transform:rotate(0deg);top:-300px;} 100%{transform:rotate(720deg);top:2000px;} } .waku{ position: absolute; display:inline-block; transform-origin:70px 70px; animation: kaiten 30s linear 0s infinite; left:100px; } .yen{ position:absolute; font-size:100px; transform-origin:50% 70%; color:whi
【CSSサンプル】隠れた文字を照らし出すサーチライト【小ネタ】 - Little Strange Software
どうも！LSSです！！ 先日、記事にいただいたコメントの返信を書いていた時に、ふと思いついてしまった小ネタがありました。 決して「使い勝手がいい」とは思わないですが、思いついてしまったものは仕方がありませんｗ ちょっとした小ネタとして「こんな事もできるんだ」程度に見てやっていただければ、と思います^^ サーチライト 設定変更 元記事 逆のほうが良かったかも… サーチライト 闇に描く君は あの日のまま 僕に微笑みかける コード <style><!-- @keyframes scha{ 0%{background-color:#000000;background-position:-1000px 0,1000px 0;} 10%{background-position:1000px 0,1000px 0;} 30%{background-position:-1000px 0,1000px 0;
【CSSサンプル】タブ切り替え表示を２つ配置する場合 - Little Strange Software
どうも！LSSです！！ 先日の記事、 を早速使ってくださった、421miyakoさん(id:m421miyako)から問い合わせがありました。 421miyako(id:m421miyako) このスライダーを何の意味もなく上下の仕切り線みたいに使って、数字を出しておくと読者が、なんじゃこれの感じで混乱して面白そうです。先日のタブですが同じページに二か所入れると干渉しますか？二つ目がうまくいかなかったのでどうかなって。 （ちなみに、使っていただいた記事はこちら） そういえば…IDを多用しているため、バリバリ干渉します！ 同ページ内で複数置く事を考えていなかったんですね^^; ラジオボタン・ラベル・中身の３種 × タブ数 のIDを使っていて、その全てを別名に変えるのと、ラジオボタンをグループ化している name="rdb" の名前も変えてあげると、複数でも動作します。 が、なかなか大変ですよ
リストのデザインを装飾するCSSサンプル！HTMLの書き方も
今日は、WordPressでホームページなどを作成する際に役立つデザインや装飾に関してです。 今回は、リストの装飾CSSについて書きたいと思います。CSSとHTMLで「箇条書き(リスト)」の様々なデザインを作ったのでご紹介します！ リストは、「<ul>」「<ol>」「<li>」などを使う下記箇条書きのことですが、記事内でポイントをまとめる時などに使いますよね。 通常のリストのデザインは、下記の左側のようなとってもシンプルなものです。 だけど、ブログの個性を出すためにオシャレな可愛いデザインに変更できたら嬉しい！という事で、今回はCSSでカンタンにリストのデザインをオシャレに変更できるように、リストのデザインを装飾するCSSのサンプルを集めちゃいました！
文字やボールなどの要素を弾ませるバウンドアニメーションのCSSサンプル集です。 このページの各アニメーションにanimationプロパティと@keyframes（キーフレーム）を使ったサンプルコードを紹介しています。 ボールをバウンドアニメーションで弾ませるCSSサンプルSee the Pen CSS bound ball Animation by yochans (@yochans) on CodePen. ボールがバウンドするシンプルなCSSアニメーションサンプルです。 ボール部分と影部分のアニメーションを作成しています。 <div class="container"> <span class="ball"></span> <span class="shadow"></span> </div>コンテナとボールのCSS .bound-container{ position:relativ
よそのサイトやブログを見ているときに、 「自分のサイトでもそんな装飾をしてみたい」 「そのアイコンってどうやったら使えるの？」 などと思ったことはありませんか？ チェックボックスとか→ 外部ページへのリンクとか→https://sigablog.com/ はたまたこのような注意書きなど 今回はこのようなアイコンを提供しているサービスの一つ Font Awesome を、はてなブログで使用する方法をお教えいたします。 また、最後にはCSSのサンプルコードも紹介いたしますので、 読み終わったら早速チャレンジしてみてください。 スポンサーリンク Font Awesomeとは？ はてなブログで使う方法 ①head内にコードを追記する ②HTMLの場合 ③CSSの場合 いじってはいけない箇所 アイコンを指定する箇所 CSSサンプル 注意書き 補足情報 アイデア 合わせて読みたい 外部ページへのリンク
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【中央揃え編】CSS限界オタクと学ぶレイアウトCSSサンプル集 - Qiita
【CSSサンプル】八方に飛び散る星 - Little Strange Software
CSS | 色々な図形を描画するCSSサンプルコード集 | 1 NOTES
文字や要素が弾むバウンドアニメーションのCSSサンプル集 | 1 NOTES
はてなブログでアイコン(Font Awesome)を使う方法とコピペできるCSSサンプル - SIGA BLOG
mayumi0.nk.awe.jp
www.mcdonalds.co.jp
tonarinoyj.jp
l.smartnews.com
www.kinngyo92.com
ameblo.jp/wxmx07589