previs: 面倒なマークアップは AI にやらせる

2024/02/07 16 users CLI ロジック CSS フロントエンド 実行結果

自分はフロントエンドのロジックを考えるのは得意なんですが、CSS は苦手です。 なので 自分は AI にコード変更を依頼して実行結果を目視でプレビューしつつ、その結果を受けいれるかどうかの判断だけすればよくね？と考えて、それを CLIとして実装してみました。 ボタンの色を書き換えるという簡単な例ですが、こんな感... 続きを読む

ChatGPT に対話的にマークアップを生成させてChrome拡張でプレビューする

2023/10/13 8 users React Component Chrome HTML 拡張

chat.openai.com 上でマークアップを試行錯誤するための Chrome 拡張を試作してみた。 例えば html+preview のコードブロックを見つけるとその隣に HTML として挿入する。後述するが React Component もプレビューできる。 📎 をクリックすると展開したHTMLを画像としてクリップボードに入れることができる。 いい感じに... 続きを読む

【最新のHTML仕様まとめ】「HTML Living Standard」がマークアップにとってなぜ大切なのか？ - Qiita

2023/07/06 87 users Qiita セマンティック 戦意 HTML 結論

本記事の結論は、「とりあえずHTML Living Standardを読め」です。 正直明日からHTMLを勉強したいです！って人には全くオススメできません。 おそらく開始5秒で戦意を喪失することになると思います。 とはいえHTMLの仕様全てが記述されているので「セマンティックにマークアップしたい」って時は「HTML Living Standard... 続きを読む

【仕様の読み方】HTMLの要素をどうやって学ぶか

2023/03/26 193 users HTML 要素 仕様 search 生業

<search>要素がHTML Standardに追加されました。私も初めて出会う要素になるわけですが、とても良い機会なので、私が要素を調べる際にどうやって調べて学んでいるのかを共有したいと思います。これは新しい要素に限らず、既存の要素の調査に応用できると思います。また、初学者はもちろん、マークアップを生業としている... 続きを読む

Windows 11にもスクショで情報漏洩の脆弱性、切り取り範囲外や消した部分が復元できる可能性 | テクノエッジ TechnoEdge

2023/03/22 118 users 上書き Snipping Tool TechnoEdge

Androidで見つかったスクリーンショット編集機能の脆弱性が、Windows 11の純正スクリーンショットツールにもあることが分かりました。 Windows 11 / 10標準のSnipping Tool (Win＋Shift＋S)でスクリーンショットを撮影してから、切り取ったりマークアップで塗り潰して上書き保存した場合、切り取った範囲外や消したはず... 続きを読む

HTMLとCSSを真剣に学びたい人におすすめ！ 実務レベルの知識やテクニック、考え方がよく分かる解説書 -HTML/CSSブロックコーディング

2022/12/16 14 users CSS 実務 HTML モックアップ テクニック

HTMLとCSSの実務に役立つ知識やテクニック、考え方を学びたい人にお勧めの解説書を紹介します。 デザイナーから渡されたモックアップを元に、情報の構造やデザイナーの意図を読み解き、コンテンツをブロックに分解し、コーディングの方針を検討し、HTMLのマークアップでどのように構造を設計し、CSSでスタイルする際に気... 続きを読む

マークアップのわかり方

2022/11/03 223 users 現代 行為 もと 発表 みま

この記事は、2022年10月28日に開催されたDIST.37「マークアップな夜」での発表「マークアップのわかり方」をもとにしたものです。当日は含められなかった内容も大幅に追加しています。 現代における「マークアップ」とはどのような行為なのか。いかにそれと向き合っていけばいいのか。そういったことについて考えてみま... 続きを読む

妻が「ヒューレットパッカード久々行きたい」と話していたが、実は高度な言い間違いだった「確かに語感は似てるような」

2022/09/30 108 users 語感 ヒューレットパッカード 我ら 松田直樹 歴史系

松田直樹 / SVG伝道師 @readymadegogo Web制作なら、我らが(株)まぼろし。デザインもマークアップもプログラムもいただければ喜びますが、最も喜ぶのは歴史系のライティングだったりします。 maboroshi.biz 松田直樹 / SVG伝道師 @readymadegogo 妻が「ヒューレットパッカード久々行きたい」「ヒューレットパッカードな... 続きを読む

【2022年最新】Visual Studio Codeの便利なプラグインまとめ（コーダー・マークアップ・フロントエンドエンジニア視点）

2022/09/22 229 users コーダー Sass vscode SCSS CSS

Visual Studio Code（VsCode）本体のインストール まだインストールされていない方は、以下からVsCode本体をダウンロードしてください。 VsCodeのおすすめプラグイン（コーダー・マークアップ・フロントエンドエンジニア視点） 私が導入しているVsCodeのプラグインを紹介します。 普段の業務では、HTML、CSS、Sass(SCSS)... 続きを読む

Web制作者にかなりオススメの解説書！ HTMLとCSSの今のテクニックを基本からしっかり学べるカピバラ本

2021/10/29 10 users CSS HTML テクニック Flexbox カピパラ

これは本当に、かなりお勧めの解説書です。 カピバラのかわいいイラストに癒やされながら、しっかりした知識が身につくHTMLとCSS、そしてWebデザインの解説書を紹介します。内容はかなり本格派。 HTML Living Standardに準拠したマークアップから、CSS GridやFlexboxなど、実務に役立つWebの知識がていねいに分かりやす... 続きを読む

マークアップを進化させる WAI-ARIA の基本

2020/11/14 11 users WAI-ARIA ウェブコンテンツ アクセシビリティ 基本

マークアップを進化させる WAI-ARIA の基本 私 @masuP9 WAI-ARIAとは何か WAI Web Accessibility Initiative ARIA Accessible Rich Internet Applications WAI-ARIAは、ウェブコンテンツおよび アプリケーションのアクセシビリティと相互運用性を改良するためのフレームワークを提供する技術仕様である。 Accessible Ric... 続きを読む

子どもたちがiPadでクリエイティブな学びを　Appleが指南書公開 - ITmedia NEWS

2020/04/28 17 users Apple iPad ITmedia News 子どもたち

Appleは、子どもたちが楽しめるアクティビティ「キッズのためのクリエイティブなアクティビティ 30」（PDFへのリンク）を公開した。対象年齢の目安は4歳以上。 家の中や周りにあるものを写真に撮り、写真にマークアップで絵をかきこんでキャラクターを作る「みのまわりのものでキャラクターを作る」や、iPadを動かないよ... 続きを読む

HTML - 任天堂のHPにhタグが使用されていないのは何故でしょうか。｜teratail

2020/01/27 120 users teratail www.nintendo.co.jp

https://www.nintendo.co.jp/ 任天堂の公式ホームページのマークアップについて質問です。 このサイトに見出しで使用するhタグが1つも使用されていないのは、何故でしょうか。 また、ヘッダーでリストが横並びになっているレイアウトは、通常navタグ が使用されることが多いですが、navタグが使われていないのも何か理由... 続きを読む

CSSだけでHTMLは一切無し！Webページを構成するすべてのマークアップをCSSで構築するフレームワーク -CJSS | コリス

2019/08/02 116 users コリス CSSベース CSSファイル HTML要素 body内

当ブログで「CSSで実装できる」という言葉を使いますが、厳密に言うとHTMLが必要です。しかし、今回紹介するのは、HTMLのマークアップも、データも、そしてJavaScriptもCSSファイルに記述するCSSベースのフレームワークを紹介します。 かなり特殊なフレームワークです。body内にHTML要素を一切記述したくない時にいいか... 続きを読む

iPhoneの標準機能「マークアップ」での塗りつぶしに注意喚起　消した文字が明るさ等の編集で透けて見える - ねとらぼ

2018/12/20 109 users Twitter iPhone スクリーンショット ペン とらぼ

SNSに写真やスクリーンショットをアップする際、安全のため“見られたくない部分”を隠して投稿しますが、iPhoneの標準機能である「マークアップ」での塗りつぶしでは文字が見られてしまう可能性があるとTwitterで注意喚起の声が上がっています。 マークアップは、iPhoneの「写真」アプリの機能の一つで、手軽にペンでの書... 続きを読む

マークアップをパワーアップするWAI-ARIA

2018/10/19 51 users WAI-ARIA role 目次 フロントエンドエンジニア

私たち @masuP9(わかり手) 株式会社サイバーエージェント @o_ti(キレ手) 株式会社まぼろし マークアップ生まれ マークアップ育ち フロントエンドエンジニア 受託魔族はだいたい友達 #deisui_html_radio ウェブ制作をこじらせたオレたちが 歩いてきた道は何か、進むべき道はどこかを探る （ただの飲み配信） 目次(role="d... 続きを読む

1クリックでHTML要素の構造を可視化し、セマンティック要素が正しく実装されているか検証できる -Trashy.css | コリス

2018/09/20 345 users コリス NAV header article HTML要素

Webページに実装されているHTML要素の構造を可視化し、header, nav, main, articleなどセマンティック要素が正しく実装されているか検証できるスタイルシートを紹介します。 デバッグ機能も備えており、不正なマークアップや問題のあるマークアップを表示することもできます。 Trashy.css Trashy.css -GitHub Trashy.css... 続きを読む

React Component 視点でのアトミックデザインの解釈といくつかの疑問 - mizchi's blog

2018/06/07 129 users React Component アトミックデザイン 解釈

2018 - 06 - 07 React Component 視点でのアトミックデザインの解釈といくつかの疑問 フロントエンドの中でも、JS書く プログラマ と、 CSS を書く マークアップ と、デザインカンプを作るデザイナで、 コンポーネント という概念がズレる。だいたいこれらが一人だったり兼任だったりで1~2レイヤーの開発ステップになるが、完全分業だったり人が多くなると混乱の元になる。 誰か... 続きを読む

t.jsを使ってタイピング風のアニメーションを再現する | 東京上野のWeb制作会社LIG

2018/05/29 19 users T.js アニメーション Web制作会社LIG 東京上野

どうもですよ、はやちですよ:D 今回は、ページ上でタイピングをしているようなアニメーションが再現できるツール「 t.js 」をご紹介します。 導入方法 github のほうでダウンロードしてから読み込んでください。 <script src="t.min.js"></script> 実装方法 基本的な設定方法ご紹介します:D 動かしたいhtmlのマークアップに対して <div id="js-targ... 続きを読む

モバイルネイティブアプリ開発ツールのFUSE、製品全体を「Fuse Open」としてオープンソースで公開。UXをマークアップで迅速に開発可能 － Publickey

2018/05/15 46 users FUSE ノルウェイ Publickey iOS オスロ

ノルウェイのオスロに本社を置くFusetools社は、同社がこれまで製品として提供してきたモバイル向けのネイティブアプリケーション開発フレームワーク「FUSE」を「 Fuse Open 」として オープンソースで公開しました 。 FUSEの最大の特徴は、XMLベースの独自のマークアップ言語によってiOSとAndroidに対応したモバイル向けのUXを簡単に記述できる点にあります。迅速なモバイルアプリ... 続きを読む

Google ウェブマスター向け公式ブログ: 「イベント」マークアップに関するお知らせ

2017/11/29 19 users Google ウェブマスター向け公式ブログ イベント イン

+1 ボタン 2 AMP 11 API 2 App Indexing 8 First Click Free 1 Google プレイス 2 Merchant Center 8 Search Console 93 イベント 14 ウェブマスターガイドライン 50 ウェブマスタークイズ 2 ウェブマスターツール 83 ウェブマスターフォーラム 6 オートコンプリート 1 お知らせ 48 クロールとイン... 続きを読む

RSSが衰退し、SNSが繁栄する時代に改めて考えたい、ニュースリリースのマークアップ | 富永日記帳

2017/08/16 29 users ニュースリリース 富永日記帳 役割 SNS RSS

RSSが衰退し、SNSが繁栄する時代に改めて考えたい、ニュースリリースのマークアップ 公開日: 2017年8月16日 7月下旬のことですが、またひとつフィードリーダーが終了してしまいました。 【重要】Live Dwango Reader/LDR Pocketサービス終了のお知らせ (blog.livedoor.jp) 終了の理由は この数年で利用者も大幅に減少しており、サービスとしての役割を終えた... 続きを読む

青空文庫の『走れメロス』をTEIで - digitalnagasakiのブログ

2017/07/31 7 users TEI パラグラフ digitalnagasaki メロス

2017 - 08 - 01 青空文庫の『走れメロス』をTEIで TEI 前回・前々回に引き続き、TEIの話です。前回、ごく基本的な マークアップ でもOKだということを少し書きましたが、それでは試しに、ということで、 青空文庫 の『 走れメロス 』をTEIにて書いてみました。それが こちら になります。 特に説明するようなことはあまりないのですが、TEIのタグ付けルールに従って、本文にパラグラフ... 続きを読む

改行<br>を複数連続しない方がいい理由【そんなHTMLで大丈夫か？#1】 - ペパボテックブログ

2017/06/22 50 users 改行 sizucca ペパボテックブログ HTML ペパボ

はじめまして。技術部 シニアデザイナーの @sizucca です。 HTML のマークアップを担当する職種は会社によって異なると思いますが、ペパボでは主にデザイナーが担当しています。 HTML は、プログラミング言語などに比べるとコードを書くこと自体はそれほど難しくありません。しかし、「正しい HTML」を書こうとすると一気にその難易度は高くなります。HTML のマークアップには、「間違い」はあっ... 続きを読む

Frontrend Vol.9 - 春の新人歓迎 マークアップ/アクセシビリティのキホン #frontrend | 覚え書き | @kazuhito

2017/04/30 22 users オシャンティー Frontrend kazuhito キホン

4月28日の覚え書き。オシャンティーな渋谷プライムプラザ 4F Creative Loungeで催されたイベント、 Frontrend Vol.9 - 春の新人歓迎 マークアップ/アクセシビリティのキホン にブログ絶対に書くパーソン枠で参加したので、以下に感想など徒然なるままに書こうと思います。ちなみにブログ絶対に書くパーソン枠で参加しておきながらブログ書かなかったら何が起こるのかというのに個人的... 続きを読む