スムーススクロールの実装例 ｜ TAKLOG
html要素にscroll-behavior:smoothを指定するだけのコストの低さ、それでいて従来のアンカーリンクの機能を損ねないことから「スムーススクロールはCSSのみで十分」といった技術記事やポストが多く広まっています。 ただ、そういった技術記事やポストは「CSSのみで対応できる」「ワンライナーで実装できる」と言ったコストの低さばかりが先行していて、肝心のデメリットには触れていません。 実際、CSSのスムーススクロールには多くの問題点が孕んでいます。 全てのページ内リンクがスムーススクロールされるCSSのscroll-behavior:smoothを使用すると、ページ内の全てのアンカーリンクがスムーススクロールの対象となります。そのため、限定的にスムーススクロールを無効化したいと言った場合は別途JSでの対応が必要となります。 僕のブログではJS無効環境のフォールバックとしてhidd
Macで使用中のアプリのショートカットキーを一覧表示してくれるユーティリティ「KeyCluCask」が、macOSのキーボードショートカットの表示に対応。
Macで使用中のアプリのショートカットキーを一覧表示してくれるユーティリティ「KeyCluCask」が、macOSのキーボードショートカットの表示に対応しています。詳細は以下から。 KeyCluCask(KeyClu)はKeyCueやCheatSheetが有料/開発終了したことから、Travian Games GmbHでソフトウェアエンジニアを務めるSergi Tatarenkov(Anze)さんがオープンソースで開発を開始したショートカットキーのチートシートアプリで、Macで使用中のアプリのショートカットキーの一覧を表示してくれる機能がありますが、このKeyCluCaskがmacOSのキーボードショートカットの表示に対応しています。 added possibility to list macOS Keyboard Shortcuts (Integrations section) リリース
Q&A形式で分かる 量子コンピューターの 基礎知識
Fundamentals of Quantum Computing Q&A形式で分かる 量子コンピューターの 基礎知識 次世代コンピューティング技術として注目される量子コンピューター。原理や実装方式など、量子コンピューター関連記事を読む上でのガイドとなる基礎知識をQ&A形式でまとめた。（文：宇津木健 監修：藤井啓祐＝大阪大学教授） by MIT Technology Review Japan2022.12.15 35 17 Q：量子コンピューターとはどんなものか？ A：量子力学の原理に基づいた新しいコンピューター 量子コンピューターは「量子力学特有の物理状態を積極的に用いて高速計算を実現するコンピューター」と言える。量子力学特有の物理状態とは、たとえば原子や電子、光子などのミクロな世界で見られる「量子重ね合わせ状態」や「量子もつれ状態」という、量子力学によって説明される状態のことを指す。こ
あっ、そうだ！モダンCSSをまとめておこう
2023年もCSSの進化がすごかったですね！ その進化を2024年でも生かしていけるように、今回まとめておいていつでも参照できるように記事を書こうと思いました。 お読みいただけると幸いです。 一緒に2024年もスタートダッシュで走り抜けましょう。 まず、はじめに この記事では、最近登場した、エキサイティングで、アクロバティックでファンタジックなインパクトのある機能をピックアップして紹介したいと思います。 CSSの多彩な新機能を広く紹介することで、読者がこれらに触れる機会を持てるように努めています。 特に興味を引く機能があれば、他の媒体を通じて更に詳しく掘り下げることをお勧めします。 コンテナクエリ スタイルクエリ :has()セレクタ :nth-child()の「of S」構文 text-wrap: balance initial-letter ダイナミックビューポート単位 広色域のカラー
【Mac/Win対応】DockerでPHPローカル開発環境の最強構築方法
こんにちは、タカフです。 Dockerでローカルマシンに開発環境を構築する時の悩み・やりたいことって色々ありますよね。 例えば僕の場合はこんな感じです。 コマンド一発でローカルマシンにLAMP開発環境を作りたい おなじみのポート番号アクセスはやめてドメインアクセスにしたい ローカル開発環境とてSSLで開発を進めたい DocumentRootはプロジェクト配下のサブディレクトリ(public/htdocs等)にしたい PHPのXdebugは使えるようにしたい（もちろんWebもCliも） MySQLのDBデータはホスト側にもって永続化させたい といったところでしょうか。 もしあなたがDockerでLinux・Apache・PHP・MySQL開発環境を作るにあたって、この中に該当するものがあったなら本記事の内容はお役に立てるかもしれません。 今回全て解決して、その構築方法を記しました。 コマンド
CSSで句読点括弧のカーニングができるようになるぞ！ 日本語が読みやすくなる最近サポートされた・近日サポートされるCSSの機能のまとめ
CSSのこの機能を待っていた人も多いと思います！ CSSで、句読点括弧のカーニングが自動でできたり、フレーズの途中で改行されないようにしたり、日本語と英語が混在したテキストでスペーシングが自動調整されたり、10px以下でも指定サイズ通りに表示されたりなど、日本語が読みやすくなる最近サポートされた・近日サポートされるCSSの機能を紹介します。 Introducing four new international features in CSS by Jack J 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに word-break: auto-phrase;によるフレーズで自動改行 text-autospaceによる文字間のスペーシング text-spacing-trimによる句読
CSSの進化がすごすぎる！ 2つの画像を比較するスライダーは数行のコードで実装できるようになりました
2つの画像を重ねて表示し、画像を比較できるスライダーを実装するには、今まではJavaScriptのライブラリなどを使用していたかもしれません。 ほんの少しのJavaScriptと、あとはシンプルなHTMLとCSSで2つの画像を比較するスライダーを実装するテクニックを紹介します。 まずは、実際の動作をデモページでご覧ください。縦線のレンジバーをマウスでドラッグすると、2つの画像を比較できます。 See the Pen Easy comparison slider by coliss (@coliss) on CodePen. HTMLはシンプルです。2つの画像をsectionで内包し、縦線のレンジバーをinput type="range"で実装します。 <div class="compare"> <section class="before"> <img src="Runner.svg" a
ChatGPT for Developer - Promptのチカラ
ChatGPT がアプリケーションに最初に組み込まれたのは GitHub Copilot かもしれません。ここでは、ChatGPT そのものと、GitHub Copilot の双方を使って、アプリケーション開発を爆速させ、品質を少しでも向上させ。そして、Developer の皆さんのスキルを上げていくための入り口として、機能の概要を取り上げます。 内容: - Promptだけで出来るコト: 業務で使うために抑えておくべきポイント。データ・変換・抽出 - PromptのEngineeringへの適用: 企画から要件定義、設計、実装、デプロイも。 - 開発の生産性と品質をあげるための戦略: Prompt自身の現在の能力、チーム開発に向けて サンプルのPrompt: https://github.com/dahatake/ChatGPT-Prompt-Sample-Japanese/tree/m
あなたの開発生産性を爆上げする、エンジニア向けAIツール22個｜苦しんでプログラミングを学んだ柴犬（くるしば）
こんにちは。くるしばです。 元々コンサルタントの仕事をしていましたが、独学でプログラミングを学習し、Webサービスを作って起業しました。 その後個人で開発したサービスを売却したり、また別のIT系の会社を創業、経営したりしています。 去年の8月から下記のTwitterにてプログラミング学習に関して発信し始め、ありがたいことに13000人以上の方々にフォローして頂きました。 プログラミング初心者に絶対覚えてほしい、ググる時の効率が10倍上がるコツ pic.twitter.com/hK1ZhNavwh — くるしば | 読めば10倍効率が上がるプログラミング学習の教科書 (@shiba_program) September 13, 2022
【VS Code】tasks.jsonで決まった作業を自動化する | DevelopersIO
はじめに VS Codeでコーディングをするとき、Gitの操作やビルド、デプロイなど、決まった処理を手動で実行するのが面倒だなと思ったことがあるのではないでしょうか。tasks.jsonというファイルを使えば、そういった面倒な手順を自動化し、開発効率を上げることができます。 この記事でやること この記事では、作業ブランチにmainブランチの取り込みを行うGitコマンドを自動化してみます。mainブランチを取り込むために、以下のコマンドを毎回手で実行しているとします。 git stash git pull origin main git stash pop これをtasks.jsonに定義して自動化したいと思います。 タスクの作成 タスクを作成するには、VS CodeのメニューのTerminal⇒Configure Tasksを選択します。 Create tasks.json file fr
ここまでできる！CSS最新テクニックと書き方30選
ポップオバーAPI 最新版Chrome 114に搭載された新機能で、コンテンツの一番上に重ねて表示するUI「ポップオバー」。補足の情報やユーザーにアクションを促すことができます。 Introducing the popover APIでは、具体的な使い方や実装例が紹介されています。 範囲スライダーをCSSでカスタマイズ How to Create a Custom Range Slider Using CSSでは、モダンなCSSテクニックを使って、ネイティブHTMLの<input>要素だけで人目を引く、カスタム範囲スライダーを作成する方法が紹介されています。 See the Pen CSS only custom range sliders by Temani Afif (@t_afif) on CodePen.
改正電気通信事業法が施行だけど、またしても何も知らなかったWebサイトやアプリ運用者のために書いておくぜ - フジイユウジ::ドットネット
2023年6月16日 から改正電気通信事業法が施行なんですけど知ってました？ これ、収益目的なら企業運営でも個人運営でもほとんどのWebサービス・スマホアプリが対象という、めちゃめちゃ広範囲にみんなが対応が必要なやつなんですけど、ヤバくない? 何もしてなくない? やっべえなというWEBサイト担当者/アプリ開発者が結構いそうな雰囲気がいんたーねっつから漂ってまいりました。 企業のオウンドメディアや、個人運営のアフィリエイト目的サイトなんかも対象になる場合があって、メディア系サイトはもちろんアプリ開発者にも影響ある感じですので、やるべき内容をブログにしたためておきます。 ※ぼくは法律の専門家ではないので、ちゃんと総務省の公式ドキュメントなどにも当たってくださいね。 ググると「外部送信規律」とか「電気通信事業者又は第三号事業を営む者」とか専門用語の記事ばっかり出てきて自分が何をしたらいいのかの情
【ChatGPT】個人的お気に入りプロンプトまとめ
あなたは、プロの【その分野の専門家】です。 以下の制約条件と入力文をもとに、【出力内容】を出力してください。 # 制約条件： 【前提条件や決まりごと】 # 入力文： 【期待する出力結果や大まかな指示】 あなたは、プロのエンジニアです。 以下の制約条件と入力文をもとに、ブログ記事の内容を出力してください。 # 制約条件： ・重要なキーワードを取り残さない。 ・文字数は30000文字程度 # 入力文： Swaggerについて技術ブログに投稿する文章を書いてください。 構成は、Swaggerとは？、Swaggerのユースケース、Swaggerのメリットとデメリット、Swaggerの書き方（YAMLファイル）、Swaggerの実行方法、まとめです。 構成間で重複した説明は省くようにしてください。 読者がブログを読みながらSwaggerを触れるようにハンズオン形式などを取り入れて文章を作ってください
「怠惰・短気・高慢」であれ、ChatGPTを使って業務効率化しよう(要件定義編)
例として読書記録アプリをつくります！ 筆者が欲しいサービスを作ろうと思い、今回は「読書記録アプリ」をつくります。 最低限の要件は、次のように設定しました。 デモアプリの要件（読み飛ばしてOK） 読書記録アプリを作る目的 読書が苦手なエンジニアが読書記録をし、記録を共有することで、継続して技術本を読めるようになること ターゲット 新人、中堅のWebエンジニア おおまかな要件 ユーザーは新規登録することで、読書記録アプリにログインできる ユーザーは読む本を登録できる ユーザーは本を何ページ読み終えたかを記録できる ユーザーは本を読み終わったら次の本を登録できる ユーザーは他の人がどの本を読んでいるのか、また何ページ読み終えたかを閲覧できる 質問する前に... また、ChatGPTに業務で使用するコードを渡す場合、環境キーやサービスを特定できる情報を送信しないでください。入力内容が他の人に渡って
TypeScriptではじめるChatGPT API：入門から一歩進んだテクニックまで - Uzabase for Engineers
NewsPicks エンジニアの中村です。普段はデータ基盤や機械学習システムの開発、運用をやっています。 さて皆さん、すでにChatGPTは使っていらっしゃるでしょうか。エンジニア、非エンジニアを問わず世の中を席巻している感のある ChatGPT ですが、今月初めにいよいよ API も公開されて、アプリケーションやサービスに組み込みたいと考えている方も多いのではないでしょうか1。 というわけで、弊社でもこの新しい技術をより多くのエンジニアに使いこなせるようになってもらいたいと考え、ChatGPT API に関する社内勉強会を先日開催しました。本記事ではこの勉強会の内容を再構成してお届けします。 とりあえず使うだけなら簡単な ChatGPT ですが、本記事では、長文を扱ったり、ChatGPT と外部のシステムを連携させたりするテクニックなど、知っている人はすでに知っているが、まだそれほど広く
動くWebデザインの最新アイデア28個まとめ
ウェブサイトやモバイルアプリを魅力的にしたいときは、アニメーションを利用すると良いでしょう。 その理由は、ユーザーの注目を無意識に集め、美しさも表現できるから。 さまざまなデザイントレンドとしても、毎年選出されており、まずます需要が高まっています。 実際に、多くの最新ウェブデザインでも採用されており、アニメーションに特化したCSSライブラリも数多く公開されています。 ワンランク上のウェブデザインを作成したいクリエイターに、ぜひ参考にしてほしいアニメーションのアイデアを、まとめてご紹介します。 動くWebデザインの最新アイデアまとめ Daily UI “Luxury Interaction Concept” 高級車の販売を行う、インタラクティブで実験的なコンセプトページで、クリックに応じたコンテンツ遷移が心地よいつくりに。
GitHub Copilot の使い方｜npaka
「GitHub Copilot」を使ってみたので、まとめました。 1. GitHub Copilot「GitHub Copilot」は、人工知能のペアプログラミングシステムです。人工知能 (OpenAI Codex) がコードの候補を提案することにより、プログラマがより迅速に少ない作業でコードを書けるようにサポートします。 サポートするエディタは、次の4つです。 ・Visual Studio Code ・Visual Studio ・JetBrains ・Neovim 2. 使用料金「GitHub Copilot」の使用料金は月10ドル、または年100ドルです。60日間の無料トライアルもあります。 ・Pricing - GitHub Copilot 3. GitHub Copilotの開始「GitHub Copilot」の開始手順は、次のとおりです。 (1) 「GitHub」アカウントを持
JavaScriptの配列メソッド: オブジェクトの配列を扱うときに役立つ便利な配列メソッドを分かりやすく解説
JavaScriptでオブジェクトの配列を操作するためにもっとも有用な配列メソッドとコードを紹介します。 JavaScript Array Methods: A Comprehensive Guide by Luca Spezzano 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに filter()メソッド: オブジェクトの配列からキーstatusがactiveと等しいオブジェクトの配列を取得する find()メソッド: 配列内から特定のidを持つオブジェクトを検索する findIndex()メソッド: 配列内の特定のキーを持つオブジェクトのインデックスを検索する reduce()メソッド: オブジェクトの配列内にある特定のキーの値を合計する map()メソッド: オブジェクトの配列内に含まれる特定のキーに対応する一意
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Word Order Illustrator
2022年に見かけたモダンなCSSの書き方を振り返る
