Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? こんにちは。フロントエンド開発で一番好きなのはCSS、Mhousetreeです。 普段はCSSアニメーションで遊んだりしています。 （頑張って作ったのでよかったら見てね！！！！！） 何かと使う中央揃え。なんとなく覚えているものを順番に試して中央に来たらOK！と思っていませんか？ 現在ではかなりいろんな種類の方法があり、それぞれ異なる特徴を持っています。 この記事ではCSSでよく使う（気がする）レイアウトパターンの中で、センタリングに関するものをまとめました！ まえがき この記事では各実例を独自の指標で評価して示しています。 長い記事にな
【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サンプル】回転しながら降る、雪の結晶 - 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" の名前も変えてあげると、複数でも動作します。 が、なかなか大変ですよ
よそのサイトやブログを見ているときに、 「自分のサイトでもそんな装飾をしてみたい」 「そのアイコンってどうやったら使えるの？」 などと思ったことはありませんか？ チェックボックスとか→ 外部ページへのリンクとか→https://sigablog.com/ はたまたこのような注意書きなど 今回はこのようなアイコンを提供しているサービスの一つ Font Awesome を、はてなブログで使用する方法をお教えいたします。 また、最後にはCSSのサンプルコードも紹介いたしますので、 読み終わったら早速チャレンジしてみてください。 スポンサーリンク Font Awesomeとは？ はてなブログで使う方法 ①head内にコードを追記する ②HTMLの場合 ③CSSの場合 いじってはいけない箇所 アイコンを指定する箇所 CSSサンプル 注意書き 補足情報 アイデア 合わせて読みたい 外部ページへのリンク
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【中央揃え編】CSS限界オタクと学ぶレイアウトCSSサンプル集 - Qiita
【CSSサンプル】八方に飛び散る星 - Little Strange Software
はてなブログでアイコン(Font Awesome)を使う方法とコピペできるCSSサンプル - SIGA BLOG