HTMLはシンプル！ 画像をホバーしたときのさまざまなエフェクトを簡単に実装できるCSSの超軽量ライブラリ -Izmir

2023/08/09 14 users class ライブラリ 2KB オーバーレイ テキスト

画像をホバーしたときにテキストを重ねたり、ボーダーをアニメーションさせたり、拡大表示させたり、さまざまなエフェクトを簡単に実装できるCSSの超軽量（2Kb）ライブラリを紹介します。 HTMLにclassを与える簡単実装。エフェクトは組み合わせることも可能で、オーバーレイやテキストやボーダーなどを自由に組み合わせ... 続きを読む

朗報！ CSS Flexboxの8年越しのバグがようやく修正されます

2023/08/07 17 users パク CSS flexbox 朗報 border デモ

CSS Flexboxのこのバグに悩んだ人もいると思います。 リスト要素をFlexboxで複数列に配置し、ulにborderを適用したのに、ボーダーが全体を囲まないバグが8年越しにようやく修正されます。 左: バグ、右: 期待する表示 まずは、そのバグが確認できるデモをご覧ください。 すべてのアイテムはul内のliで実装されており、CS... 続きを読む

VS Codeでコードがさらに見やすくなる！ ネストされたブロックを強調表示するVS Codeの機能拡張「Blockman」

2023/02/27 369 users ネスト CSS PHP HTML カスタマイズ

HTML, CSS, JavaScript, PHPなどさまざまな言語に対応、コードのネストされたブロックを枠で囲って強調表示するVS Codeの機能拡張を紹介します。 さっそくインストールして使用してみましたが、これは見やすくなりますね！ 枠のボーダーや背景、ネストの深さを自由に変更もできるので、自分が見やすいようにカスタマイズ... 続きを読む

「半年間で体重が20キロも落ちていた」非人道的な入管と、人を集められない技能実習制度…日本が抱える大きな“矛盾” | 文春オンライン

2023/01/17 11 users 矛盾 移民 ＤＶ 技能実習制度 文春オンライン

『ボーダー　移民と難民』（佐々涼子 著）集英社インターナショナル 2021年3月、名古屋の入管施設に収容されていたスリランカ人女性、ウィシュマ・サンダマリさんが死亡した事件は記憶に新しい。留学生だったウィシュマさんは同居人からのDVが原因で通学できなくなり在留資格を失った。収容され死亡するまでの半年間で彼... 続きを読む

CSSでスクロールバーの有無によるがたつきをなくす: Days on the Moon

2022/12/09 63 users スクロールバー パディング CSS 有無 前面

この記事はCSS Advent Calendar 2022の9日目の分です。 CSSのボックスモデルにおいては、ボーダーの内辺とパディングの外辺の間にスクロールバーが配置されます。最近はどのOSでもオーバーレイスクロールバー（スクロールバーが内容の前面に覆いかぶさるようなもの）が主流となり、スクロールバーが存在してもしなくても... 続きを読む

この発想はすごい！ モダンCSSで実装する、ボーダーをアニメーションさせるテクニック

2022/08/09 121 users モダンCSS 発想 テクニック 矩形 デモ

モダンCSSで実装する、ボーダーをアニメーションさせるテクニックを紹介します。矩形のHTMLはdiv要素1つだけ、ボーダーがどのようにアニメーション化されているのか、その仕組みが視覚的に分かるデモもあります。 CSS border animations by Bramus 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスにもと... 続きを読む

CSSでこんなことができるの知ってた？ 要素・コンテナのサイズに関係なく、ボーダーや背景をはみ出して配置するテクニック

2022/07/13 241 users CSS コンテナ 実装 テクニック 背景

h1やpなどブロック要素にボーダーや背景をつけると、通常はその要素のコンテナボックスいっぱいに適用されます。要素やコンテナのサイズに関係なく、ボーダーや背景を拡張させるCSSのテクニックを紹介します。 入れ子で実装？ と...記事の続きを読む 続きを読む

店のシャッター、スケボーでぼこぼこ　繁華街の商店街が終日乗り入れ禁止へ　神戸（神戸新聞NEXT） - Yahoo!ニュース

2022/02/22 281 users スケボー 繁華街 シャッター 道交法 人通り

スケボーの乗り入れ禁止に踏み切る三宮センター街１丁目商店街。人通りの多い日中は道交法の規制対象となり得る＝神戸市中央区三宮町１ 神戸・三宮の三宮センター街が、スケートボードの乗り入れに頭を悩ませている。今年１月、深夜に若者とみられる複数人のボーダーが店舗のシャッターを破損。店側が兵庫県警生田署に被... 続きを読む

ワートリみててさ、よく奢るんだよ。 焼肉４人分ていくらよ。 ティーンがそ..

2022/01/15 106 users ディーン 高給 ワートリ 世界

ワートリみててさ、よく奢るんだよ。 焼肉４人分ていくらよ。 ティーンがそんな簡単に払える額じゃねーよ。 あの世界の経済感どうなってんだよ。 ボーダーってそんな高給取りなのか。 続きを読む

取引先の新人女性から「彼女いますか？」と聞かれました。 - Everything you've ever Dreamed

2021/11/02 13 users 取引先 新人女性 彼女 海岸 匂い

100億年ぶりに女性から「カノジョさん、いないの？」と言われたとき、どこか懐かしく甘い匂いがした。何の匂いだろう？僕は言葉を探しながら考える。そして捜し当てる。再生、確認。間違いない。真夏の海岸で嗅いだコパトーンの甘い匂いだった。「彼女はいませんよ」僕は言った。妻の目を盗み、真実と嘘のボーダーをかす... 続きを読む

CSSによる微調整、フォントのベースサイズ、レスポンシブ用の増減、スペースの基本単位などを確認しながら変更できる無料ツール -shaper | コリス

2021/09/06 18 users UI要素 Shaper コリス 角丸 オンラインツール

WebページのUI要素に適用したフォントのベースサイズ、レスポンシブ用の増減、スペースの基本単位、マージン・パディングの量、カラー、ボタンの形、ボーダーのサイズ、ボーダーの角丸など、表示を確認しながらスタイルの値を調整できるオンラインツールを紹介します。 shaper shaper -GitHub shaperの特徴 shaperの使い... 続きを読む

CSSでブロック要素の幅をコンテンツのサイズぴったりにしたい時のこれからの記述方法 | コリス

2021/08/04 191 users コリス section inline CSS div

sectionやdivやpなど、ブロック要素をボーダーで囲うと、全幅（親要素の幅）になります。そのブロック要素の中のコンテンツが少なく、ボーダーの幅をコンテンツのサイズに合わせたい場合は、どう実装していますか？ ブロック要素のままでは親要素の幅になってしまうので、通常はdisplay: inline;やdisplay: inline-block... 続きを読む

アニメに電子音楽 日本のカルチャーとポーター・ロビンソンの蜜月 - コラム : CINRA.NET

2021/06/21 18 users 蜜月 ロビンソン ポーター・ロビンソン CINRA.NET

アニメに電子音楽 日本のカルチャーとポーター・ロビンソンの蜜月 ポーター・ロビンソン『Nurture』 テキスト 黒田隆憲原雅明 編集：山元翔一（CINRA.NET編集部） アニメや電子音楽などをはじめ、日本の文化に関心を持ち、深い想いを抱いているポーター・ロビンソン。 たとえば、長谷川白紙も出演したオンラインフェス『... 続きを読む

CSSでテキストやボタン、ボーダーに美しいネオンライトのエフェクトを実装するテクニックのまとめ | コリス

2021/05/24 12 users コリス text-shadow box-shadow CSS

テキストやボタン、ボーダーに美しいネオンライトのエフェクトを実装するCSSのテクニックを紹介します。 ネオンライトはCSSのtext-shadowやbox-shadowで実装されており、CSSアニメーションやJavaScriptで動きを加えるとさらに面白くなります。 各デモは「Run Pen」をクリックすると、動作します。 まずは、ネオンサイン... 続きを読む

パゲ（ｻﾞﾗｻﾞﾗとﾂﾙﾂﾙの往復） on Twitter: "｢昔のホテルの総支配人は、ポーターやドアマン、ベルボーイから叩き上げた人がいたもんだけどなぁ｣ ポーターやドアマン、ベルボーイ

2021/03/17 10 users ハゲ 正社員 ヘルボーイ 総支配人 往復

｢昔のホテルの総支配人は、ポーターやドアマン、ベルボーイから叩き上げた人がいたもんだけどなぁ｣ ポーターやドアマン、ベルボーイも正社員だったからだよ。 続きを読む

如実って声に出して言うの恥ずかしくない？

2021/03/10 91 users キャラット 如意棒 発音 ツッコま 文字

「にょ」って発音が恥ずかしい。 「は？デ・ジ・キャラットか？」なんてツッコまれたらどうすればいいにょ？ 文字で表すのは全然いいんだよ。 でも声に出して「にょ」は流石に… 如意棒も結構恥ずかしい。なぜなら「にょ」に「棒」までついてる。これは完全にボーダー超えてるよね。 こう自然な流れで「如意棒」って言え... 続きを読む

CSSにおけるマージンの相殺を徹底解説 | コリス

2021/01/21 28 users コリス パディング マージン 相殺 CSS

CSSにおけるマージンの相殺は何か、どういう条件で起こり、どのように相殺されるのか、また相殺を回避する方法などを紹介します。 下と上のマージンの相殺は単純ですが、マージン値が異なる場合、入れ子の場合、複数の場合、同方向の場合、負のマージンの場合、パディングやボーダーがある場合など、実装に伴うさまざま... 続きを読む

CSSのスゴ技！美しいグラデーションのボーダー、角丸や半円のテクニックを使用したチケットを実装する方法 | コリス

2020/11/10 12 users コリス 半円 グラデーション CSS スゴ技

CSSで実装された美しいグラデーションのボーダー、さらにはそれを角丸し、半円を加えたチケットを実装するスタイルシートのテクニックを紹介します。 グラデーションのボーダーは割と簡単に実装できますが、角丸にするのは目から鱗でした。また、簡単なJavaScriptで3Dも再現されています。 Gradient borders with curves... 続きを読む

こんなことができるんだ！CSSのボーダーを破線や点線にするスタイルシートのテクニック | コリス

2020/08/25 192 users フェード コリス 点線 傾斜 CSS

ただし、このCSSでは破線や点線の大きさや長さをコントロールできません。また、ボーダーに傾斜やフェードやアニメーションを与えることもできません。 しかし、いくつかのテクニックを使用することで、それが実現できます！ Amit Sheenが作成したDashed Border Generatorで簡単に実現できます。 See the Pen Dashed Bor... 続きを読む

Brut Japan on Twitter: "アメリカ国内で蔓延しつつある新型コロナウイルス。健康保険を持たない国民が多いアメリカでは、高額な医療費を負担できずに病院へ行くことを躊躇う人々が多い。民主

2020/03/19 25 users 新型コロナウイルス 民主 国民 病院 医療費

アメリカ国内で蔓延しつつある新型コロナウイルス。健康保険を持たない国民が多いアメリカでは、高額な医療費を負担できずに病院へ行くことを躊躇う人々が多い。民主党下院議員ケイティ・ポーターは、アメリカ疾病管理予防センター局長への議会質疑… https://t.co/XsP4MQ6PbV 続きを読む

政治的にOKらしいが北欧の選民意識ヤベェな映画

2020/02/11 175 users 北欧 映画 トロール ズコー 増田

小島秀夫も絶賛していたらしい、スウェーデンの映画『ボーダー (Gräns)』 取り替え子 （Changeling)・・・トロールなどの子どもと人間の子どもが交換されるヨーロッパの伝承をモチーフにした話で 森で暮らすヒロインがすごーーく醜いって設定 たぶん増田もはてなもミニシアター映画は観ないと思うので以下完全にネタバレ... 続きを読む

JSで楽譜を描画して再生までできる「abcjs」:phpspot開発日誌

2019/10/22 34 users カラーピッカー 楽譜 phpspot開発日誌 ホバー時 再生

abcjs JSで楽譜を描画して再生までできる「abcjs」 あまり音楽の知識はありませんが、なんかすごい感じがします 関連エントリ 超カッコいいスクロールエフェクト実装「lax.js」 リッチでカッコいいカラーピッカー「iro.js」 ホバー時にボーダーをアニメーションさせる「Nicebord.js」 続きを読む

映画『ボーダー　二つの世界』あらすじ・ネタバレ・作品情報・感想・評価。LGBTをも凌駕した多様性の映画。美しい心になれる映画 | 運だぜ！アート

2019/10/19 47 users LGBT あらすじ アート 多様性 映画

映画『ボーダー　二つの世界』公式サイトにて作品情報・キャスト・上映館・お時間もご確認ください。 YouTubeで予告映像もご覧ください。 映画『ボーダー 二つの世界』公式サイト 2019.10.11(金) ROADSHOW『ぼくのエリ 200歳の少女』の原作者が贈る切なくも美しい究極の北欧ミステリー。10月11日（金）ヒューマントラス... 続きを読む

div要素の見た目は矩形だけじゃない！UI要素をさまざまな形状のデザインに拡張するスタイルシート -augmented-ui | コリス

2019/09/18 149 users コリス 矩形 ユーザーインターフェイス class div要素

Webページやアプリに、サイバーパンクにインスパイアされたユーザーインターフェイスを簡単に実装できるCSSを紹介します。 下記の要素はdiv要素が一つだけ。角を斜めにカットしたり、辺に窪みを加えたり、ボーダーを美しくしたり、augmented-uiのCSSで用意されているclassを与えると、サイバーパンクにインスパイアされ... 続きを読む

CSSの否定疑似クラス「:not()」で、複数のclassを指定する場合の使い方 | コリス

2019/07/30 47 users コリス セレクタ class not 上書き

:not()セレクタは非常に便利です。例えば、リストの各アイテムの区切りにボーダーをつける時、まずはli要素にボーダーを指定し、最後のli要素にだけボーダー無しを上書きで指定する、そんな時に使用すると簡単に指定することができます。 :not()セレクタは通常一つのclassしか指定できませんが、複数のclassを指定する場... 続きを読む