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

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

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

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 ディーン 高給 ワートリ 世界

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

対人ストレスから解放されたフリーランスの末路（体験談）｜ゎ｜note

2019/04/09 1084 users 末路 Note フリーランス 筆者 フルコミット

精神疾患や生きづらい性格を抱える人の中には、会社で働くことが苦痛で、フリーランスになることを夢見ている人がいるかもしれない。 筆者は、境界性パーソナリティー障害（ボーダー）であり、集団の中で穏便になじむのが困難であるためフリーランスを選んでいる。過去3年間は会社にフルコミットをしたが、2018年度は、... 続きを読む

ボーダーの服ばっかり着てるとあだ名がボーダーになる

2019/02/01 115 users あだ名

ボーダーの服ばっかり着てるとあだ名がボーダーになる 続きを読む

最近増えてきたグラデーションのボーダーをCSSで実装するさまざまなテクニック | コリス

2019/01/15 86 users コリス CSS-Tricks グラデーシ CSS テクニック

ここ一年でグラデーションの使い方がだいぶ進化してきました。使用するカラーだけでなく、使用する場所にも変化が見られます。 Webサイトやスマホアプリで最近増えてきたグラデーションのボーダーをCSSで実装するさまざまなテクニックを紹介します。 Gradient Borders in CSS ※CSS-TRICKSがリニューアルされ、グラデーシ... 続きを読む

もう少し解説すると、1コマ目（右上）だけ視点人物がボーダーを見ていない..

2018/10/27 123 users 気持 シチュエーション 青一色 時点 右上

もう少し解説すると、1コマ目（右上）だけ視点人物がボーダーを見ていないので、 この時点では気にしていなかったことが分かる。 2コマ目で気づいて振り返っており、 そこから見かけるシチュエーションが特殊になっていく＝どんどん気になってしまって、 青一色を見たところで「終わった」と思って、 見届けたような気持... 続きを読む

カオス化したスタイルシートから卒業！CSSでカラーを管理する効率的な方法 | コリス

2018/10/02 102 users system コリス アクセント 保守 ライセンス

テキスト、ボーダー、背景、アクセント、エラーなど、カラーをCSSでどのように定義すると効率的に管理できるのか、保守が簡単になるのか、そのテクニックを紹介します。 Create your design system, part 3: Colors by CodyHouse 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンス... 続きを読む

営業せずに1,100社に導入された理由。業務管理のboard｜boater（ボーター）【ユーザーの本音で作った法人向けITサービスの比較・活用ガイド】

2018/03/06 57 users 本音 ユーザー 活用ガイド 比較 業務管理

ヴェルク株式会社 代表取締役の田向祐介さんにお話を伺いました。 boardは請求書作成・見積書発行等ができる中小企業・ベンチャー向けクラウド型の業務システムです。単なる書類作成支援だけでなく、経営管理の観点で周辺業務を効率化できることを目指しています。 ヴェルク社はboardで1,100社の導入企業を持ちながらも、受託開発や他サービスの開発にも力を入れている会社です。営業が一人もいないのに、それだ... 続きを読む

デザインは奥が深い！目の錯覚を効果的に使ったUI、ロゴ、イラスト、文字組みのデザインテクニック | コリス

2017/10/19 497 users 長方形 正方形 シャドウ コリス アイコン

文字をぴったり揃えたのにしっくりこない、正方形なのに長方形に見えてしまう、シャドウを与えていないのにぼんやりとシャドウが見える、ボーダーを加えただけなのに塗りも変わったように見える、そんな経験はありませんか？ WebサイトのUI、アイコン、ロゴ、イラストなどでデザインしている時に誰しも経験したことがあると思います。これらの原因は目の錯覚によるもので、その仕組みを理解することで困惑されることなく、効... 続きを読む

大自然がキャンバス――スノボ界の開拓者 國母和宏の美学 - Yahoo!ニュース

2017/07/14 540 users 美学 キャンパス スノボ界 Yahoo 開拓者

スノーボーダー・國母和宏について、7年前のバンクーバー五輪での騒動で記憶が止まっていたとしたら、あまりにももったいない。彼はいまや欧米でスターとして扱われているのだから。闘う相手は他のボーダーではない、自然の野山だ。雪山の山頂からノーヘルメットで一気に滑り降りる。バックカントリー、フリーライディングと呼ばれる世界である。オフシーズンに家族とともにくつろぐ國母が哲学を語った。 （ライター・中村計／Y... 続きを読む

テキストやボーダーや背景に使うグレーを効果的に、ニュートラルなカラーを使いこなすためのテクニック | コリス

2017/03/01 89 users light コンポーネント コリス アクセントカラー ブランド

Webデザインで大切なカラーはベースカラーやアクセントカラー、そしてブランドのカラーがありますが、テキストやボーダーや背景などのコンポーネントに使うニュートラルなカラーも非常に重要です。 明るいニュートラルなカラー、暗いニュートラルなカラーをWebデザインで使いこなすためのテクニックを紹介します。 Light & Dark Color Systems 下記は各ポイントを意訳したものです。 ※当ブロ... 続きを読む

[CSS]コンテンツの区切り線、デザインのアクセントに使えるラインやボーダーを実装するテクニックのまとめ | コリス

2016/12/01 139 users borderプロパティ コリス グラデーション CSS ライン

コンテンツの区切りに使用する線、デザインのアクセントに使えるラインやボーダーをCSSで素敵にデザインするスタイルシートのテクニックを紹介します。 borderプロパティを使ったシンプルなものから、グラデーションや疑似要素 ...記事の続きを読む 続きを読む

ポーター・ロビンソン×A-1 Picturesで描くVR空間の崩壊　MV「SHELTER」インタビュー - KAI-YOU.net

2016/10/18 126 users Shelter Robinson 盟友 全編 マデオン

ダンスミュージックシーンを牽引するアーティスト・Porter Robinson（ ポーター・ロビンソン ）が、盟友であり世界的に活躍するプロデューサー・Madeon（ マデオン ）とコラボした楽曲「 SHELTER 」のMVを10月18日（火）10時15分渋谷・MODIにて世界最速で公開した。 MVは全編にわたってアニメーションで展開。制作は『あの日見た花の名前を僕達はまだ知らない。』『アイドルマ... 続きを読む

CSSでリストの最初と最後のボーダー（border）を非表示にする方法 | NxWorld

2016/01/15 63 users border NxWorld 最初 CSS HTML

タイトル通り、リストでボーダー（border）を指定しているけど最初と最後のボーダーは非表示にしたいという時に使えるCSSの小ネタです。最初と最後とは言っていますが、要は最初のボーダーを非表示にするという感じで全部で4つの方法をご紹介します。 以下で紹介しているのはいずれも上のイメージのようによく見るリストで、ボーダーが最初と最後に引かれていないものを実装する方法です。 HTMLは以下のように u... 続きを読む

知ってると便利なCSSのテクニックのまとめ -CSS Protips | コリス

2015/10/05 326 users コリス Chrom Flexbox CSS ナビゲーション

リスト要素で実装したナビゲーションの右端のボーダーを取り除くシンプルな方法、flexboxで実装したカラム間の溝の最後の溝を取り除く方法、天地左右の中央に配置など、知ってると便利なCSSのテクニックを紹介します。 CSS Protips -GitHub CSS ProtipsのライセンスはMIT Licenseで、個人でも商用でも無料で利用できます。 下記のスタイルシートの対応ブラウザはChrom... 続きを読む

アニメ「ワールドトリガー」放送内容変更　大雨被害に配慮か （スポニチアネックス） - Yahoo!ニュース

2015/09/13 74 users スポニチアネックス ネイバー 意地 攻防 ワールドトリガー

テレビ朝日のアニメ「ワールドトリガー」（日曜前６・３０）が１３日の放送内容を変更した。東日本の大雨被害に配慮したとみられる。 原作は２０１３年から「週刊少年ジャンプ」（集英社）に連載されている葦原大介氏の漫画で、世界からの侵略者・ネイバーと防衛組織・ボーダーの攻防を描くＳＦアクション。 当初予定していた第４６話「エースの意地」から第３８話「Ｂ級ランク戦開幕」（７月１９日放送）に変更した。第４６話が... 続きを読む