WebKit Features in Safari 16.4
Mar 27, 2023 by Patrick Angle, Marcos Caceres, Razvan Caliman, Jon Davis, Brady Eidson, Timothy Hatcher, Ryosuke Niwa, and Jen Simmons ContentsWeb Push on iOS and iPadOSImprovements for Web AppsWeb ComponentsCSSHTMLJavaScript and WebAssemblyWeb APIImages, Video, and AudioWKWebViewDeveloper ToolingWeb InspectorSafari Web ExtensionsSafari Content BlockersNew Restrictions in Lockdown ModeMore Improve
Previous slideNext slideToggle fullscreenOpen presenter view Build and Publish 2023 @mizchi | Plaid, Inc. jsconf.jp 2023 今日もツールチェインに消耗してますか？ https://2022.stateofjs.com/en-US/libraries 今日のテーマ 今日話すこと 現代のビルドツールチェインの進化と目的 エコシステムに振り回されないようになろう！ 今日話さないこと 個別のツール/ライブラリの使い方 フロントエンドの話？ NO. 最近のサーバーサイドJSとバンドラは一体化している サイズ制限のある CDN Edge Worker も最適化が必要 About Me JSのビルドとは何か Transpile AltJS(TS,JSX)や CSS Modules の変換
【ブログカスタマイズ】「はてなブログ」でグローバルメニューの追加方法を紹介｜初心者でもカンタン - redoブログ
はてなブログで「グローバルメニュー(グローバルナビゲーション)」を表示＆設定する方法を紹介しています。 とくにこれからブログをはじめようと考えているブログ初心者へおすすめのブログカスタマイズ方法です。 最近またはてなブログでの「カスタマイズ」を色々弄っていますが、「デザインCSS」と「HTML」を制する者がレイアウトを制するとつくづく感じております。 色や配置、形、文字など工夫次第で多種多様な設定が可能です。 みなさん色々と工夫されてて素敵なデザインを見かけると凄いなと感心します。 今回は少し各自で書き換えないといけない部分もありますが、出来る限りシンプルにわかりやすくお伝えしたいと思います。 グローバルメニューとは？ HTMLコード(ヘッダー→タイトル下) スマホのトグルメニューが開かなかった場合の対処方法 「HTMLコード」貼り付け箇所 デザインCSSコード デザインCSSにコードを貼
こんにちは！フリーランスでエンジニア・ディレクターをやっている@nosecchi01 です。 コピペで簡単に使えるアコーディオンメニューを紹介します。 以下のようなアコーディオンを纏めました。 この記事を投稿したところ、現役コーダーさんからわかりやすいとお墨付きをいただきました！ もうアコーディオン実装はせっちさんの記事で完結ですね🤤 解説が丁寧すぎて感動します🥺 ブックマークして使い倒します ありがとうございます🎉😻 https://t.co/falLuJgfXP — だりあ＠正社員コーダー2ヶ月目の人 (@engineer_dahlia) 2019年6月4日 今回のLPでクリックすると矢印が変わるというタブメニューを実装。 のせっちさん(@nosecchi01)の記事を参考にしました。 以前も参考にさせて頂いた記事で内容はアコーディオンメニューですが、矢印の動きを見たかったので
スマホでのメニュー表示はいつも悩ましいものです。スマホの画面サイズが大きくなったとはいえ、やはり表示領域は狭く限られています。 特にカテゴリーの数が多くメニューが多階層にわたるサイトやブログのメニュー表示をどうするか。 今回はたくさんのメニュー項目をコンパクトにまとめて表示できるメニューのカスタマイズです。 blog.minimal-green.com ベースは↑のメニューを使い、若干デザインと機能を追加しました。 変更点 メニューの動き HTML＆jQuery CSS まとめ 変更点変更点 ハンバーガーメニューのデザイン変更スマホ表示で2階層目の項目をタップで開閉するように メニューの動き動きは以下のgifをご覧下さい。 HTML＆jQuery 以下のコードをはてなブログ管理画面>デザイン＞カスタマイズ>ヘッダ＞タイトル下に入れて下さい。 <div class="drawer_menu"
<div class="accordion_one"> <div class="accordion_header">アコーディオン、シンプル版 <div class="i_box"><i class="one_i"></i></div> </div> <div class="accordion_inner"> <div class="box_one"> <p class="txt_a_ac">アコーディオンの中身です。</p> </div> </div> </div> $(function(){ //.accordion_oneの中の.accordion_headerがクリックされたら $('.s_01 .accordion_one .accordion_header').click(function(){ //クリックされた.accordion_oneの中の.accordion_head
はじめに 今回は無料はてなブログでもできる、ブログタイトル下にグローバルメニューを設置する方法をご紹介します。 一つの記事を閲覧するためにブログに訪れた読者の方が他の記事を閲覧するきっかけにもなり、欲しい情報に辿り着きやすくなってブログの滞在時間が伸びるおすすめのカスタマイズです。 読者のブログ滞在時間や読みやすさはGoogleアドセンスの合格にも繋がりますので、アドセンス合格を目指す方もぜひ取り入れてみてください。 はじめに グローバルメニューとは コピペ後の完成イメージ スマホで反映されない場合 グローバルメニューの設置 デザインCSS CSSコードを入力する場所 コピペ用CSSコード ヘッダーにHTMLコードを貼り付ける コピペ用HTMLコード 色の変更 注意：CSSコードを貼り付けてもうまくいかない時は まとめ グローバルメニューとは グローバルメニューとは、ブログのタイトル下にあ
Previous slideNext slideToggle fullscreenOpen presenter view An mruby for WebAssembly Presentation by Uchio Kondo self.introduce! Uchio Kondo from Fukuoka.rb Infra Engineer @ Mirrativ, Inc. livestreaming & "live" gaming Translator of "Learning eBPF" Ruby and WebAssembly Code sample background rule: Ruby.has :red, :background (window.JavaScript || TypeScript).then("yellow"); Rust::<BackGround>::pur
$('.js-button').on('click', function() { $(this).next('.js-accordion').slideToggle(); }); cssアニメーション jQueryなしで実装する場合は、cssアニメーションを使います。 パフォーマンス的にも、jQueryのアニメーションではなくcssのアニメーションを使用した方が良いです。 （なので、jQueryは開閉のトリガーだけに使用し、アニメーションはcssで行う方法もあります。） ただ、アコーディオンするコンテンツの高さが可変の場合、ちょっと面倒です。。 まずは、開閉のトリガーのみをjsで設定します。 const button = document.querySelectorAll('.js-button'); const openClass = 'is-expand'; Array.prototy
はてなブログ グローバルメニュー SEO対策 こんにちは。 4児パパです。 ブログを毎日書きつつ、色々な事をやっている日々です。その中でも最近避けて通ってきましたブログデザインをやっています。 『グローバルメニュー』はSEOにも重要で読者の回遊性を保ちます。 参考になれば幸いです。 はてなブログ初心者でも再現性のあるグローバルメニューをいじっております。色んな方の記事を参考にしつつも、実装して確認。なんか楽しくなってきた。 今から『グローバルメニュー』について、記事を書きます。グローバルリンクはSEOにも適しています。 初心者の方でも参考になる様、努めます😊 — ４児パパ (@ARTS_papa) 2019年8月6日 はてなブログ初心者でも再現性のあるグローバルメニューをいじっております。色んな方の記事を参考にしつつも、実装して確認。なんか楽しくなってきた。 今から『グローバルメニュー』
ReactとJQueryを共存する方法と注意点 - deve.K's Programming Primer - プログラミング初心者のための入門ブログ
ReactでJQueryを使用できるのか？ ReactでJQueryを使用する正しい方法 JQuery CDNリンク ReactでJQueryが推奨されない理由 最後に JQueryは、JavaScript開発者が使用する最も有名なライブラリの1つであり、長年にわたって開発者に役立ってきました。 このライブラリは、DOM操作やアニメーションなどを簡単に実行する方法を提供します。 その人気のため、多くのWeb開発者はそれに精通しており、できる限りJQueryを使用することを好みます。 ただし、Reactとフレームワーク(Next.jsなど)は、コードのパフォーマンスと保守性を支援するためのより最新の機能を提供しています。 ほとんどの分野でJQueryよりも優れており、Reactの未来の方が明るいので、開発者はもっと早くReactに移行しなければならないかもしれません。 Reactは間違いなく
今回は、cssのみでなんともおしゃれに動くハンバーガーメニューのサンプルを紹介する記事となっています🍔 webサイトといえばハンバーガーメニュー。ハンバーガーメニューといえばwebサイト。 そういっても決して言い過ぎではないくらい、ハンバーガーメニューはwebサイトにおける定番のUIの一つですよね。 とはいえ、実装には通常ではjavascript（jQuery）を使用する必要があり、ハンバーガーメニューのコーディングとなると身構えるwebクリエイターの方も多いのではないでしょうか？笑 僕もかれこれ6年ほどweb制作をやっていますが、なんだかんだいつも時間をかけてしまうところでもあるんですよね。 そこで今回は、面倒なjsのコーディングが必要無い、cssのみで作成されたおしゃれなデザインのハンバーガーメニューを厳選して紹介していきます。 本記事で紹介しているものは汎用性が高く、かつデザイン性
Previous slideNext slideToggle fullscreenOpen presenter view Spring GraphQL Introduction 概要 Spring GraphQLのマイルストーンバージョンが発表された(現在はM5) GraphQLは良いものだと思うので、みなさんにもSpring GraphQLを知ってもらいたい！ まずGraphQLについて簡単に説明 それからSpring GraphQLを使ったサーバー側の実装方法を説明 前置き このスライドはSpring GraphQL 1.0.0-M5をもとにしています GraphQLの仕様はCurrent Working Draftを参考にしています スライドに現れるコードは説明のため一部省略していることがあります このスライドとコード例の置き場所 https://github.com/backpap
はじめに 今回は、React（Next.js）を使って、滑らかな開閉アニメーションとアクセシビリティを考慮したアコーディオンの実装方法を紹介します。 本実装を進めるにあたって、実現したいポイントは5点あります。 高さが決まっていない（高さの最大値が決まっていない）コンテンツを表示させたい ウィンドウ幅によって高さが変化する可能性のあるコンテンツを表示させたい アコーディオンが開く時も閉じる時も同じ速度感のアニメーションを付与したい（jQueryのslideToggleのような動き） スクリーンリーダーによる開閉状態読み上げ、Tabキーによるフォーカス、EnterキーやSpaceキーでの開閉操作可能な（アクセシビリティが考慮された）アコーディオンを実現したい Webページ内検索（command + F）でアコーディオン内の単語がヒットした場合、アコーディオンが自動で開かれるようにしたい（Ch
【手順あり】はてなブログのカテゴリー・パンくずをコピペで簡単に階層化表示にする「スマホも簡単」 | はてなブログカスタマイズ | 階層化カテゴリー - IT the Best
カテゴリー・パンくずリストを階層化表示にする 手順１：階層化表示にするための処理の追加 jQueryファイルの設置 階層化処理の追加方法１：外部ファイルを読み込む 階層化処理の追加方法２：コードを埋め込む 手順２：階層カテゴリーの入力 補足 カテゴリー一覧の階層カテゴリーの表示方法 パンくずリストをGoogleにクロールさせる方法 更新情報 投稿日：2019/10/23 当記事は、はてなブログのカテゴリーを階層化(多階層化)するためのカスタマイズ情報です。当記事のScriptを設置し、記事のカテゴリーを当記事に記してあるように階層化することで、カテゴリーモジュールとパンくずリストを階層化することができます。 カテゴリー・パンくずリストを階層化表示にする 完成イメージを見る 完成イメージ(パンくずリスト) 完成イメージ(カテゴリーリスト) はてなブログのカテゴリー・パンくずリストの表示を階層
ドロップダウンメニューって？ メニューをクリックしたりマウスを上に載せたりすることでそのメニューの下に出てくるようなメニューのことです。 ドロップダウンメニューの例 ドロップダウンメニューの実装方法はググると結構出てきます。 ただjQueryプラグインとかをこのためだけに読み込ませたりするのはなんか違う気がするし、「CSSだけでできる！」とかいうのもありますが、実際は動いてもデザインが思い通りにならなかったり、タブレットで全然使い物にならなかったり、なんてことがありますね。 僕なんかは特にそうですが、ほぼ「コーディング専業」の人は依頼されたデザインに合わせて自由自在に変えられるように、このくらいのUIはササっと書ける知識を持っておく必要があります。 今回はそういう時に使えるメモです。 言うて自分もけっこう忘れるので。w まずはデザインをhtml・cssで実装 基本的にはデザイナーから依頼さ
先日、ついに当ブログが30記事に到達したのでこれまでの総括を記事にしましたが、記事数の割にPV数が伸びていません。 www.gonzales.tokyo 読まれない記事を量産するのも悲しいので過去の数記事にSEO対策をしました。 その内容を以下にまとめておきます。 記事数30突破というタイミングでSEO対策をする理由は、 ・今ならまだ過去記事の量がリライトできる範囲内 ・記事を書くこと自体には慣れてきたので、その次のレベルで勝負したい というところです。 この記事を読むことで、巷で言われているSEO対策のうち一般的なものはすべて確認することができるように構成したつもりです。 また、はてなブログの運営者でありGoogle Search Consoleに登録していれば、この記事に沿えばこれらのSEO対策ができます。 SEO対策とは 10個のSEO対策 1. モバイルフレンドリー 2. ドメイン
【初心者向け】 HTML、CSS、Javascriptの基本を理解しよう | デジタルマーケティングブログ
みなさんは「HTML、CSS、JS」の違いや役割を、さっ と答えることができますか？ なんとなくは分かっていても、具体的に何をしていくものなのか分かっていない方も多いのではないでしょうか？ そんな方に向けて紹介していきたいと思います♪ HTMLとは 正式名称は「HyperText Markup Language（ハイパーテキスト・マークアップ・ランゲージ）」。 略して「HTML」といいます。 簡単に言うと普段みなさんが目にするWebページの土台を作るための言語ですね。 言語といっても、日本語や英語のような自然言語ではなく、「マークアップ言語」と呼ばれるコンピュータに文書構造を伝える命令を出す為の言語になります。 Webページは、HTMLでマークアップされることによって、見た目が形成されます。 HTMLのバージョン HTMLといっても、様々なバージョンがあります。 最近では、ほとんどHTML
こんにちは、ジブリッシュマンブログのエイジです。 今回は、ブログ内のグローバルメニューのナビゲーションバー（メニューバー）の設置方法について説明していきたいと思います。 まずこちらがナビゲーションバー（メニューバー）になります⬇⬇⬇⬇⬇⬇⬇ ナビゲーションバー（メニューバー） 私のような雑記ブログだと、いろんな記事を上げているのでグローバルメニュー（メニューバー）でわかりやすくしたいなと思って分けてみました。 このようなコードを作られてるって人たちは、とてもすごいなと感じます。 私のような初心者では皆さんの記事を参考にさせていただき作らせていただきました。 ありがとうございます。 『最新版』ブログのナビゲーションバーを階層下にする方法『Minimalism』はてなブログ こちらのコードはゆきひーさんのブログ記事を参考にさせていただき使用させていただきました。そこから私なりに変更をしていきま
こんにちは。株式会社エニグモにてフロントエンドエンジニアを務めています新井です。 こちらは Enigmo Advent Calendar 2023 および アクセシビリティ Advent Calendar 2023 の 14 日目の記事です。 はじめに：ウェブアクセシビリティとは？ 1. ページ内の見出しの最適化 2. リンクや状態の判別を色の変化だけで行わないようにする 3. キーボード操作時のフォーカスインジケーターは非表示にしない 4. クリッカブルな要素の実装には a タグまたは button タグを使用する 5. 画像の代替テキストの指定と装飾的な画像の取り扱い 6. フォームコントロールには必ずラベルを付与する 7. フォームの入力欄のオートコンプリートを有効にする 8. ラジオボタンやチェックボックスを装飾する際は元の input の隠し方に気をつける 9. アコーディオン
ひろきです。この記事ではWEB制作に必要なスキルをメンターとして受講生に教えている僕がよく紹介するサイトを集めてみました。 ここで紹介する各勉強過程の流れや紹介する記事の内容は実務でも使える内容となっているので、しっかりメモして役立ててください！ 独断と偏見で記事を紹介していきます！また、WEB制作において、実務で使えるリンクも貼っておくので全リンクしっかり確認してみるといいでしょう！ WEB制作を習得するための簡易ロードマップ さて、僕の方でも簡単にロードマップ共有します。抑えておきたいポイントはこのように強調していきます。以下で紹介する本は最低限押さえておきたい本なので、持っていない人は1冊ずつてもとにあるといいでしょう。 STEPHTML&CSSを勉強しよう ここは正直慣れの要素が大きいと感じています。繰り返し繰り返しひたすら手を動かすのが一番はやいです。徐々に理解することが出来ます
先日、はてなブログの目次を開閉式にしてみました。 スタイリッシュでスライドして目次が出てくる面白いデザインです。 今回作成する目次がこちら。 参考サイト 開閉式ボタン作成 jOueryコード 貼り付け場所 CSS 貼り付け場所 スマホでの表示 レスポンシブ対応の方 レスポンシブ非対応の方 貼り付け場所 解説 終わりに かなりスタイリッシュですよね！！ コピペで簡単に作成できますので、ぜひお試しください！！ 参考サイト今回参考にさせていただいたサイトはこちら。 kabuku.hateblo.jp 内容はもちろん、文章もめちゃめちゃ面白いです！！ ぜひ読んでみてください！！ 開閉式ボタン作成jOueryコード今回の開閉式目次で必須のコードです。 それがこちら。 <script> (function($) { $(document).ready(function(){ $('.table-of-
折りたたみアコーディオンボタン＆テキストの作り方を紹介します。 以前上げたこちらのエントリで、ネタバレのあらすじをアコーディオンテキストにして、クリックしないと読めないようにしました。 www.secret-base.org テキストだけじゃなく、センシティブな画像や虫画像を上げたい時などにも使えると思います。 サンプル ↓クリックで表示↓ ここに隠して表示したい内容を書き込む。 コード 準備 ダッシュボードから「設定」→「詳細設定」を開き、 「要素にメタデータを追加」 のところに下記コードを追加 <script type="text/javascript" src="https://cdn.blog.st-hatena.com/js/external/jquery.min.js?v=1.12.4"></script> 記事内 アコーディオンボタンを追加したい箇所に下記のコードをコピペすれ
【html】共通パーツを別ファイル化してjQueryで読み出し+パーツにjsを効かせる方法 - Qiita
はじめに htmlでヘッダーやフッターを共通パーツ化する方法 こうしたことは最近ではVue.jsなどでラクに実現できてしまいますが、今回はプログラマじゃなくても保守できるように。。ということが推奨されたため、できるだけ簡素な方法で実装しました。 そして、ヘッダー部分で必要なjsが何故か読み込めず相当ハマってしまったのでその解決法もあわせて記述します。 手順 以下の方の記事が一番わかりやすく実行しやすかったです。 https://qiita.com/sho11hei12-1998/items/e9c81db697fb5d51e2af 切り分けた先の共通パーツでは、idをあらためて指定しなくてもindex.html内で指定しておけばいい感じに読み込んでくれるようです。 header内のmenuWrap部分をクリックすることで、メニュー（panel内の部分）を開閉できるようにしたい、というのが主
今回は、ドロワーメニューの中にアコーティオンメニューを組み込んでみました。 ドロワーメニューについては、前回やっています。 興味があれば、是非参考にしてくださいね。 ドロワーメニューを作ってみた2 また、アコーディオンメニューについては、次を参考にされてください。 アコーディオンメニューをやってみた2 ソース では、いつもどおりソースを載せておきますね。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>ドロワーメニュー 練習</title> <link rel="stylesheet" type="text/css" href="./css/slide.css"> <script
ホームコンピューターjQueryでanimateできない原因は？ $(…).animate is not a functionが出る場合 jQueryでanimate関数を使ってアニメーション動作をしようとしたら、次のようなエラーが出ることがあります。 Uncaught TypeError: $(...).animate is not a function これは、jQueryのslim版を使用しているのが原因かもしれません。 slim版では、ajax系関数が使えないことはよく知られていますが、実は、アニメーション系の次の関数もサポートされていません。 animate fadeIn fadeOut fadeToggle fadeTo finish stop slideDown slideUp slideToggle slim版を使用している場合は、full版に切り替えましょう。 CDNを使
Previous slideNext slideToggle fullscreenOpen presenter view mruby/edge 超入門 RubyKaigi の前に知っとくと便利かもしれない気がすること Uchio Kondo 近藤うちお 所属: 株式会社ミラティブ 福岡市エンジニアカフェ ハッカーサポーター フィヨブーアドバイザー 普段はGoでミドルウェアの 開発・運用をしてます 『入門 eBPF』（オライリージャパン）翻訳しました何卒 今日の内容 主に話すこと mruby/edge っち何？ VM って何？ 遺憾ながらあんまり話せないこと WebAssembly自体の話... mruby/edgeとは mruby/edgeとは？ 一言で: mrubyをwasm上で動かすのに特化したVM実装 Rustで書いた あらゆる機能がないが、fibは動かせる RubyKaigi 20
jQueryのslideToggleは数行で実装できるので便利でした。 今回、数行とはいきませんがそれなりにシンプルなコードでslideToggleの動きを再現してみました。 生jsの場合 See the Pen accrodion without jQuery by monji (@monji88) on CodePen. e.targetとnextElementSiblingを使用しています。 e.targetについては以下の記事にも書かせて頂いてます。 Vue.jsの場合 See the Pen Untitled by monji (@monji88) on CodePen. Vueなのでtransitionタグなど使おうかとも思いましたが、 普通に生jsのコードを使いまわしたほうがシンプルでした。 el:"#app"とかはVue2の書き方ですがmethodsの部分はVue3でもその
アコーディオンメニューの開くボタン・閉じるボタンをCSSのみで作成しています。形状は開くボタンがプラス（＋）、閉じるボタンがマイナス（－）です。画像は使用していません。 サンプルはメインメニュー・サブメニューのナビゲーションです。 htmlのコードは下記になります。 メインメニューとそれに関連付けたサブメニューを定義リストでマークアップしています。 <dl class="toggle_contents"> <dt class="toggle_title">メインメニュー01<span class="toggle_btn">開く</span></dt> <dd> <ul> <li><a href="#">サブメニュー01</a></li> <li><a href="#">サブメニュー02</a></li> <li><a href="#">サブメニュー03</a></li> </ul> </d
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Build and Publish 2023
【jQuery】矢印付きアコーディオンメニュー3選【コピペOK】
スマホに使える！2階層対応レスポンシブメニュー - Minimal Green
【jQuery】アコーディオン実装サンプル10選 | 125naroom / デザインするところ（会社）です。
【コピペでOK】無料はてなブログでグローバルメニューを設置する方法 - 効率さん
An mruby for WebAssembly
CSSアニメーションで高さ可変のアコーディオン - Qiita
【初心者でも簡単】グローバルメニューで読者の回遊性を保ちつつSEO対策【はてなブログデザイン】
【CSSのみ】おしゃれなデザインのハンバーガーメニュー13選【コピペOK】
Spring GraphQL Introduction
React（Next.js）で滑らかな開閉アニメーションとアクセシビリティを考慮したアコーディオンを実装する
レスポンシブなドロップダウンメニューをつくる｜notes by SHARESL
はてなブログでPV数(アクセス)を増やすSEOの方法(対策) - ゴンザレスの備忘録
『2022年』ブログのナビゲーションバーを階層下にする方法『Minimalism』はてなブログ
自社サービスで必ず達成しておきたいウェブアクセシビリティ対応についてまとめました - エニグモ開発者ブログ
【WEB制作】初学者向けロードマップとよくある質問に答える記事一覧【レベル別にまとめた】 | HIROKI-LOG
はてなブログで開閉式の目次を導入してみました！！ - j-lifestyle日記
コピペOK！はてなブログで折りたたみアコーディオンボタン＆テキストの作り方 - らいちのヒミツ基地
ドロワーメニューとアコーディオンメニューを組み合わせてみた - Qiita
jQueryでanimateできない原因は？ $(…).animate is not a functionが出る場合
mruby/edge 超入門 + VMって何？
【アコーディオン】jQueryのslideToggleを生jsで再現してみた。 - Qiita
【アコーディオンメニュー】開くボタン・閉じるボタンをCSSのみで作成【プラス・マイナス編】