【最新の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)でスクリーンショットを撮影してから、切り取ったりマークアップで塗り潰して上書き保存した場合、切り取った範囲外や消したはず... 続きを読む

マークアップのわかり方

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)... 続きを読む

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レイヤーの開発ステップになるが、完全分業だったり人が多くなると混乱の元になる。 誰か... 続きを読む

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

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

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

デザイン通りに実装するだけじゃない！フロントエンドエンジニアが考えるべきデザインのこと。〜アニメーションと印象〜 | WebNAUT

2017/03/06 106 users エンジニア 静止画 印象 WebNAUT 参考

デザイン通りに実装するだけじゃない！フロントエンドエンジニアが考えるべきデザインのこと。〜アニメーションと印象〜 Webサイトのマークアップするとき、参考にするデザインはほとんどは静止画の状態ですよね。 しかしWebサイトは「 見るだけ 」ではなく「 使うもの 」ですので、実際には様々な「 動き 」や「 状態 」が存在します。 そんな動きや状態については都度デザイナーとエンジニアが一緒に検討してい... 続きを読む

Web制作者が備えておきたい最新版チートシートのまとめ、CSS3 Flexbox, CSSアニメーション, jQuery3, ES6, Bootstrap4など | コリス

2016/11/15 556 users コリス Flexbox セレクタ コーディング CSS

CSS3のFlexboxをはじめ、CSSアニメーション、CSSのセレクタ、jQuery3, ES6, Bootstrap4など、フロントエンドのマークアップやコーディングに役立つチートシートを紹介します。 ブックマークし ...記事の続きを読む 続きを読む

Webアクセシビリティが無視されすぎで気にくわない。

2016/01/31 171 users Webアクセシビリティ 裕樹 実装 コンサルタント 上野

Webアクセシビリティが無視されすぎで気にくわない。 1. 2016/01/29 OBS 勉強会 #1 Webアクセシビリティが 無視されすぎで 気にくわない。 2. 2016/01/29 OBS 勉強会 #1 上野 裕樹 産業技術大学院大学 人間中心デザイン2012年度卒業生 大規模サイトの設計・運用マネジメント マークアップ・フロントエンドの設計・実装 中小企業のコンサルタントや、チームマネジ... 続きを読む

2015年のゲームUI/UXを振り返る | KAYAC DESIGNER'S BLOG - デザインやマークアップの話

2015/12/08 114 users KAYAC DESIGNER 覚悟 Blog ゲームUI

なので、業界関係者からは刺される覚悟で「UI/UX」という括りで今回は今年のゲームを振り返ってみたいと思います。 続きを読む

Web制作で分からないことはすぐに確認！HTML5, CSS3, jQuery, WordPress, Bootstrapなどのチートシートのまとめ | コリス

2015/09/18 415 users コリス Bootstrap SublimeText PDF

HTML5, CSS3, jQuery, WordPress, Bootstrap, SublimeTextなど、フロントエンドのマークアップやコーディングに役立つチートシートを紹介します。 PDFや画像をダウンロードし...記事の続きを読む 続きを読む

[JS]スマホでもデスクトップでも快適！水平スクロールコンテンツを簡単に実装できるスクリプト -horizonScroll.js | コリス

2015/03/16 140 users コリス jQuery head jquery.js Step

マークアップは非常にシンプル、スクリプトの設置も簡単、スマホでもタブレットでもデスクトップでもすいすい快適に操作できる水平スクロールコンテンツを実装できるjQueryのプラグインを紹介します。 デモのアニメーション horizonScroll.jsの使い方 Step 1: 外部ファイル 当スクリプトとjquery.jsを外部ファイルとして記述します。 <head> ... <script type... 続きを読む

[JS]極シンプルなマークアップで、コンテンツを横にスライドさせナビゲーションを表示するスクリプト -Slideout.js | コリス

2015/03/09 102 users コリス スクリプト ナビゲーション コンテンツ

ダウンロードファイルのデモ Slideout.jsの使い方 Step 1: 外部ファイル 当スクリプトとスタイルシートを外部ファイルとして記述します。 <head> ... <link rel="stylesheet" href="index.css"> </head> <body> ... <script src="slideout.min.js"></script> </body> Step ... 続きを読む

パンくずリストのマークアップが何が正しいのか分からなくなってきた件ｗｗｗ | 日常ぴよぴよ

2015/02/28 72 users パンくずリスト 件www 日常

昨日に引き続きSEOネタです。 先日、構造化テストツールが刷新されて、とてもスタイリッシュな見た目になったり、JSON-LDに対応したりしました。 JSON-LDって何？って思う方もいるかも知れませんが、ぼくもよく知りません。 マークアップ昨日に引き続きSEOネタです。 先日、構造化テストツールが刷新されて、とてもスタイリッシュな見た目になったり、JSON-LDに対応したりしました。 JSON-L... 続きを読む

“マークアップ”するということ ～ HTML5勧告に寄せて ～

2014/12/27 320 users HTML5勧告 修練 HTML 思考 要素

Published on 2014/12/27, under CC BY-NC. HTMLを適切な要素を使って書いていくことは実はそれほど難しくはない。しかし過剰に要素を使わずに、かつスタイリングすることも意識して、と適切に“マークアップ”するのはなかなかの修練を必要とする。いったい“マークアップ”するということはどういうことなのだろうか、そしてどのような思考の元に行えば良いのだろうか。 HTML... 続きを読む

UIはつくらない。ワクワクするストーリーをつくる。（UXのためのUI：ゲーム編） | KAYAC DESIGNER'S BLOG - デザインやマークアップの話

2014/12/10 91 users KAYAC DESIGNER 見出し ＵＩ制作 デザイナー

とりあえずかっこよさげな見出しを考えたところで８割方燃え尽きました。 デザイナーの きのです。 今回は【UX Tokyo Advent Calendar 2014】 の8日目としてお送りします。 現在、僕はゲームのUI制作の現場で働いています。*0 半年ほど前からUXの勉強を始めたので、まだUXそのものに取り組んだ経験は少ないひよっこ*1です。 既に同じような初心者側からの記事があがっていますので... 続きを読む

未経験でこれからWeb制作会社に入りたいと思っている人達へ | kazumich.log

2014/11/10 149 users 自社 名古屋 代表 システム 若い子

kazumich.log 名古屋のホームページ制作会社「有限会社アップルップル」の代表「山本一道」のブログです。新機能を試しつつ、自社のシステムや仕事・イベントレポート等を発信しております。 先週末は、マカベン名古屋 というマークアップの勉強会に参加していました。そこでこれから Web制作会社に入りたい！と思っている若い子に会ったので、どんな事をしたら私から見ていいなぁーって思うかを書いてみました... 続きを読む

ゼロから始める！tumblrカスタマイズ超入門！ | KAYAC DESIGNER'S BLOG - デザインやマークアップの話

2014/10/08 183 users KAYAC DESIGNER Blog デザイン

こんにちは！はじめまして！ カヤックHTMLファイ部に来年度新卒で入社予定のもときです。 現在はインターンとしてカヤックに来ています。 今回はtumblrについての記事です。 tumblrに関する記事はググればいくらでも出てきますが、 このデザイナーズブログではまだ扱っていないようなので、 tumblrの魅力と、tumblrサイトのカスタマイズのはじめかたを、 僕なりに紹介してみたいと思います！ ... 続きを読む