1 - 40 件 / 67件
タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
Visual Studio Code(VsCode)本体のインストール まだインストールされていない方は、以下からVsCode本体をダウンロードしてください。 VsCodeのおすすめプラグイン(コーダー・マークアップ・フロントエンドエンジニア視点) 私が導入しているVsCodeのプラグインを紹介します。 フロントエンドエンジニアとして働いている自分の普段の業務ではHTML CSS Sass(Scss) EJS Pug JavaScript TypeScript React Next.js PHP WordPress Markdownファイル等を触ることが多いので、それらに関連したプラグインが多くなっています。 共通 プラグイン名 機能
この記事は、2022年10月28日に開催されたDIST.37「マークアップな夜」での発表「マークアップのわかり方」をもとにしたものです。当日は話せなかった内容も大幅に追加しています。 現代における「マークアップ」とはどのような行為なのか。いかにそれと向き合っていけばいいのか。そういったことについて考えてみます。 マークアップの議論においては、「マークアップには正解がない」という意見が決まって出ます。正解がないと言うならば、たいていなんであってもそうです。たとえばCSSやJavaScriptの書き方には「正解」があるのかと考えてみると、必ずしもそうではありません。 しかし、ことさらマークアップにおいてこれがよく言われる理由としては、妥当性を判断する基準がわからない、ということでしょう。 というのも、CSSなら望む通りの見た目になればとりあえずOKだし、JavaScriptでも意図した通りの振
マークアップを進化させる WAI-ARIA の基本 私 @masuP9 WAI-ARIAとは何か WAI Web Accessibility Initiative ARIA Accessible Rich Internet Applications WAI-ARIAは、ウェブコンテンツおよび アプリケーションのアクセシビリティと相互運用性を改良するためのフレームワークを提供する技術仕様である。 Accessible Rich Internet Applications (WAI-ARIA) 1.2 日本語訳 WAI-ARIAは ウェブのアクセシビリティを 高めるための技術仕様 WAI-ARIAはなぜ必要か アプリケーション化するウェブ Notion Figma G Suite 3D CAD etc... 意味も振る舞いも 既存のHTMLでは表現できなくなってきた 例えば タブUI 開いてい
いまさら気づいたけど Headless 系のUIライブラリが一番 AI と相性いいのではないか。 ロジックはプログラマで書けて自由度高いし、コンポーネントのネスト構造から意図を読み取れるだろうし、class 名は自由に書けるから意図を表明しやすい。 それをプロンプトとして ChatGPT or Codex にそのまま投げて書かせる、ができる。 というわけで vite + react + radix-ui + vanilla-extract で実験してみた。 プロンプト あなたは凄腕のマークアップエンジニアです。 radix-ui は Headless UI ライブラリで、UIとしてのセマンティクスのみを持っています。 次のコードは React + radix-ui + vanilla-extract で書かれた React コンポーネントです。 // Popover.tsx import
はじめに ChatGPTについて、日々さまざまな応用が提案されています。 そのChatGPTを試用している中で、質問に対する回答が誤っていることがあります。自社の情報をWebサイトで提供している企業として、どのようにすれば、GPTがより正確な自社の情報を学習するようになるのでしょうか。 ChatGPTに質問しつつ考えてみました。 事前調査 まず、Generative Pre-trained Transformer 3 (GPT-3)について調べてみました。 WikipediaのGPT-3に関する項目では、GPT-3 の事前学習データについて、次のように書かれています。 GPT-3の重み付き事前学習データセットの60%は、Common Crawlのフィルタ処理された版から取得されたもので、4,100億バイト対符号化トークンで構成される[1]:9。その他の情報源としては、WebText2からの
はじめに つい最近、ReactもVueも使わずに静的なペライチHTMLのマークアップを行う必要に迫られました。その際ViteのVanilla[1]テンプレートとTailwindを使った環境でマークアップをしたところ非常に快適だったので、環境構築の手順を記事にしておこうと思いました。 Viteを使う理由 ViteというとVueやReactの開発ツールと思われがちですが、UIライブラリに依存しないVanillaテンプレートが用意されています。 ファイルの更新を検知してブラウザへの反映といった基本的な機能に加えて、PostCSSのサポートもあるのでTailwindでの開発と相性が良いです。 セットアップ Viteでプロジェクトを立ち上げる普段の手順に加えて、Tailwindのセットアップを行います。 npm create vite@latest # project名を入力後、フレームワークでは「
この記事は食べログアドベントカレンダー2020の4日目の記事です。 この記事を執筆するのは、食べログでフロントエンドチームに所属する佐伯です。 皆さんマークアップはお好きでしょうか。僕は好きです。 HTML、CSSでWebサイトが作れるのはもちろんのこと、CSSやSVGを駆使すれば、JavaScriptが必要になりそうであろう複雑なUIなども簡潔に作成出来るからです。 JavaScriptはBabelなどのおかげでIE11も比較的対応しやすいですが、マークアップはそうはいきません。Polyfillが対応していないことや、対応していたとしてもReactなどのフレームワークとの共存出来るかなど問題点があるため、IE11に合わせるしかありませんでした。 しかしながら、IE11の情勢も変わってきました。 2020年3月よりIEでYoutubeを閲覧するとアラートが表示されるようになっています。 ま
自分はフロントエンドのロジックを考えるのは得意なんですが、CSS は苦手です。 なので 自分は AI にコード変更を依頼して実行結果を目視でプレビューしつつ、その生成結果を受けいれるかどうかの判断だけすればよくね?と考えて、それを CLIとして実装してみました。 ボタンの色を書き換えるという簡単な例ですが、こんな感じで動きます。 主に React Component の修正をターゲットにしていますが、class(Name) を書き換えることを優先するプロンプトを与えているので、ロジックを保ちつつ、見た目を綺麗にするためのツールになっています。 実装した背景 vscode ターミナル上で画像を表示できる OpenAI API はgpt-4-vision-preview のモデルで画像をアップロードして認識させることができる これらを使って、vscode terminal で実行することを前提
オジサンの趣味は写真撮影で、複数のミラーレスカメラを所有している。 撮影データは基本RAWで撮影し、Adobe Lightroomで現像を行なっているが、ある時iPad Proで現像してみたところ、非常に楽しくてすっかり病みつきになってしまった。 今回はそんなオジサンのiPad ProでのRAW現像体験をお伝えするとともに、さらに良い現像体験を味わうべく、新型M2 iPad Proを買うかどうか悶絶する様を記しておきたい💦 iPad ProでのRAW現像の何が楽しいかというと、タッチパネルを使った操作にある。 オジサンの使っている、現像アプリがAdobe Lightroom CCである。 Lightroomがクラシックとクラウド対応のCCがあり、iOS対応しているのはCCの方である。 www.adobe.com 露出補正のパラメーターやヒストグラムをApple Pencilや指で調整する
【はじめに】 フロントエンドエンジニアの kalbeekatz です。話の背景となる自分の経歴から紹介させてください。 Web制作会社でマークアップエンジニアとして HTML/CSS/JavaScript(主に jQuery)で静的な Web サイトの構築をしていました(2年間)。 その後、株式会社ニジボックスに転職し、フロントエンドエンジニアとして上記に加え、React で動的な Web サービスを構築してきました(2年半)。 この5年間を通して自分がマークアップエンジニアからフロントエンドエンジニアになるまでを振り返り、それぞれの違いや求められること、やりがい、道のりなどをまとめました。 これからエンジニアを目指す方、マークアップ以外のエンジニアリングに興味を持っている方などの参考になれば幸いです。 マークアップエンジニアとフロントエンドエンジニアの違い 「マークアップエンジニア」「フ
iOS/iPadOS 26でmacOSから移植されるPDFビュワー「プレビュー」アプリには、macOS版のプレビューと同じくマークアップやインスペクタ機能を搭載するそうです 。詳細は以下から。 Appleは2025年06月09日に世界開発者会議(WWDC25)の基調講演を行い、その中で、今年の秋にリリースを予定している「iPadOS 26」では、マルチウインドウの配置や最小最大化、タイル表示などmacOSと同等のウィンドウシステムがサポートされ、さらに、macOSアプリのPDF・イメージエディタ「プレビュー」がiPadOSへ移植されることが発表されましたが、 プレビューはPDFの表示と編集のための専用アプリでApple Pencilでのマークアップや自動入力などのパワフルなツールを備え書類のアクセス、注釈、書き込み、ハイライトを簡単にします。 WWDC25の基調講演より このプレビューアプ
tl;dr ChatGPT の画像入力でラフスケッチから簡単なマークアップを生成させることができる 生HTML はプロンプトとして弱い。 typescript(tsx) や headless-ui でコンテキスト情報を足すといい感じになる。 ChatGPT にスクリーンショットを入力し、 ChatGPT に puppeteer に操作させれて E2E 生成を自動化したり無限の猿BOT が作れるのでは。 マークアップエンジニアではなく、プログラマ視点でCSSを生成させたい。ロジックはこちらが考えるから、それに合わせたものを作ってくれ、という感じ。 まだ figma 連携とかは考えておらず、雑なラフを食わせたり、一般的なパターンを生成してもらえれば良いと思って試している。 とか考えてるうちに、うちの ChatGPT に画像入力が来た。まだAPIが来てないが、これが来ることを前提にマークアップ補
主題と副題のマークアップの方法に関しては度々Xでも話題になっていて、例えば次のポストの返信やリポストを見ると、人によって以下のような様々なアプローチがあることがわかります。 参考:過去に話題になったポスト ポストを別枠で表示する見出し要素(h1〜h6)の中に主題と副題の両方を含めるこの場合の副題はspanではなくstrongやsmallを使うと言った意見も見られる主題をh1要素でマークアップし、副題は隣接するh2要素を使う疑似要素とcontent:attr()を使って副題を表示するこのブログのトップページでも主題+副題が用いられていて、いくつかのマークアップ方法を検討した結果「hgroupの中に主題のh1要素と副題のp要素を含める」方法を選択しました。
適合性チェックマークアップは、有効なコードを記述する必要があります。これは、各ユーザーエージェントを介してウェブページを壊さないという標準の約束を守るために重要なことです。Markuplintは、HTML StandardやWAI-ARIAなどの仕様を踏まえた上で、適合性チェックを行うことができます。 ハウスルールに利用するプロジェクトや組織でハウスルールがある場合があります。方針や管理手法に基づいてチェックすることができます。設定次第で、アプリケーションをよりアクセシブルで、より安全で、より高いパフォーマンスを得ることができ、高い品質を得ることができます。
次世代のAI検索、いわゆるLLMOやGEOについて、「構造化マークアップが効果的だ」という話を聞いたことはありませんか?私自身も、その真偽がずっと気になっていました。 現状、GoogleやOpenAIから「AI検索で構造化マークアップを利用している」との公式発表はありません。AIモデルの内部処理はブラックボックスであり、第三者がその詳細を知ることは難しい状況でした。 そんな中、先日OpenAI社がオープンソース版のGPTである「gpt-oss」を公開しました。オープンソース化によって、誰もがソースコードを閲覧でき、AIが情報をどのように処理するかが把握可能となったのです。 公開されたオープンソース版のGPT私はこれをチャンスと捉え、早速「gpt-oss」のソースコードを解析し、「構造化マークアップは有効か?」「AIはコンテンツをどのように解析しているのか?」という2つの疑問を調査しました。
SEOとは何か? 自分でSEOを行う際に注意すべき点とは? 知らずに行ったSEOなどによりGoogleからスパム認定を受けることのないように注意すべき点とは? 構造化データ マークアップが必要と聞くけどいったい何? 構造化データはSEOの役に立つの? そもそも何のために構造化データ マークアップを行うの? SEOや構造化データ マークアップについての基礎の基礎を学びながらSEOスパムとは何かを一緒に学ぶことを目的として、同時に構造化データ マークアップを簡単に実施する方法を学びましょう。 SEOとは何か? SEOのメリット SEO実施の目的 SEOが難しい理由 Googleの定める品質ガイドライン違反 SEO施策のポイント レスポンシブデザイン E-E-A-Tとは? 検索結果として表示するもの(Googleの考え方) コンテンツSEO 構造化データマークアップ SEOにおける「キーワード」
※(注記)注意この記事の内容は推奨できません この記事であれこれ、Schema & Structured Data on this postというプラグインを使った構造化データの方法を説明しましたが、ある問題があることが発覚しました。 このプラグインを使って構造化データを送信するのは少しも推奨できません。 この記事の以下の内容は、参考程度、見流す程度にして、こちらの僕の別記事を参考にしてください。 【注意】Schema & Structured Data on this postによる構造化データは0点以下のマイナス!rank math seo推奨 構造化データの活用実践備忘録 きょうは特別編です。 先日のセミナーを受講したときに、 【セミナー備忘録1】2025年6月19日中原さんセミナーの復習 構造化データの重要性を思い知りました。 実を言うと、このセミナーを受けるのは2回目なのですが、1回目の
こんばんは! いつも応援していただき、ありがとうございます。 apa(あぱ)です(^^) 今日は『構造化データの情報送信続編』について書いていきます。 構造化データの情報送信続編 今日はいつもの吹き出し形式ではなくて、たぶん、なんとなく普通に書いていて3000文字位の長さになりそうなので、そのまま思うままに書いていきたいと思います。 ここ最近、中原さんを中心にSEO界隈で「構造化データの送信」の重要性が囁かれています。 中原さんがセミナーや動画内で「構造化データの送信を語っている」のは当然のこと。 この前参加した別のセミナーでもFAQコーナーで、 「構造化データの送信はFAQも送信したほうがいいですか?」 と質問されていました。 やはり中原さんのSEO界隈の影響力はでかいですね。 反面、その意見を翻そうとしている方もいるみたいで、 「いや、そんなことはない。構造化データはそれほど重要じゃな
SEOとは何か? 自分でSEOを行う際に注意すべき点とは? 知らずに行ったSEOなどによりGoogleからスパム認定を受けることのないように注意すべき点とは? 構造化データ マークアップが必要と聞くけどいったい何? 構造化データはSEOの役に立つの? そもそも何のために構造化データ マークアップを行うの? 構造化データ導入時の注意点 正確な記述: 構造化データは、正確な情報を記述することが重要です。誤った情報や矛盾した情報は、検索エンジンからペナルティを受ける可能性があります。 過度な利用: 構造化データを過度に利用すると、スパムとみなされる可能性があります。 Google構造化データテストツール: 導入した構造化データが正しく機能しているかを確認するために、Googleが提供するテストツールを利用しましょう。 構造化データは、SEO対策において非常に重要な要素の一つです。鬼岩正和氏の「S
「SEOって何?」から始める人におすすめ!鬼岩正和さんの『SEO 基礎の基礎』を読んでみた ブログやウェブサイトを運営するうえで、必ず耳にする言葉「SEO」。でも、その意味や具体的な取り組み方については、いまいちよくわからない...という方も多いのではないでしょうか?そんな初心者にぴったりの入門書が、鬼岩正和さんの『SEO 基礎の基礎』です。 この本は、「SEOが初めて」という人でも安心して読める内容が魅力。タイトル通り、基礎中の基礎からスタートし、専門用語もわかりやすく解説されています。ブログ運営やウェブサイトの改善に役立つ具体的なテクニックが満載で、読めばすぐに実践したくなる内容です。 特に印象的だったのは、「SEOは単なる技術ではなく、ユーザーのために価値ある情報を提供するための手段」というメッセージ。アルゴリズムやキーワード選定の話にとどまらず、コンテンツ作りやユーザー目線の大切さにつ
Twitter:@te2319 株式会社ニュートラルワークス 取締役CMO。1984年生まれ。高校卒業後にISD株式会社を起業、SEOの黎明期の2003年から独学でSEOを学び自社事業を軌道に乗せる。2009年よりSEO以外のSEM全般の知見をつけるため、株式会社オプトにてナショナルクライアントのリスティング広告運用に従事。株式会社メタップスの立ち上げや複数のベンチャー企業にて事業立ち上げを経験。前職はワンダープラネット株式会社でゲームプロデューサーとしてスマホゲームアプリの制作に従事。2018年にニュートラルワークスに入社。SEO/Web広告運用/サイト分析・改善など、Webサイトの運用改善〜ゲームアプリ制作や数十万フォロワーのSNSアカウントの運用経験などWebビジネス全般を守備範囲とする。 ■しかく経歴 2003年 ISD株式会社/起業 2009年 株式会社オプト/SEMコンサルタント 2
多分知られていないiOSの秘密機能なんですけどね、Safariで印刷する画面でプリントを長押しするとPDFで保存できるんですよ。さらに共有のマークアップでなにも書かずに完了を押すと見ているページ全体が縦長のPDFで保存できるんです... https://t.co/JB464D40Kw
新人プログラマーがセマンティック・マークアップを学習してわかったこと 公開日 : 2021年06月15日 最終更新日 : 2022年10月05日 コーディング はじめに こんにちは!AndHAエンジニアのタイガです! Webコーダーとして働き始めて一ヶ月、コーダーとしての課題が見えてきた今日この頃、、、 プチパニックの連続で挫けそうになりながらも日々精進しています。 そんな私が「働く前にちゃんと意識して勉強すればよかった!」と後悔、反省した事例の一つである、セマンティックなマークアップについて今回は書いていきます! 同じ境遇の皆さん、現在絶賛勉強中の皆さん!これからやるぞー!って方、「HTML/CSSでただコードを書いてデザインする」ことから私と一緒に卒業しましょう! そもそも「セマンティック」とは? そもそも最初に、セマンティック(セマンティクス)って?ですよね。 勉強中の方であればなんとな
鬼岩正和氏による「「SEO」基礎の基礎」は、SEO初心者の方でも分かりやすく、SEOの基礎をしっかりと学ぶことができる一冊です。 この本で学べること SEOとは何か? SEOの概念や重要性を理解できます。 自分でSEOを行う際に注意すべき点 SEOを行う上での注意点や、Googleからスパム認定されないための対策が解説されています。 構造化データとは? 構造化データの役割や、SEOへの影響について詳しく解説されています。 構造化データのマークアップ方法 構造化データを実際にサイトに実装する方法がステップごとに説明されています。 この本の魅力 初心者にも分かりやすい解説 SEOの専門用語を避け、図や表を多用することで、初心者でも理解しやすいように工夫されています。 SEOの全体像を把握できる SEOの基礎から応用まで、幅広く学ぶことができるので、SEOの全体像を把握することができます。 具体
SEOとは何か? 自分でSEOを行う際に注意すべき点とは? 知らずに行ったSEOなどによりGoogleからスパム認定を受けることのないように注意すべき点とは? 構造化データ マークアップが必要と聞くけどいったい何? 構造化データはSEOの役に立つの? そもそも何のために構造化データ マークアップを行うの? SEO施策のポイント 本書では、構造化データの実装がどのように検索エンジンの評価に影響を与えるか、そしてそれを実際にサイトにどのように適用するかのステップが紹介されています。また、他のSEO施策、たとえば内部リンクやコンテンツの最適化に関する解説も含まれており、SEOの全体像を捉える上で役立つガイドです。 この本は、SEOの基本を理解したい初心者から、より具体的な施策に取り組む中級者に向けたものであり、検索エンジンの仕組みや最適化の方法を体系的に学ぶための良い出発点となるでしょう。
AdventCalender2020「ちょっとした工夫で効率化!01【PR】パソナテック」の19日目です。日付が変わってしまいましたが、寝てないのでまだ19日ということで良しとします。 (テーマは、ちょっとした工夫ですが、「ちょっとした工夫」に収まってないかもしれないので、工夫の導入記事ということで、予めご了承ください。) エディタをカスタマイズや拡張機能を作ることで、日常の作業効率が上がるのは、デベロッパーの皆さんには当然の発想です。また、ブラウザの拡張機能なども、Webマーケティングの業務補助をするツールなどもよく使われるかと思います。拡張機能のような小技で作業効率を上げるというのはエクセルのマクロが、そういった分野のパイオニアといったところでしょうか。 本記事で、デザインツールでの拡張機能/プラグインを作り方を紹介し、ビジネスロジックを設計しているフロントエンド開発者や、LPなどのH
無料で資料をダウンロード SEOコンサルティングサービスのご案内 専門のコンサルタントが貴社サイトのご要望・課題整理から施策の立案を行い、検索エンジンからの流入数向上を支援いたします。 無料ダウンロードする >> この記事は、Backlinkoの「Schema Markup Guide: Help Search Engines Help You」の翻訳記事になります。ウェブページに追加するスキーママークアップ(構造化データ)の重要性とその方法について解説しています。 スキーママークアップは、検索エンジンにコンテンツの内容を明確に伝え、適切な検索結果に表示させるためのコードです。スキーママークアップがSEOにどのように役立つか、エンティティ(実体)との関連性などについて紹介しています。 また、スキーママークアップの種類や、それをウェブサイトに適用する方法についても詳しく説明しています。 スキ
[レベル: 中級] 商品 (Product) の構造化データの機能を Google は拡張しました。 次の 2 つの拡張です。 マーチャント リスティングでの掲載 Search Console の新しいレポート マーチャント リスティングでの掲載 Product 構造化データでマークアップした商品は、一部のショッピング広告枠に掲載されるようになりました。 表現を変えると、Google Merchant Center(マーチャントセンター)経由で広告掲載していた場所に、(Merchant Center への登録なしで)商品を掲載できます。 たとえば、[ショッピング] タブの無料リスティングです。 【UPDATE (2022年11月11日)】 [ショッピング] タブは対象外です。詳しくは訂正記事をお読みください。 ナレッジパネルにも掲載されます。 人気商品にも掲載されます。 ほかには、画像検索や
オジサンは以前、MacBook Airを購入する際にうっかりYouTubeで口々にM1 Macはメモリ8GBでも大丈夫という言葉を鵜呑みにしてしまい、メモリ8GBモデルを購入したものの、仕事で使っているWindowsが常にメモリ上限を振り切って酷使した結果、ブルースクリーンを連発して作業データを何度もオシャカにした経験からくるメモリ不足恐怖症が発病してしまい笑笑 、 返品して16GBモデルに買い替えた経緯がある。 それから2年近く、メモリ16GBモデルのM1 MacBook Airを使用してきた。そんなオジサンが果たしてメモリ8GBは本当に足りないのか?を考察してみたい。 例によって雑な考察なので信憑性に関しては眉唾と捉えていただけると幸いである。 まず16GBに増設してメモリに余裕ができたのか? 答えはNO!である。メモリ16GBでもメモリは足らないのである。 オジサンは試した事もない
language_japanese_kanaドイツ語 - Deutschノルウェー語 - norskヒンディー語 - हिन्दीフィンランド語 - Suomiロシア語 - Русский英語 (アメリカ合衆国) - English (United States)ブルガリア語 - българскиフィリピノ語 - Filipinoリトアニア語 - lietuviųクロアチア語 - Hrvatskiラトビア語 - latviešuフランス語 - Françaisハンガリー語 - magyar中国語 (簡体字) - 简体中文ウクライナ語 - Українськаスロバキア語 - Slovenčinaスロベニア語 - slovenščinaインドネシア語 - Indonesiaカタロニア語 - catalàセルビア語
オジサンはマークアップエンジニアである。 DBから情報を非同期で引っ張ってきてコンテンツを表示したり、バナーを表示する仕組みは基本的にフロントエンジニア任せだが、デザインに関わる部分、例えばモーダルやアコーディオン等はオジサンが基本部分を実装してフロントエンジニアに引き渡すのである。 そんなオジサンは手軽にDOM操作ができるjavaScriptのライブラリであるjQueryをずっと使ってきたのだが、ここ2、3年の間に生のjavaScriptでもDOM操作が割と手軽にできるようになってきているので去年あたりから情報収集したり、実際にコードを書いて試したりもしている。 jQueryが結構長い事Web制作で使われていたのは、jQueryが現れた当時ブラウザ戦争の真っ只中で各ブラウザの仕様がバラけていたのをうまく吸収することで実装しやすくしたことや、有志による様々なプラグインの開発、それまで難解だ
定期購入とペイウォール コンテンツ(CreativeWork)の構造化データ ここでは、JSON-LD で schema.org の CreativeWork のプロパティを使用して、サイトのペイウォール コンテンツを指定する方法について説明します。この構造化データにより、ペイウォール コンテンツが、スパム対策ポリシーに違反するクローキングを行っていないことを Google が容易に識別できるようになります。詳しくは、定期購入とペイウォール コンテンツについての記事をご覧ください。 例 ペイウォール コンテンツの NewsArticle 構造化データの例を、次に示します。 <html> <head> <title>Article headline</title> <script type="application/ld+json"> { "@context": "https://schem
Cardのマークアップでもう悩まない!NestedでClickableなUIを実現する、Link Area Delegationとは Table of Contents Table of Contents はじめに Link Area Delegationとは Link Area Delegation 提案の背景 - マークアップの制限 クリッカブルなコンテナを実現する既存の方法 既存方法とその問題 現状検討されている4つの実装方法 1. Link delegation attributes 2. <linkarea> Element 3. Use CSS pointer-area Property 4. Use Invokers おわりに Appendix はじめに Open UI Community Groupで、仕様の策定が検討されている Proposal の一つに、Link Are
オジサンはiPad miniを手に入れてからお散歩に行くときは勿論、自宅作業中も傍らに置いてSlackやメールチェック用の端末として絶賛活躍中である。 og-og.hateblo.jp 購入してなんやか1ヶ月あまりが経過したのでオジサンなりの使用レポを書きたい訳だが、オジサンの生活にあまりにも馴染みすぎ、正直書く事があまりない笑笑 オジサン的に今まで使っていた無印iPadや、dtabのリプレイスであるのでiPad miniに代わったからといってやることが特段変わった訳でもなく、 仕事中は検証機兼メールチェック、ビデオ会議に使用し、プライベートではお散歩は勿論、風呂やトイレに行くときも持ち歩いている。 完全な家庭内モバイルである。 カフェに持って行っても、カフェの繋がりにくいWifiは使わずモバイル通信しているので速度は決して速くはないがネットブラウジングには充分である。 そして最近気がつい
オジサンの2020年はMac Book Pro15インチのキーボード不良から始まったMac沼であった。 事の発端は3年近く使っていたMac Book Pro15インチ2016年モデルのキーボードが突如ぐずり始めた。 例のバタフライキーボード問題である。 og-og.hateblo.jp そこから順当な買い替えとして16インチモデルを購入するも、15インチに比べてデカくて分厚く、おまけにcorei9の爆熱仕様で常にファンが回るという常時ホッカイロ仕様と相まって購入から数ヶ月で売却を決意させるほどであった。 そして13インチを購入するも相変わらずのホッカイロで笑、ファンが回り続けるのは相変わらずであった。 併用しているMacBook Airは省電力仕様でファンは早々回らないのだが、その分非力で重い作業を強いるとやはりファンが爆音で回り出すのであった。 ※(注記)ちなみに本業ではSurface Pro7
React Testing Library や Chrome の開発者ツールでアクセシビリティツリーが見えるようになるなど、最近はただ見た目通りにマークアップするだけではなく、アクセシビリティに配慮したマークアップも必要なスキルセットになってきている流れを感じます。 筆者といえば、最近HTMLやCSSをよく書くようになり、マークアップ完全に理解したからマークアップなんも分からんとなっている状況です。(アクセシビリティも同様) 今回はマークアップなんも分からんといった状況の筆者が、アクセシビリティに配慮したマークアップを意識するといった内容になります。HTML、CSS、アクセシビリティは難しいので鵜呑みにせずに適宜MDNなどのドキュメントをご確認ください。 例えばチェックボックスを装飾したい 無性にチェックボックスを装飾したいとき、あると思います。 例えばこんな感じのチェックボックスですね。
はじめに 軽量マークアップ言語(e.g. Markdown)の中で数式を書くという目的においては、TeX記法がデファクトスタンダードになっている。しかし、軽量マークアップ言語自体の「軽さ」と比較したとき、TeX記法は少し「重い」よな〜、ということを前々から思っていた。 ここで「軽い」ことをもう少ししっかり定義しておくと、「プログラムから見た時の扱いやすさや文法としての単純さよりも、人間にとっての見やすさ書きやすさを重視している」ことという感じになるだろうか。[1] TeX記法もXMLベースのMathMLなどと比べれば圧倒的に軽いのだが、もっと軽くできないものだろうか?特に、僕のようなTeXコードを編集しながら式変形を考えるタイプの人間[2]にとっては、TeX記法でも重すぎると感じることが多い。出てくる記号が多かったり、添え字の添え字のような構造が沢山出てくると、コードは何重にもネストされた
最近オジサンが参画したとあるWeb開発のプロジェクトで諸事情により私物のM1 MacBook Airを持ち込みことになり、3ヶ月程Web開発で使用した。 今回は実際にWeb制作/開発においてM1 MacBook Airがどれくらい使えるのかどうかについてオジサンなりの所感を語っていきたい。 これからWebプログラミングを始めよう、またはMacを買い替えたいが実務でM1 Macがどのくらい使い物になるか悩んでいる諸兄の参考になれば幸いである。 オジサンのMacBook Airのスペックについて アプリの対応状況について フロントエンド開発について 動作速度について 熱問題について バッテリー問題について まとめ オジサンのMacBook Airのスペックについて オジサンの購入したモデルは、GPU8コアモデル、メモリ16GB、ストレージは1TBである。 オジサンの根底に流れるとにかくmacO
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く