こんにちは。しおぱんです。ChatGPTのプラグインがあまりに多すぎて大変だったので、プラグイン機能一覧を作りました。 【お知らせ】 プラグインの増加速度が早すぎるため、記事作成が追いついておりません🙇 お急ぎの方はこの記事作成でも利用しております、こちらのプロンプトを使ってみてください🙌 【カテゴリ検索の方法】 ブラウザの検索バーに [カテゴリ名] を入力すると絞り込みできます🙆 Mac: Command + F / Windows: Ctrl + F 【カテゴリ一覧】 [エンタメ] [音楽・音声] [画像・動画] [学習] [学術] [語学] [プログラミング] [ビジネス] [マーケティング] [ファイナンス] [ニュース] [ツール] [リサーチ] [ウェブアクセス] [天気] [旅行] [レストラン] [ショッピング] [医療・健康] [不動産] [求人] [ユーティリティ
なぜMACアドレスとIPアドレスは両方必要なのか？
この記事は，ネットワークの学習の序盤につまずくポイントである 「MACアドレスとIPアドレスってどっちか片方だけじゃだめなの？」「レイヤ2と3って結局何が違うの？」 という疑問について，私なりの回答をまとめた記事です。世に不正確な記事が出回っているように見受けられるので，正確な回答をまとめたく、長文になってしまいました。とはいえ，初学者向けにかなり初歩的なところから書いたつもりですので是非読んでみてください。 この記事について この記事を読むと何が分かるか MACアドレスとIPアドレスの役割の差が分かる レイヤ2（＝同一サブネットの通信）とレイヤ3（＝サブネット間の通信）の仕組みが分かる ネットワーク設計時にレイヤ2・レイヤ3のいずれで設計すべきか判断できる なお，教科書的な説明ではなく，概念や捉え方の説明となっていますので，試験勉強には役立ちません。実務としてネットワーク設計を行う方の役
CSSコーディングに役立つサービスやWebサイト運用で役立つSEO関連のツールなど、Web制作の現場で使えるWebサービスを13個紹介します。ワンクリックで取得できるコードや、ドラッグ&ドロップだけで完結するものなど、直感的に作業できるサービスばかりです。あなたの現場でもぜひ利用してみてください。 Fancy Border Radius Generator CSSのborder-radius を使ってボックスや画像をユニークな形状に変化できるWebサービス。 Fancy Border Radius Generator シンプルなコードで実装可能です。 正方形の写真をCSSで変形させました 上のように正方形の写真をユニークな画像に見せることができます。 Fancy Border Radius Generator Clippy – CSS clip-path maker CSSのclip-pa
エンジニアのための Figma 知識
本記事の多くは Inspect モードを前提に解説しています。 下記に Dev Mode に対応した解説を書いてみたのであわせてご参照ください。 https://codezine.jp/article/detail/18000 エンジニアにデザインツールの知識・習熟は必要か？ しなくても仕事はできると思うのですが、あるとよりクオリティの高い仕事ができることは間違いありません。 という訳でエンジニアがエンジニアとしての仕事をしていく上で「Figma のこういうことを知っておくと良さそう」という知識をまとめてみました。 ユースケースを考える まず始めにデザインは作らないはずのエンジニアが Figma を使う時にどんなユースケースがありそうかを考えてみます。 デザインを元に実装する時 デザインから何かを生成したい時(コードとか画像とか) 自分でちょこっとデザイン修正しちゃう この辺りがあるかな〜
新感覚！メソッドチェーンでアニメーションがスラスラ書ける「Tween24.js」を作りました アニメーションを作る時に、「思いついた演出をすぐに実装したい」「頭の中ではできているのに、コーディングするのが面倒」と思ったことはありませんか？アニメーション作成にはライブラリを使用することが多いと思いますが、使い方を調べて覚えて、ドキュメントからコピペしたり、ひたすらタイピングをして… 私はこれらの問題を解決するために、「Tween24」というライブラリを作りました。Tween24はメソッドチェーンで記述するのが特徴で、たった1行でアニメーションが実装できます。依存ライブラリもなく、単体で動作します。アニメーションライブラリの多くはオブジェクト型でプロパティを指定するためタイピングが多くなりがちですが、メソッドチェーンであればエディターのコード補完機能でスラスラと記述できます。 その他にも、メソ
この記事では、Webデザイン制作の面倒な作業をラクにするCSS便利ツール87個をまとめています。なお、新しいツールを随時アップデートしています。 CSS FlexboxやGridをつかったレイアウト生成ツールや、レスポンシブ対応の画像ツール、配色に困ったときに便利なツール、多彩なCSSアニメーション、話題のニューモーフィズムなど、CSSスタイリング時間節約や、さまざまな問題を瞬時に解決することを目的に作成された便利なツールが揃います。 Web制作に活用したい最新ツールと合わせてチェックしてみてはいかがでしょう。 これだけあれば困らない！Web制作を快適にする最新オンラインツール48個まとめ Web制作�の面倒�な作業をラクにするCSS便利ツールまとめ CSS box-shadow Examples さまざまなサイトで実際に使われているCSS box-shadowを集めているライブラリ。お好
昨日の自分「今作ってる曲まじで良すぎる。天才かもしれん」 今日の自分「ﾅﾆｺﾚ。曲作り下手すぎか～～」 この記事は新歓ブログリレー23日目の記事です。 こんにちは、カシワデと言います。サウンド班に所属していてパソコンで音楽を作っています。 皆さん、DTMってしってますか？ DTMとはDeskTop Musicという和製英語の略で、パソコンで音楽を作ることを広く指します。パソコンで音楽を作ると言っても昨今の曲は大体パソコンを用いて作られているので、DTMというと特に"打ち込み"のニュアンスが出るような気がします。 でも、『パソコンで音楽を作る～』とか『打ち込み』っ… 🎉入学おめでとう🎉まずは新入生の皆さん、ご入学おめでとうございます！！！これから始まる大学生活は非常に短いですし、世間で言われる程時間に余裕があるわけでは無いので、後悔の無い充実した生活を送ってください！
正規表現は文字列の検索や置換を行うための強力で便利なツールです。基本をマスターすれば開発から日常の事務作業までさまざまな場面でラクをできる魔法の道具ですが、見た目がちょっと分かりづらいので、避けている方もいるのではないでしょうか？ 筆者の個人的観測ですが、とりわけフロントエンドのエンジニアには正規表現に苦手意識を感じている方が多いようです。 この記事では正規表現の基本と、正規表現がどこで使えてどれだけ便利になるのかを紹介します。 正規表現の基本：正規表現ってそもそも何？ 正規表現（regular expression）は、ごく簡単にいえば「さまざまな文字列のバリエーションをひとつの文字列で表現したもの」です。たとえば、郵便番号の7桁の数字には（実際に使われていないものも含めれば）一千万通りのバリエーションがありますが、正規表現を使えば次のようにひとつの文字列で表現できます。 ▼「7桁の数字
私は、セキュリティの専門家ではないです。 しかし、今回のnote株式会社の記事投稿者のIPアドレスが漏洩した件で、note株式会社がコメントで「なお、一般的なIPアドレスから、個人情報が特定されることはありません。 」と書いている事には大きな違和感を感じます。 IPアドレスから分かる事この問題を論じるには、まず、IPアドレスから何が分かるかを説明する必要があります。 ・使っているISPや携帯会社 ・郵便番号 ・住所 ・経度・緯度 ・企業が契約して利用している場合には企業名 例えば、IPデータベース会社の一つであるMaxMindで調べてみましょう。 以下は、今回、漏洩したIPアドレスの一つを使って調べたものです。 ・IPアドレス ・Country Code(国コード) … JP（日本） ・Location (住所) … Shinjuku, Tokyo, Japan, Asia(東京都新宿区)
英語の「Authentication」を整理する ここからは先ほどの分類で言うところの「ユーザ認証」としての「認証」、つまり英語の「Authentication」に該当する「認証」について、さらに整理を進めていきます。 先ほど、「ユーザ認証」を「システムを利用しようとしているユーザを、システムに登録済みのユーザかどうか識別し、ユーザが主張する身元を検証するプロセス」と説明しました。「ユーザの識別」と「身元の検証」はユーザ認証に欠かせませんが、実際は他にも「ユーザの有効／無効状態の確認」や「検証に成功した場合の身元の保証（アクセストークンの発行等）」などの処理も一般的にユーザ認証のプロセスには含まれます。 ここで冒頭の「○○認証」を振り返りましょう。パスワード認証、SMS認証、指紋認証、顔認証は実はここで言うユーザ認証には該当せず、ユーザ認証中の一処理である「身元の検証」を担っていることがお
初めてAWSを使っていくときに読んでおきたいセキュリティの覚書、管理者編です。これからAWSの管理者となる人は是非読んでください。あるいは管理者を任せる方が活用してください。 こんにちは、臼田です。 みなさん、AWSのセキュリティ気にしてますか？(挨拶 今回はこれからAWSを使う組織や使い始めた組織向けに、AWSセキュリティで絶対に覚えておく必要があることを解説します。 この記事を読んでいただければ、自信を持って安全にAWSを利用し始められます！ なお、初めてAWSを使う利用者に向けた記事として初めてAWSを使うときのセキュリティ覚書〜利用者編〜 | コラム | クラウドソリューション｜サービス｜法人のお客さま｜NTT東日本を先に掲載しています。本記事はこの続編で管理者としての内容を綴っていきます。まだ読んでいない方は先にそちらをご覧ください。 目次 前置き〜AWSの管理は大変？〜 組織に
便利なのが登場！ 最近見かけるさまざまなUI要素600種類以上をシンプルなHTMLとCSSで簡単に実装できる -UIverse
button { --border-radius: 15px; --border-width: 4px; appearance: none; position: relative; padding: 1em 2em; border: 0; background-color: #212121; font-family: "Roboto", Arial, "Segoe UI", sans-serif; font-size: 18px; font-weight: 500; color: #fff; z-index: 2; } button::after { --m-i: linear-gradient(#000, #000); --m-o: content-box, padding-box; content: ""; position: absolute; left: 0; top: 0; wi
覚えておくと便利なCSSデザインTipsを9つ集めてみたUpdate2023.05.18Release2023.05.18Coding HatenaにシェアするTwitterにツイートするPocketにストックするFeedlyに登録する これまでは画像で表現していたデザインを今ではCSSのみで実装できるものが多くなってきました。今回は覚えておくと便利な現場で使えるCSSデザイン Tips を9個紹介します。いざという時に使えるものばかりですので、ストックしておくことをおすすめします。 見出しの改行位置をCSSで調整する見出しの改行位置を調整する見出しの文章が中央揃えである程度の文字数があると、スマホで見た場合意図したところで改行ができていないことがあります。上の動画をご覧ください。上側の文章は改行されると2行目3行目も中央寄りになるため、画面サイズによっては最終行が1〜3文字になってしまい
一般企業であまり前例がない「認証VLAN」を導入した、その後の学び - MonotaRO Tech Blog
こんにちは。サービスインフラ-Bグループの宮本・高野です。 今回はManabiCon第3回で発表した「梅田オフィスで認証VLANを導入したプロジェクト」について紹介します。 自己紹介 梅田オフィス構築後に発生した問題 前提 フリーアドレス 通信品質の安定 本題 そもそもVLANとは何なのか？ じゃあ認証VLANとは何なのか？ 認証VLANのキーワード「IEEE802.1X」とは？ プロジェクト概要 プロジェクト体制 プロジェクトの予定期間 実現したいこと 検証時の苦労 苦労したことその1: 必要機材とテストパターンの洗い出し 苦労したことその2:検証環境の構築 苦労したことその3:VLAN設計変更 苦労したことその4:有線LAN接続時、通信が不安定になる 苦労したことその5:認証VLANを利用しているPCへリモートデスクトップ接続ができない 在宅勤務・出社勤務 802.1X の認証モードに
関数名、メソッド名、変数名でよく使う英単語のまとめ
プログラミングをしていると関数名、メソッド名、変数名をどうするか悩みます。 ロジックより命名に時間を費やすこともざらにあります。翻訳したり、一般的な命名規則なのかいつも検索して大変です。 よく使うサイトの内容をコピってメモしておく 関数名とメソッド名の違いについて よく使う英単語のまえに、いつもごっちゃにして使っているけど、定義はこんな感じ 「関数」と「メソッド」の違い 似ているところ どちらも何か（引数）を入れると処理をして何か（戻り値）を返してくれます。 違うところ やってること自体は大差ありません。概念としては違います。 メソッドはオブジェクト指向で登場する用語で、オブジェクトの動作を定義したものです。 まずオブジェクトありきなのですね。一方の関数は、オブジェクト云々は関係ありません。 個人的な使い分け Java で登場する関数は「メソッド」です。C 言語で登場する関数は「関数」と呼
第0章. なぜ Scala を使うのか？ はじめに 本稿は、John C. Mitchell 氏らによる Concepts in Programming Languages を基に自身の見解を交え、私がなぜ Scala を好んで使うのかを論じた記事になります。 プログラミング言語の歴史 本題に入る前に、プログラミング言語の歴史について紹介します。 年代 言語・イノベーション 1950 Fortran and Cobol 1960 Lisp and Algol 1970 Abstract data types (Simula, C, SQL) 1980 Objects (Smalltalk, C++) 1990 Java, JavaScript, Python, Ruby これは、年代ごとに開発された言語およびイノベーションを表にまとめたものになります。ただし、この表には欠けている事柄があり
2005年に設立されたセキュリティ企業Haschek Solutionsの創設者であるオーストラリア人プログラマーのクリスティアン・ハスチェク氏が、仕事中に発見した謎のRaspberry Piについて、自身のブログにまとめています。 The curious case of the Raspberry Pi in the network closet https://blog.haschek.at/2019/the-curious-case-of-the-RasPi-in-our-network.html クリスティアン氏は父親と共にセキュリティサービスを提供するHaschek Solutionsという企業を運営しています。ある日、クライアントのオフィスで働いている父親から、「これは何？」というメッセージと共に、1枚の写真が送られてきます。 この謎のRaspberry Piは、クライアントの
カードやパネルの外側と内側に角丸を使用したときに、なんだかバランスが悪いなと思ったことはありませんか？ 角丸を二重にするときに外側の角丸と内側の角丸の値を同じに設定すると、内側の方がすこし大きく見えて、不格好になってしまいます。 外側の角丸と内側の角丸を美しいバランスで実装する相対角丸のテクニックを紹介します。 まずは、ネストされた角丸を美しいバランスで実装したデモをご覧ください。 See the Pen Inner Radius Design Tip with CSS Custom Properties by coliss (@coliss) on CodePen. 外側の角丸と内側の角丸を美しいバランスで実装するポイントは、「外側の半径 = 内側の半径 + パディング」に設定することです。こうすることで、外側の角丸と内側の角丸の中心点が同じになり、美しいバランスになります。 ちなみに、
Web・コーディング界隈で読み間違いしやすい用語一覧
日本人向けの記事のため表記がカタカナとなっております。そのため完全に正確な英語の発音を保証しているわけではございませんのでご了承ください。（より正しい発音が気になる方は各自で発音記号をお調べください。） また私自身は帰国次女でもない純粋な日本人＆英語力凡人レベルです。明らかに間違っているものがありましたらコメントやTwitterなどでご指摘ください。 もちろん他にもこれが間違いやすいよ、という用語もあればお待ちしております🙏 ❓がついてるのは決めきれないorネイティブでも揺れがあるor議論が必要 なものです。 a11y エイイレブンワイ absolute アブソルート Adobe アドビ Airbnb エアビーアンドビー ajax エイジャックス align アライン（text-align テキストアライン など） AMP（Accelerated Mobile Pages） アンプ An
近年のフロントエンド開発にはコンポーネントという概念が付いて回ります。React・Vue・AngularといったViewライブラリでは、コンポーネントを定義してそれを組み合わせてアプリを作ります。また、いわゆるWeb Componentsとして知られる仕様群により、ライブラリに依存せずに“コンポーネント”を作ることもできるようになってきています。 コンポーネントは、何らかの機能（あるいは責務）を持った部品です。また、コンポーネントによっては再利用される（アプリ内の複数の箇所から利用される）ことを意図しているものや、そもそもライブラリとして配布されているようなものもあります。アプリの機能の一部分を抜き出したものという見方をすれば、コンポーネントというのは関数にとても類似した概念であることが分かります。 コンポーネント設計によって、言い換えればアプリがどのような機能を持ったコンポーネントたちに
CSSのユーティリティクラスと「関心の分離」——いかにしてユーティリティファーストにたどり着いたか（翻訳） - yuhei blog
Tailwind CSS作者のAdam Wathan氏による「CSS Utility Classes and "Separation of Concerns"」の日本語訳です。翻訳に当たって原著者の許諾を得ています。 2021年10月29日に全文再翻訳しました。 この数年の間で、私のCSSの書き方は、非常に「セマンティック」なアプローチから「ファクショナルCSS」と呼ばれるものに変わりました。 この書き方でCSSを書くと、多くの開発者からかなりの反感を買うことがあります。そのため、私がいかにしてここまでたどり着いたかを説明することで、その過程で得た教訓や洞察について共有したいと思います。 第1段階 「セマンティック」なCSS よいCSSのためのベストプラクティスとして、耳にするであろうことのひとつは「関心の分離」です。 考え方としては、HTMLにはコンテンツについての知識のみを含めるべきで
概要 みなさんは、このドロップシャドウを見てどう思いますか？ ドロップシャドウの色が濃かったり、ドロップシャドウの向きが変な方向だったり、 あまり綺麗なドロップシャドウとは感じないですよね？ この記事では、これが発生する原因 と 綺麗なドロップシャドウの使い方を解説していきます。 この記事を読んで理解すれば、これからドロップシャドウに悩むことはなくなるでしょう！ ドロップシャドウが綺麗にならない原因 1. デザインを3次元として捉える UIやグラフィックデザインは、複数の平面が重なりながら、組み合わさって作られています。 例えばUIだと、 ベースとなる平面に、カードの平面が重なっていたり、 カード平面の上に画像やボタンといったオブジェクトが置かれています。 このように、UIやグラフィックデザインは２次元で作られているのではなく、 各平面・オブジェクトがZ軸上に重なることで作られています。
はじめに プロジェクト作成 プロジェクト構成 コンポーネント レイアウト ページ ビルド Blog テンプレート Portfolio テンプレート Documentation テンプレート まとめ はじめに 先日1.0リリースとなった、静的サイトジェネレータのAstroの紹介です。 JSで作成したページをビルドして、JSを含まない早いサイトを生成し、必要な場合には React や Vue といった好きなフレームワークを簡単に組み込むことができるのが特徴になります。 プロジェクト作成 Node は、v14.18.0 以上、または v16.12.0 以上が必要です。 npm や yarn、pnpm で create astro でプロジェクトを作成します。 # npm $ npm create astro@latest # yarn $ yarn create astro # pnpm $ p
CSS に、コンテナクエリという機能があるらしい。 メディアクエリでは画面全体の大きさに応じて要素のスタイルを変えることができたけど、コンテナクエリを使うと当該要素の親の大きさに応じてスタイルを変えられる。 /* メディアクエリの例 */ /* 画面幅が 400px 以下だったら、div を赤くする */ @media screen and (max-width: 400px) { div { background-color: red; } } /* コンテナクエリの例 */ /* div の親要素の幅が 400px 以下だったら、div を赤くする */ @container (max-width: 400px) { div { background-color: red; } } その機能が Google Chrome Canary で使えるようにされたと聞いたので、使ってみた。 こ
Tailwind考 - uhyo/blog
皆さんこんにちは。最近とある事情でTailwind CSSにわりと真剣に向き合わないといけなくなった筆者です。 Tailwind CSSの話題は、Twitterのフロントエンド界隈では定番のトークテーマのひとつです。しかし、筆者の考えを文章にまとめたことは無かったので、このたびブログ記事にすることにしました。 結論筆者が一番みなさんに伝えたいことは、Tailwind CSSは考え無しに採用してよい技術ではなく、採用するには熟慮が必要だということです。とくに、フロントエンドのスターターキット的なプロジェクトの中にTailwind CSSが混ざっていることがありますが、あれはけっこうな罠です。気軽に採用すべきものではありません。 筆者の考えでは、Tailwind CSSの採用を考慮に入れてよいのは次の2つの場合です。 デザインにこだわりがなく、最低限整っていればいい場合。デザイナー不在のプロジ
マルチテナントSaaSアーキテクチャの構築
TOPICS 発行年月日 2025年01月 PRINT LENGTH 468 ISBN 978-4-8144-0101-7 原書 Building Multi-Tenant SaaS Architectures FORMAT Print PDF SaaS（Software as a Service）とは、ソフトウェアをクラウド環境などでホストし、ユーザーにサービスとして提供する形態のビジネスモデルです。マルチテナントとは、複数のユーザーが同一のリソースを共有するモデルや、それらを統一された体験を通じて管理する仕組みを指します。セキュリティや可用性、運用面などで独自の考慮事項が必要となりますが、インフラストラクチャコストの削減や運用効率の向上が見込めるため、近年その採用件数は右肩上がりに増加しています。本書は、エンジニア向けの本格的なSaaS解説本として、マルチテナントSaaSの概念、実践的
「フリーWiFiでも安全にインターネットを使いたい」 「接続元に固定IPアドレスを使いたい」 「国外からでも日本国内と同じインターネット環境を使いたい」 これらの要望は、VPNサーバーを使えば全て叶えることができます。ただしVPNサーバーの構築は、方法によっては手間がかかる上にコストも高くなるため手軽には行えません。 この記事ではVPNサーバーとは何か初心者の方にもわかりやすく解説した上で、VPS＋SoftEhterで簡単かつ安価にVPNサーバーを構築する方法を紹介します。 VPNサーバーとは VPNとは、「Virtual Private Network」（仮想プライベートネットワーク）を略した言葉です。VPNでは通信キャリアの公衆網を使い、仮想的に自社専用のプライベートネットワークを構築します。 その上でVPNサーバーとは、自社でVPNを実現するために必要なサーバーのことです。VPNサー
CSS Modulesの歴史、現在、これから - Hatena Developer Blog
マンガメディア開発チームの id:mizdra です。半年ほど前から「フロントエンドエキスパート」という肩書きをもらい、社内でフロントエンドの啓蒙活動をしています。具体的にどんな活動をしているかについては、社内のポッドキャストで少し話しましたので、興味があれば聞いてみてください。 developer.hatenastaff.com 最近、私はReactを採用する社内プロダクトでのCSSの書き方を検討していました。最終的にそのプロダクトでは、CSS Modulesを採用するに至りました。しかしその過程で、CSS Modulesのメンテナンス体制に対して懸念があり、将来的な存続を危ぶむ声が界隈にあることを知りました。 ただし、実際にメンテナンス体制について調べてみたところ、万全ではないものの引き続きメンテナンスがされていて、使用もできることが分かりました。そこで、今回はCSS Modulesに
見出しなどのテキストを目立たせたいときに便利なフキダシ（吹き出し）。 この記事では、HTMLとCSSだけで簡単に実装できる、シンプルなデザインのフキダシをご紹介します。 雑誌やポスターなどで見かける可愛いあしらいをウェブサイトにも取り入れたいと思ったことが、今回のテーマを選んだきっかけです。 とくにフキダシは、少ないコードで表現でき、見出しなどのテキストに華やかな印象を与えられます。 ウェブサイトを制作する際に、ぜひ取り入れてみてください。 また、この記事のほとんどの作例で、CSSの疑似要素『::before』と『::after』を利用しています。 疑似要素を使うと、不要なHTMLタグを増やさずにCSSで装飾できます。 ::before ＝ 選択した要素の最初の子要素として疑似要素を生成 ::after ＝ 選択した要素の最後の子要素として疑似要素を生成 これらは、要素に装飾的な内容を追加
現場で使えるFlexboxレイアウト12選Update2023.05.12Release2021.06.24Coding HatenaにシェアするTwitterにツイートするPocketにストックするFeedlyに登録する 現場で使えるFlexboxレイアウトを12パターン紹介します。flexboxを紹介する記事はたくさんありますが、知識のみで実例付きで紹介されているページはあまり見かけなかったので、本記事にて詳しく紹介していきます。 flexboxに慣れていない方だけではなくコードを短縮化させたい方も対象の内容となっております。ぜひご一読ください。 flexboxを使った横並び1行レイアウトflexboxを使った横並び1行レイアウトカードUIでよくある横並び1行レイアウトのFlexbox実装。同じ横幅のカードを等間隔で配置するもので、間の余白ももちろん等間隔。これを使う機会は多いので確実
2022年3月17日 JavaScript Web Animations APIとは、他のライブラリーを使わずにアニメーションを実装できるJavaScriptの仕様です。CSSアニメーションと違い、様々な関数やイベントと組み合わせてより柔軟に、より豊かな表現が可能となります。今回はそんなWeb Animations APIを使ってみましょう！ ↑私が10年以上利用している会計ソフト！ Web Animations APIの基本の書き方 基本的な考え方や構造はCSSアニメーションと同じですが、アニメーションの内容やどう動かすかの指定は、配列やオブジェクトで記述していきます。基本形はこんな感じ： JavaScript 動かす要素.animate(動かす内容, 動きの詳細); 動かす内容（キーフレーム） animate() の第一引数には動かす内容、キーフレームを指定します。CSSと同じ形でプロ
現在の実装でよく使用されるCSSの機能をはじめ、まもなく使用できるようになる新機能まで、現在とこれからのCSSを紹介します。 CSS3が登場した2015年以降の新機能、2022年これから登場するCSSの新機能、最近のCSSについてWeb制作に携わる人は要チェックです。 What's New Since CSS3 by Chris Coyier 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSS3以降の新機能 CSSワーキンググループ これから登場する新機能 はじめに 「CSS3」はCSSにとって大成功でした。たくさんの新機能がリリースされ、素晴らしいものばかりでした。CSSグラデーション、CSSアニメーション、border-radius、box-shadow、transform、などたくさんあります。さらに、CSS
この記事で行なっていること 凄すぎて”ズキズキワクワク"が止まりません はじめに ついこの間、ChatGPTは2022年1月までの情報を学習した、というい発表がありましたが、さらに今回のアップデートで 画像解析機能(GPT-4V) が追加され、アップロードした画像を使った新たなタスクの実行が可能になってます。そして、それが凄すぎます 衝撃的な投稿 まずはこちらの衝撃的な投稿をご覧ください。 動画は自転車の画像と共に「サドルを下げる手助けをしてください」で始まります。 ChatGPTからレコメンドが返ってきますが、それに対して、質問者は追加で ポイントになりそうな部分を拡大してアップロード マニュアルと自分の持っているツールの写真もアップロード します。 その結果、その質問者は、サドルを下げることに成功！そんな内容です。 自分の環境で、画像解析機能(GPT-4V)を使えるのか？ さて、画像解
SOLID原則を理解し、JavaScriptで実践するためのガイド - deve.K's Programming Primer - プログラミング初心者のための入門ブログ
ソフトウェア開発者にとって、堅牢でテスト可能で拡張性があり、保守性の高いオブジェクト指向のソフトウェアシステムを設計することは重要です。 そこで登場するのがSOLID原則です。 SOLIDは、ソフトウェア開発中に生じるかもしれない特定の問題を解決するために5つの設計原則が組み合わさったセットです。 この記事では、SOLID設計の原則について詳しく学んでいきます。 具体的には、SOLID原則が何を意味しているのか、各部分がそれぞれ何を表しているのか、また実際のプログラム例を挙げながら現役のプログラマーが説明します。 さらに、JavaScriptを使ってこれらの原則を実装する方法も紹介します。 SOLID設計原則とは？ 単一責任原則 (SRP) Open/Closed原則 リスコフ置換原理 (LSP) インターフェース分離原則 (ISP) 依存関係逆転の原則 最後に SOLID設計原則とは？
なぜCSSでボタンを作るのか？その前に、なぜCSSでボタンを作るのか？について少しだけ考えたいと思います。 簡単に言ってしまえば、 軽い！拡張性がある！解像度の心配がない！簡単！と言った理由ではないでしょうか？ 画像でボタンを作ることも多いと思いますが、「画像じゃないほうがいいなあ」と思うことも多いと思います。 もちろん、デザイナーから上がってきたデザインデータからボタンを切り取って、HTMLに設置して、CSSでホバーはopacity:0.8、とかやれば簡単ではありますが、デザインツールの進化やレスポンシブの一般化に伴い、そういったイケてなくて古臭いやり方はあまり望ましくないです。 特にWebの場合、テストの繰り返しが必要ですが、画像でボタンを作るとなるとテスト用にいくつもの画像を作らなくてはいけません。色やテキストを変えるとなると画像すべてを修正する必要があります。しかし、CSSボタンで
この記事はOpenCV Advent Calendar 2020の12日目の記事です。 他の記事は目次にまとめられています。 対象者 以下みたいな作業依頼を受けることのある人。 つまり、デザインに予算はつかないけど、ある程度の工夫を求められるやつ。。。 上長「部内とかで見せるちょっとしたデモをパパッと作って欲しい」 高橋「デザインは○○さんか、△△社さんにお願いします？」 ※○○さん：デザイン会社から派遣で来ているデザイナーさん ※△△社：デザイン会社 上長「今回、デザインに出すお金は無い」 高橋「What？」 高橋「それじゃ、見た目は気にしな」 上長「偉い人も見る可能性あるからソレっぽくしといてもらわないと困る」 高橋「短い間ですが、お世話になりました」 Flaskとか立てて、UI作る人とデザイナーと役割分担出来るようなプロジェクトは対象外 はじめに OpenCVとかPillowで出来る
ソーシャル経済メディア「NewsPicks」で推薦や検索などのアルゴリズム開発をしている北内です。Pythonは頻繁に新機能や便利なライブラリが登場し、ベストプラクティスの変化が激しい言語です。そこで、2024年2月時点で利用頻度の高そうな新機能、ライブラリ、ツールなどを紹介したいと思います。 この記事では広く浅く紹介することに重点を置き、各トピックについては概要のみを紹介します。詳細な使用方法に関しては各公式サイト等での確認をおすすめします。なお、本記事ではOSとしてmacOSを前提としています。 環境構築 Pythonの環境構築はpyenvとPoetryの組み合わせがもっとも標準的でしょう。 以下の手順でpyenvとPythonをインストールできます。 brew install pyenv # Bashの場合 echo 'eval "$(pyenv init -)"' >> ~/.ba
CSSのbackground-imageプロパティは背景画像に関するCSSですが、単に背景に画像を表示させるだけでなく、実はアニメーションと組み合わせて多彩な表現ができます。本記事ではbackground-imageの特性を活かしたアニメーション表現について解説します。 サンプルコードもありますので、実際の案件に取り入れてみたりbackground-imageの仕組みについて学んでみたりしてください。※サンプルコードはSass（SCSS）を使用しています。 サンプルを別ウインドウで開く コードを確認する background-imageとアニメーション タイトルと矛盾するようですが、background-imageプロパティ自体はanimationプロパティやtransitionプロパティを用いてアニメーションできません。もしbackground-imageプロパティをアニメーション可能に
Tailwind CSS 社内勉強会【まとめ】 - RAKUS Developers Blog | ラクス エンジニアブログ
背景 スコープ Tailwind CSSとは？ コンポーネント指向とは？ Tailwind CSSのメリット class名を考える必要がない デザインシステムの最低保証 ドキュメント、チートシートの豊富さ Tailwind CSSのデメリット classに多くのコードを書く必要があり、可読性が落ちやすい CSSの理解度がある程度必要 デザインを100%再現したい場合に強味を生かしづらい 他ライブラリやフレームワークとの比較 Bootstrapとの比較 Material UI/Vuetify等のUIライブラリとの比較 インライン記述との比較 まとめ 所感 参考 背景 こんにちは。mtaaaです。 社内のフロントエンド勉強会でTailwind CSSについて発表を行ったまとめとして、ブログに残したいと思います。 スコープ Tailwind CSSとは？ なぜTailwind CSSに注目が集ま
この記事では、普段のホームページ制作で直面しがちな課題を解決するCSSテクニックをまとめて紹介しています。 クライアントからの要望も多いCSSの小技テクから、「これがCSSだけでできるの？」と疑いたくなるような最新の使い方まで、実例やサンプル用ソースコードと一緒に確認できます。 ここで紹介されているCSSテクニックを利用すれば、これまで頭を抱えていた問題や課題も、一発で解決できるかもしれません。 コンテンツ目次 1. 入力フォームをカスタマイズしたい 2. ナビゲーションメニューを使いやすくしたい 3. ボタンを目立たせたい 4. リンク用エフェクトにこだわりたい 5. スクロールバーをサイトの色で統一したい 6. ドロップシャドウの影にもこだわりを 7. グラデーションをビンテージ風にしたい 8. CSSで要素を中央寄せする5つの方法 9. ブラウザごとのデザインのずれを防ぎたい 10.
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ChatGPT プラグイン機能一覧｜しおぱん
Web制作の現場で使える無料のWebサービス13選 | MxGrain - デザイン制作
新感覚！メソッドチェーンでアニメーションがスラスラ書ける「Tween24.js」を作りました - ICS MEDIA
Web制作の面倒な作業をラクにするCSS便利ツール87個まとめ
VSCodeで最強のMarkdownノートエディタを作ろう
覚えれば一生もの！ ウェブエンジニアのための正規表現活用入門 - ICS MEDIA
noteのIPアドレス漏洩の本当の問題点｜竹洞 陽一郎
「認証」を整理する | IIJ Engineers Blog
初めてAWSを使うときのセキュリティ覚書〜管理者編〜 | DevelopersIO
覚えておくと便利なCSSデザインTipsを9つ集めてみた | BUILD Journal
プログラミング言語論入門 - riswu’s blog
企業に仕掛けられた謎のRaspberry Piを追跡して実行犯を突き止めるまで
CSSで角丸を美しく実装するテクニック、ネストされた外側と内側を相対角丸の美しいバランスで実装
CSSとコンポーネント設計に対する考察 - uhyo/blog
【CSS】「なんかドロップシャドウがダサくなるんだけど」を解決する。 - Qiita
モダンで早い静的サイトジェネレータ Astro の始め方 - A Memorandum
CSS の Container Queries おためし - 見返すかもしれないメモ
カゴヤのVPS＋SoftEther VPNで簡単にVPNサーバーを自作しよう
HTML・CSSで実装するかわいいフキダシのアイデア - ICS MEDIA
現場で使えるFlexboxレイアウト12選 | BUILD Journal
素のJavaScriptだけでアニメーションを実装するWeb Animations API
現在の実装でよく使用されるCSSの機能、これから登場するCSSの新機能のまとめ
GPT-4V: 驚きを隠せない進化！凄すぎて"ズキズキワクワク"が止まりません！！！ - Qiita
CSSボタンデザイン120個以上！どこよりも詳しく作り方を解説！
OpenCVでのデモの見栄えを工夫したまとめ(ディープラーニング系) - Qiita
2024年のPythonプログラミング - Uzabase for Engineers
backgruond-imageを使ったCSSのアニメーションテクニック - ICS MEDIA
よくあるWeb制作の悩みをCSSで解決！最新テクニック40選まとめ