ChatGPTのVSCodeプラグインが神すぎる件について
(追記) 自動ログイン機能が利用規約に抵触していたらしく、マーケットプレイスより削除されました。 GitHubにAPIを使ったものは残っているので、知識があれば動作させられるかと思います。（自己責任） これを使った再配布等の行動はトラブルの元なので控えた方がよいでしょう。 ChatGPT いいよね 最近一番メッセージやりとりしてるのChatGPTだし、なんなら1日にしゃべる量よりChatGPTと話してることの方が多い可能性まであります ChatGPTのチャットツール自体はこちらから参加して試せるわけですが、プログラムを書くときに使ったことのない言語やライブラリを開拓する際ここまで有難い存在はありません． このようにネット上を探し回ると地味に時間のかかる情報もチャット形式で手に入ります． さて、今回の話題ですが、我が愛しのテキストエディタ「Visual Studio Code」のChatGP
現場で使えるFlexboxレイアウト12選 | BUILD Journal
現場で使えるFlexboxレイアウト12選Update2023.05.12Release2021.06.24Coding HatenaにシェアするTwitterにツイートするPocketにストックするFeedlyに登録する 現場で使えるFlexboxレイアウトを12パターン紹介します。flexboxを紹介する記事はたくさんありますが、知識のみで実例付きで紹介されているページはあまり見かけなかったので、本記事にて詳しく紹介していきます。 flexboxに慣れていない方だけではなくコードを短縮化させたい方も対象の内容となっております。ぜひご一読ください。 flexboxを使った横並び1行レイアウトflexboxを使った横並び1行レイアウトカードUIでよくある横並び1行レイアウトのFlexbox実装。同じ横幅のカードを等間隔で配置するもので、間の余白ももちろん等間隔。これを使う機会は多いので確実
最近の実装に合わせたHTMLテンプレート、基本のコードとすべての要素の役割も解説
最近の実装に合わせた、Webページ用のHTMLテンプレートを紹介します。 レスポンシブ用のHTML、ソーシャルメディア用のHTMLをはじめ、高速表示に欠かせないrel="preload"なども含まれています。IEなどの古いブラウザはプログレッシブエンハンスメントで対応しています。 HTMLテンプレートはすべての要素の役割を各行ごとに解説しているので、自分に不必要なものを削除したり加えたりすることもできます。 My current HTML boilerplate by Manuel Matuzović 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに HTMLのテンプレート（最終形） HTMLのテンプレートを1行ずつ解説 ページのタイトルと説明文、外部ファイル ソーシャルメディア用のHTML アイコンとアドレスバー もう
CSSの新しいプロパティ「content-visibility」レンダリングのパフォーマンスが向上する
Webページのパフォーマンスを向上させることは、CSSでも可能です。去年の暮れからChromeで利用できるようになったCSSの新しいプロパティで、2021年現在Edge, Operaにもサポートされています。 読み込みパフォーマンスを向上させるために最も効果があるCSSの新しいプロパティcontent-visibilityについて紹介します。 content-visibility: the new CSS property that boosts your rendering performance by Una Kravets, Vladimir Levin 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに content-visibilityのサポート状況 CSS Containmentとは content-visi
CSS Flexboxでどのように配置されるかをまとめたチートシート
Flexboxでよく使用するプロパティと値をまとめたチートシートを紹介します。 コンテナ内にアイテムがどのように配置されるかを図やイラストで掲載しており、楽しく直感的にFlexboxの使い方を学べます。 FlexBox Cheat Sheets in 2021 by Joy Shaheb 同じ作者のCSS Gridのチートシートも翻訳しました。 CSS Gridでどのように配置されるかをまとめたチートシート 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 Flexboxの構造 Flexboxの各プロパティと値 flex-directionプロパティ justify-contentプロパティ align-contentプロパティ align-itemsプロパティ align-selfプロパティ flex-grow | shrink
CSSの中央揃えで、最も万能で信頼できる実装テクニック
CSSは進化が早く、中央揃えのテクニックも一昔前のものよりも確実に使いやすくなっています。天地左右の中央に要素を配置する際に、要素の幅や高さが可変だったり、要素の数が増えても対応する最新の実装テクニックを紹介します。 現在主流の5つのテクニックからそれぞれの特徴と最も万能で信頼できるテクニックを評価します。 Centering in CSS by Adam Argyle 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. Content Center 2. Gentle Flex 3. Autobot 4. Fluffy Center 5. Pop & Plop 中央揃えに最適なテクニック はじめに CSSの中央揃えは、ジョークの対象にもなる悪名高い課題でした。しかし今日ではCSSはすべて進化し、素直にこれらのジョー
【HTML/CSS】tableタグを使わない比較表デザイン！レスポンシブ対応！
/************************************ ** 比較表 ************************************/ /* 比較表全体 */ .compare-box { display:-webkit-box;/* 配置 */ display:-ms-flexbox;/* 配置 */ display:flex;/* 配置 */ max-width:600px;/* 横幅 */ margin: 0 auto 2rem;/* 余白 */ border-radius:4px;/* 角丸 */ box-shadow: 0 1px 3px rgba(0, 0, 0, .2); /* 影 */ background: #fef9ed; /* 背景色 */ } /* 左のボックス、右のボックス */ .compare-box .compare-left-
PyCon JP 2018: Webアプリケーションの仕組み - 清水川のScrapbox
Python 3.6.6 (v3.6.6:4cf1f54eb7, Jun 26 2018, 19:50:54)
Apple Watch（watchOS 5）向けのレスポンシブ対応についてのまとめ
現在ベータ版が公開されているwatchOS 5 から、メールとメッセージ・アプリでHTMLメールやリンク先のページがWebKitで表示されるようになるそうです（Safariは搭載されない）。ついに！ウェブコンテンツをApple Watchで見られるようになるんですね。 HTMLメールが見られたら便利だと思うことがしばしばあるのでwatchOS 5の公開が楽しみです。画面は小さいですけど、HTMLメールやウェブサイトの内容をサクッとチェックできたら便利だと思うんですよね。 ということで、そろそろHTMLメールやウェブサイトのApple Watch向けレスポンシブ対応を考えておいても良さそうですね。 以下は「Designing Web Content for watchOS 」というWWDC 2018の公式ビデオの内容を基にまとめたものです。実際の環境で確認したものではないので、watchOS
どんなコンテンツを作っても、ストーリーがなければ心は動かされない | ナイルのマーケティング相談室
コンテンツにはストーリーが必要だといわれます。 なぜなら、人はストーリーがなければ心は動かされないし、記憶にも残らないからです。 ストーリー構成の考え方として有名なものに「ヒーローの旅」があります。 「ヒーローの旅」とは、ジョーゼフ・キャンベルの著書「千の顔をもつ英雄」（ハヤカワ・ノンフィクション文庫）をベースに、脚本家のクリストファー・ボグラーが自著「神話の法則 ライターズ・ジャーニー」（ストーリーアーツ＆サイエンス研究所）でストーリー構成を12段階に簡素化してまとめたものです。 ＼コンテンツ制作代行プランの詳細はこちらから／ 「ヒーローの旅」とは？ 「ヒーローの旅」は、元々作家や脚本家のためにまとめられたものですが、コンテンツマーケティングにおいても、ユーザーとコミュニケーションを図るための手法として有効です。 下図は、その「ヒーローの旅」を円グラフにまとめた「ヒーローホイール」と呼ば
グラブル流運用術〜1700万人を満足させるためのシステム構成、PHPプログラムの考え方〜 // Speaker Deck
2017/10/08 PHPカンファレンス2017
HTMLのheadの書き方、head内に記述する要素の総まとめ
HTMLページのhead内に記述する最小限の構成、そしてmeta要素やlink要素、ソーシャルサービス用の要素、デスクトップ・スマホのブラウザ用の要素などがまとめられた「<head> cheatsheet」を紹介します。 <head> cheatsheet 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 去年紹介した以前の版からいろいろと変更されています。 head内に記述する最小限の構成 head内の要素 meta要素 link要素 ソーシャル関連のhead内の要素 ブラウザ・プラットフォーム関連のhead内の要素 メモ head内に記述する最小限の構成 下記はシンプルなWebサイトで必須となるhead内に記述する最小限のタグです。 <meta charset="utf-8"> <meta http-equiv="x-ua-c
Apache HTTP Server向けのWebアプリケーションファイアウォール（WAF）「ModSecurity」を使ってみよう | さくらのナレッジ
オープンソースのWAF WAFとして利用できるソフトウェアは多数存在しており、その多くはセキュリティ企業などが提供する商用製品/商用サービスとなっている。しかし、数は少ないがオープンソースのWAFも存在する。オープンソースのWAFとしてよく知られているのが次の5つだ。 ModSecurityはApache HTTP ServerやNginx、Microsoft IISのモジュールとして提供されているものだ。このモジュールを組み込むことで、これらWebサーバーをWAFとして利用できるようになる（図1）。 図1 ModSecurityのWebサイト 活発な開発が続けられており、採用実績も多い。DebianやUbuntu、Red Hat Enterprise Linux（RHEL）およびCentOSといったその互換OSなどでは標準でパッケージが提供されており、導入も容易だ。検出用のルールセットは
攻撃者視点で見る Service Worker / PWA Study SW
PWA Study( https://web-study.connpass.com/event/65267/ ) で発表した資料です。
General Structured Data Guidelines | Google Search Central | Documentation | Google for Developers
Send feedback Stay organized with collections Save and categorize content based on your preferences. General structured data guidelines To be eligible for rich result appearance in Google Search results, structured data shouldn't violate the Content policies for Google Search (which include our spam policies). In addition, this page details the general guidelines that apply to all structured data:
これは便利！アイコン型WebフォントのCDN「Font Awesome」
まず、以下のコードでWebフォントの呼び出します。 後は、表示したいところにコードを挿入するだけです。サイト内のアイコンをクリックするとコードが表示されます。 この基本形にクラスを追加すると色々とカスタマイズすることができます。 ちなみに「fa」は表示の基本となるスタイルで「fa-sitemap」はアイコンの種類を表します。スタイルの中身はこんな感じです。 .fa { display: inline-block; font-family: FontAwesome; font-style: normal; font-weight: normal; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .fa-sitemap:before { content: "\f
Font AwesomeをCSSのcontentプロパティで使用する
ホーム ブログ CSS Font AwesomeをCSSのcontentプロパティで使用する Font AwesomeをCSSのcontentプロパティで使用する このサイトでもアイコンとして利用しているFont Awesome 通常Font Awesomeはi要素を追加しますが、CSSのcontentプロパティに記述することでHTMLを変更することなく使用できます。 例：Bootstrap 3 のパンくずで、/を右矢印 に変更する Unicodeは F105 .breadcrumb > li + li:before { content: "\f105"; font-family: FontAwesome; } 簡単な記述で、ご覧のとおり
Debugging Service Workers
Google Developers Codelabs provide a guided, tutorial, hands-on coding experience. Most codelabs will step you through the process of building a small application, or adding a new feature to an existing application. They cover a wide range of topics such as Android Wear, Google Compute Engine, ARCore, and Google APIs on iOS. Codelab tools on GitHubnorth_east �u5�*V �J�*V
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
FIND/47｜みんなで集め、広めていくフォトアーカイブ。
１日１億イベントを捌く サーバーレスアーキテクチャ
