【仕様の読み方】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の「写真」アプリの機能の一つで、手軽にペンでの書... 続きを読む

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

デザイン通りに実装するだけじゃない！フロントエンドエンジニアが考えるべきデザインのこと。〜アニメーションと印象〜 | 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 ... 続きを読む

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

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

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

未経験でこれから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サイトのカスタマイズのはじめかたを、 僕なりに紹介してみたいと思います！ ... 続きを読む

デザイナー向け！iPhone6対応について（情報追加中！） | KAYAC DESIGNER'S BLOG - デザインやマークアップの話

2014/09/18 446 users KAYAC DESIGNER Blog デザイナー向け

みなのもの落ち着け！ iPhone6/6+の発売がいよいよ明日となりました！ 二年ぶりとなる画面サイズの変更に加えて@3xの台頭などもあるので、 慌てている・不安なデザイナー同志に向けて気をつける情報をまとめてみました。 画面解像度 アイコン・スクショ レイアウト対応について ひとまず気にするのはこの辺りの情報！ これを読んで、幾分かは晴れやかな気持ちで明日を迎えましょう。 それにしても時代はレス... 続きを読む

プログラミングやマークアップで特に役立つ、Sublime Textの標準機能 - Build Insider

2014/08/05 455 users Build Insider sublime text 前回

Sublime Textでは、一般的なテキストエディター機能に加えて、プログラミングやマークアップに有効な機能も提供されている。その中でも特に便利な機能をピックアップして紹介する。 今回は、前回で導入したSublime Textの基本的な利用方法について解説する。 テキストエディターとしての機能 Sublime Textは、アプリケーションのカテゴリーとしてはテキストエディターなので、基本的な機能... 続きを読む

１０秒以内に、ここ１年で見てきたデザインが出せますか？「Ember」活用まとめ | KAYAC DESIGNER'S BLOG - デザインやマークアップの話

2014/04/15 372 users 名刺 佐藤ねじ web すごいWEB Ember

まとめサイトでデザインを眺めてるだけで終わってませんか？ こんにちは、佐藤ねじと申します。仕事でも個人でもいろいろWEBつくってます。 最近だと個人では  今日は2011年3月10日かもしれない しゃべる名刺 すごいWEB  などを作っていました。 さて突然ですが質問です。 「１０秒以内に、あなたがここ１年で見てきた素敵なデザインが出せますか？」 このときサッとすぐ取り出せるように脳内やPCの中が... 続きを読む

Unityやるには必須！RGBA画像減色の基礎をまじめに書いてみた | KAYAC DESIGNER'S BLOG - デザインやマークアップの話

2014/02/19 144 users KAYAC DESIGNER Blog 基礎 必須 デザイン

Unityでのゲーム開発でも画像の軽量化がかかせません！ 軽量化は主に以下の４点の取り組みで行います。 ・画像を小さくする ・使う画像数を減らす ・画像を分割する ・変換して画像サイズを減らす ウェブや一般的なネイティブアプリ開発と同じかなと思われるかもしれませんが、 UnityではPNGやJPEGとは異なる画像方式を用います。 RGBA32bit / RGBA16bit / ARGB32 / P... 続きを読む

細かすぎて伝わらないアンチエイリアスの話 | KAYAC DESIGNER'S BLOG - デザインやマークアップの話

2014/02/04 472 users アンチエイリアス Photoshop Photos 越後 昨今

細かすぎて伝わらないアンチエイリアスの話 はじめまして、デザイナーの越後です。 webフォント全盛の昨今ですが、まだまだ文字を画像化する機会も多く 画像で文字を扱うにしても、くっきりはっきり、意図した形でデザインがしたいものです。 そこで今回は「細かすぎて伝わらないアンチエイリアス」と題して、 少しマニアックなphotoshopでのフォント調整についてお話したいと思います。 おさらい：photos... 続きを読む