Windows 11、9月26日の大型アプデ「23H2」で「Microsoft Copilot」ビルトイン

2023/09/21 94 users ビルトイン Microsoft Copilot 大型アプデ

Windows 11、9月26日の大型アプデ「23H2」で「Microsoft Copilot」ビルトイン Microsoftは、「Windows 11」の大型アップデートを9月26日にリリースすると発表した。このアップデートで、AIアシスタント「Microsoft Copilot」（プレビュー版）を組み込む。CopilotはWindowsのサイドバーとして表示され、PC設定やメールの... 続きを読む

［速報］WindowsにチャットAIを搭載「Windows Copilot」発表、サイドバーから利用可能。6月にプレビュー版が登場予定。Build 2023

2023/05/23 282 users Windows Copilot マイクロソフト 速報 以下

マイクロソフトは日本時間5月24日未明から開催する開発者向けイベント「Microsoft Build 2023」で、Windows 11にAIチャット機能を組み込んだ「Windows Copilot for Windows 11」（以下、Windows Copilot）を発表しました。6月にプレビュー版が提供される予定です。 Windows Copilotはタスクバーから呼び出し可能（サーチ... 続きを読む

モダンCSSでよく使用されるレイアウトを実装するまとめ

2021/11/25 212 users モダンCSS レイアウト ブッダ まとめ ヘッダ

ヘッダ・フッタ・コンテンツ・サイドバー、フルページのレイアウト、最下部のフッタ、中央配置、カードなど、一般的なWebサイトやスマホアプリのUIをモダンCSSで実装する方法を紹介します。 CSSの実装はデバイスベースからコンテンツベースに移行しているのが現状です。これからのプロジェクトに役立つCSSのテクニックを... 続きを読む

【保存版】CSS Flexboxでレスポンシブ対応のレイアウトを実装するHTMLとCSSのシンプルなコードのまとめ | コリス

2021/04/15 138 users コリス ナビゲーションバー CSS CSS flexbox

CSS Flexboxで実装するWebページでよく見かけるレスポンシブ対応のレイアウト、カードレイアウト、ナビゲーションバー、サイドバー、聖杯レイアウトなどのHTMLとCSSのコードを紹介します。 コードは非常にシンプルなので、テンプレートやスニペットとして再利用できます。 Master CSS Flexbox 2021 ?- Build 5 Responsi... 続きを読む

Flexboxで実装する定番レイアウトのコードのまとめ | コリス

2021/04/01 99 users Flexbox コリス ブッダ コピペ CSS flexbox

Webページやスマホアプリに使用される一般的な定番レイアウトをCSS Flexboxで実装したシンプルなコードを紹介します。 ヘッダ・コンテンツ・フッタがあるレイアウトをはじめ、サイドバーがあるレイアウト、スマホに対応したカードの配置、高さを揃えたカード、異なる高さのカードを使用した価格表など、コピペで簡単に使... 続きを読む

ノーコードでWebページをスクレイプできるChrome拡張「AnyPicker」 - エンジニア・プログラマのソーシャルITメディア

2019/10/09 433 users プログラマ Step Chrome拡張 エンジニア ノーコード

◆ AnyPicker https://anypicker.ryang-studio.com/ 紹介 「AnyPicker」は、ノーコードでWebページをスクレイプできるChrome拡張ツールです。 Chrome拡張機能をインストール後、スクレイプするWebサイトを開くとこのようなサイドバーが出現します。 STEPは全部で5つあり、その1つ目がこちら。今回は初めての登録なので「N... 続きを読む

position: sticky;の仕組みや実際の使い方が分かると便利！仕様から実装方法までをやさしく解説 | コリス

2019/02/07 141 users sticky コリス position スティッキー ヘッダ

position: sticky;とは、ヘッダやナビゲーション、サイドバーなど指定した要素をスクロールした際にぴたっと指定した位置に貼り付ける（スティッキー）便利なプロパティです。 position: sticky;の基礎知識、機能の仕組み、そして実際にどのようなコードで機能し、機能しないのか、便利な使い方などを紹介します。 CSS P... 続きを読む

｢Slack｣を最大限に利用するための基本テクニック15個 | ライフハッカー［日本版］

2018/07/18 133 users Slack セク ライフハッカー 秘訣 コミュニケーション

Slackに生活を乱されていませんか？ 過剰なコミュニケーションが原因で何も手に付かないようでは、せっかくのツールが台無しです。 そこで、Slackのアジア太平洋チームを率いるArturo Arrrte氏に、そうならないための秘訣を聞きました。 サイドバーをすっきりさせる｢環境設定｣メニューで｢サイドバー｣を開き、｢表示｣セク... 続きを読む

今までにない快適動作！サイドバーを⬆⬇スクロールに合わせてぴたっとくっつけるスクリプト -Sticky Sidebar | コリス

2017/10/16 99 users コリス ビューポート jQuery スクロール スクリプト

サイドバーをスクロールに合わせて、ぴたっとくっつける快適に動作する超軽量スクリプトを紹介します。 コンテンツが長い・短い場合はもちろん、サイドバーが長くてビューポートをはみ出す場合にも期待通り完璧に対応します。スクリプトは単体で動作し、jQueryのプラグインとして動作させることも可能です。 スクロール時にすべてのサイズを計算するのではなく、必要なサイズだけを再計算。 スクロール時のラグやジャンク... 続きを読む

コメント一覧ページで、記事をブックマークしたすべてのユーザー一覧を確認できるようにするなどの修正を行いました - はてなブックマーク開発ブログ

2017/09/22 183 users フック 修正 ユーザー Web版 エントリーページ

2017 - 09 - 22 コメント一覧ページで、記事をブックマークしたすべてのユーザー一覧を確認できるようにするなどの修正を行いました はてなブックマークでは、先日リニューアルしたWeb版 （PC、スマートフォンとも） のコメント一覧ページ （エントリーページ） について以下の追加修正を行いました。 ブックマークしたすべてのユーザーの一覧を、サイドバーの「詳しく見る」から確認できるようにしまし... 続きを読む

なんで PC 画面がワイド化してんのに、ブコメ表示部がこんなに幅狭いんだよ..

2017/07/03 55 users 画面 width サムネイル ユーザースタイルシート 表示幅

なんで PC 画面がワイド化してんのに、ブコメ表示部がこんなに幅狭いんだよ……。というわけで、お気に入りページのサイドバーとサムネイル消して表示幅を広げるユーザースタイルシート。 .wrapper-container-inner { width : 90% ; } #center-container { width : 100% ; } #left-container , #right-conta... 続きを読む

[CSS]最近のレスポンシブ対応サイトで使われているレイアウトのアイデア・実装方法のまとめ | コリス

2017/07/03 91 users コリス CSS スプリットスクリーン レイアウト まとめ

レスポンシブ対応のレイアウトはどのように拡大・縮小させるのか、また縦・横に積み重ねるのかに大別されます。 ブラウザいっぱいに表示する1カラム、サイドバーを備えた2カラム、2カラムを均等に分割したスプリットスクリーン、カードやパネルを使ったレイアウトなど、最近のレスポンシブ対応サイトで使われているレイアウトのアイデアと実装方法を紹介します。 ひと昔前まではJavaScriptを使用しないと実装できな... 続きを読む

「position: sticky;」より便利！スクロールしたらヘッダやサイドバーがぴたっと貼り付くスクリプト -Fixed Sticky | コリス

2017/04/26 84 users sticky コリス position ヘッダ スクリプト

HTMLは汚さずに、ヘッダ、ナビゲーション、サイドバー、ボタンなど、さまざまな要素をスクロールした際に指定した位置にぴたっと貼り付けるスクリプトを紹介します。 IE7+からサポートされており、「position: sticky;」の代替になる便利なスクリプトです。 Fixed Sticky- GitHub Fixed Stickyの特徴 Fixed Stickyのデモ Fixed Stickyの使... 続きを読む

[CSS]レスポンシブ対応、サイドバーをアニメーションでスライド表示・非表示させるテクニック | コリス

2017/03/08 71 users コリス transform CSS アニメー アニメーション

レスポンシブ対応、アイコンをクリック・タップすると、サイドバーをアニメーションでスライド表示・非表示させるCSSのテクニックを紹介します。 スライドは単にそう見えるだけで、transformでサイドバーを変形させています。 滑らかなアニメーション、美しいグラデーション、スライドするにつれて透明度が変化するのも美しいですね。 サイドバーをアニメーションでスライドさせるデモ 実装 サイドバーをアニメー... 続きを読む

[CSS]背景は固定、美しいブラーがかかった半透明のパネルやサイドバーやボタンを実装するスタイルシート | コリス

2017/02/13 149 users コリス 半透明 overflow CSS Hidden

背景画像は固定表示で、美しいブラーがかかった半透明のパネルやサイドバーやボタンがスクロールするコンテンツを実装するスタイルシートのアイデアを紹介します。 例えばパネルをクリアにして、背景をブラーにするなど、反転させてみるのも美しい見た目になります。 .blur-container.blur-8 { --bg: url(background.jpg); overflow: hidden; backg... 続きを読む

[JS]コンテンツの見出しを目次にし、スクロールしてもサイドバーに固定表示されるナビゲーション -Progress Nav | コリス

2017/02/08 69 users スクロール ライブラリ アニメーション コリス 位置

コンテンツの見出しを目次代わりにし、スクロールしてもサイドバーに固定表示されるナビゲーションを実装するJavaScriptのライブラリを紹介します。 ページのスクロールに合わせて、ナビゲーションの現在位置はアニメーション ...記事の続きを読む 続きを読む

AbemaTV の番組表リニューアルに伴うパフォーマンス改善 - Qiita

2016/10/14 136 users Qiita AbemaTV セレクトボックス 横スクロール

以前の番組表 ↓↓↓ AbemaTV 新番組表 大きく変わったところ チャンネルが 横スクロールですべて見れる ようになった サイドバーに チャンネル一覧 ができた 日付切り替えがセレクトボックスから カレンダー表示 になった etc. 今まではチャンネルが 5ch 毎に区切られていたので、わざわざページを切り替えて見ないといけなかったのを、横スクロールですべてのチャンネルが一覧で見られるようにな... 続きを読む

GitHub の草状況を PNG 画像で返す heroku app をつくってみた - えいのうにっき

2016/01/09 51 users GitHub SVG コマンドライン えいのうにっき PNG

2016 - 01 - 09 GitHub の草状況を PNG 画像で返す heroku app をつくってみた Ruby heroku GitHub 前々から、 GitHub の草状況、つまり Public Contributions のグラフ（↑の画像みたいなやつね）をブログのサイドバーとかに出したいなぁーとかって思ってたんだけど、 GitHubの草のSVGをコマンドラインで取得する - Qi... 続きを読む

小池さんと男根のメタファー - orangestarの雑記

2015/12/04 58 users orangestar メタファー となり 雑記 らへん

2015-12-04 小池さんと男根のメタファー 漫画 小池さん 猫を殺す仕事kindle電子書籍で発売中です//となりの801ちゃん+412月11日発売予定 小池さんに関しては 小池さん カテゴリーの記事一覧 - orangestarの雑記 ここらへんとか orange star ここらへんの昔書いた漫画参照 あと、時々左側のサイドバーで小池さん更新してます お知らせ：となりの８０１ちゃん＋４巻... 続きを読む

目からウロコ！囚人のジレンマって経済の話だったのか！ - 嗚呼、学習の日々

2015/11/14 153 users 囚人 ジレンマ ウロコ iTunes 楽曲

2015-11-14 目からウロコ！囚人のジレンマって経済の話だったのか！ 未分類 Tweet みなさまごきげんよう！ 嗚呼蛙でございます！ 昨日、iTunesのアフィリエイト設定記事を書いたついでにサイドバーにお気に入り楽曲を貼ってみました。 何の役に立つわけでもないですが、なんとなく満足感があるので、今度追記したいですね。 ということで、今日はそんな話とは全く関係ない、職場の営業さんに聞いた面... 続きを読む

【はてなブログ】カスタマイズでお世話になったブログ【Adsenseを特定の記事で非表示、カテゴリーをCSSでタグ風に表示など】 - 広汎性発達障害の女がたまに毒を吐くブログ

2015/11/02 58 users adsense background-color CSS

本日は、私がはてなブログをカスタマイズする時にお世話になったブログをご紹介させて頂きます！ カテゴリーをCSSでタグ風に表示する サイドバーのカテゴリーをタグ風に表示出来るコードを掲載してくれています。 もともとのカテゴリー表示より目立つしカッコイイです！ このブログのサイドバーのカテゴリー このブログでは、背景色をbackground-color: #29475f;にして、紺色っぽい色に変えてい... 続きを読む

はてなブログで複数のサイドバーモジュールををタブメニューにして回遊率アップを狙うカスタマイズ - Yukihy Life

2015/09/01 81 users タブメニュー Yukihy Life カスタマイズ 難易度

2015-09-01 はてなブログで複数のサイドバーモジュールををタブメニューにして回遊率アップを狙うカスタマイズ ブログ Web製作 jQuery css jQueryを使ってみると本当にいろいろとできるなあと実感しています。今回はそれを使って、サイドバーをタブメニューにしてみようと思います。 難易度はちょい高めです。 実装図 実際にタブメニューにしてみた実装図はこちら この右側についているのが... 続きを読む

はてなブログデザインカスタマイズ | タイトル・画像のセンタリング・サイドバーや見出しなど - Yukihy Life

2015/07/31 60 users センタリング ブログカスタマイズ 小出し 見出し タイトル

2015-07-31 はてなブログデザインカスタマイズ | タイトル・画像のセンタリング・サイドバーや見出しなど ブログ ブログ-はてなブログカスタマイズ ブログ書いているよりも、ブログカスタマイズをしている方が楽しいゆきひーです。 今までいろいろと小出しに記事にしていましたが、デザインCSSに書かれていることの中で、どのテーマでも共通で使える（かもしれない）ものをまとめて書きました。 他の記事で... 続きを読む

[JS]ボタンがパネルに、パネルがモーダルウインドウにアニメーションで変形する超軽量スクリプト -cta.js | コリス

2015/04/21 86 users コリス モーダルウインドウ トリガー スクリプト アクション

最近のWebページで人気があるのは、ビジュアルの連続性。 パネルをクリックすると、それが拡大してモーダルウインドウになり、ボタンをクリックすると、それが変形してパネルになるなど、ユーザーのアクションをトリガーに要素が別の要素にアニメーションで表示される超軽量（1.2KB）スクリプトを紹介します。 モーダルウインドウとサイドバーのデモ コマを落としているので分かりにくいですが、ボタンをクリックすると... 続きを読む

Wordpressのメニューとサイドバーをスマホ用に横からスライドイン表示させるカスタマイズ方法

2015/03/19 60 users WordPress グローバルナビ モーダル アコーディオン

WordPressテーマのスマホ表示は、結構頭を悩ませるところです。 中でも特に、グローバルナビメニューや、サイドバーのスマホでの扱いには悩むところです。 僕はこれまで、グローバルナビの場合は、非表示にしておいて、アコーディオン表示させるか、モーダル表示させるかしていました。 サイドバーの扱いはもっとぞんざいで、回り込みを解除して、本文の下に表示させるということぐらいしか、できていませんでした。 ... 続きを読む