Movatterモバイル変換

[0]ホーム

サクサク読めて、
アプリ限定の機能も多数！

アプリで開く

はてなブックマーク

閉じる

テクノロジー
おじさんが若者たちにモテるためのモダンなHTML/CSSマークアップ

気に入った記事をブックマーク

気に入った記事を保存できます
保存した記事の一覧は、はてなブックマークで確認・編集ができます
記事を読んだ感想やメモを書き残せます
非公開でブックマークすることもできます

おじさんが若者たちにモテるためのモダンなHTML/CSSマークアップ

テクノロジーカテゴリーの変更を依頼記事元:

qiita.com/kyoyababa

適切な情報に変更

エントリーの編集

エントリーの編集は全ユーザーに共通の機能です。
必ずガイドラインを一読の上ご利用ください。

このページのオーナーなので以下のアクションを実行できます

タイトル、本文などの情報を
再取得することができます

コメントを非表示にできますコメント表示の設定

ブックマークしました

ここにツイート内容が記載されますhttps://b.hatena.ne.jp/URLはspanで囲んでください

Twitterで共有

次回からTwitterへ自動リダイレクト

ONにすると、次回以降このダイアログを飛ばしてTwitterに遷移します

445usersがブックマークコメント

コメントするにはログインが必要ですブックマークを追加

ブックマークを追加

よく使うタグ

おじさんが若者たちにモテるためのモダンなHTML/CSSマークアップ

445 users

qiita.com/kyoyababa

よく使うタグ

はてなブックマークで
関心をシェアしよう

みんなの興味と感想が集まることで
新しい発見や、深堀りがもっと楽しく

ユーザー登録

アカウントをお持ちの方はログインページへ

記事へのコメント29件

注目コメント
新着コメント

motchangセマンティクスにうるさいのおっさん/おばさんの方じゃない？(´･_･`)

html

2017/05/21リンク

その他

Nean とかとかの説明、これでいいの？

2017/05/20リンク

その他

taguch1おじさんの定義が若いのでおじいちゃんエンジニアになってしまった。

2017/05/21リンク

その他

lenoreこう言うの、おじさんじゃなくてフロントもやらされてしまう若手バックエンドエンジニアに見せたい。おじさんHTMLやらない。

2017/05/21リンク

その他

Tomosugiまずは自分で書いた文章を読み直すことを強くすすめる。例えば、「なぜ「モテ」なければいけないのか」の小見出しのあとの段落に対応する文章が見当たらない、など。

2017/06/14リンク

その他

chocopie116いろんなタグあるんだなー

2017/06/07リンク

その他

silossowskiとかとかとか細かく使うのって、htmlで装飾していたり、これらのタグがSEOに意味があったりした時代の名残って感じがするし、コードがとっ散らかるので好きくない

2017/05/31リンク

その他

mad-capone正しいマークアップはウェブアクセシビリティの向上につながる。極論だけど、見た目はCSSで、意味はHTMLで。。

2017/05/24リンク

その他

primedesignworksおじさんの定義が若かった。

2017/05/24リンク

その他

sakadonうーんまあ、歴史的経緯を知らぬ人には良いとオモタ、2003年ごろからマークアップしてるおっさん共は早く死なないと。ただ、解釈の問題が常に付きまとうし、主旨主語が曖昧な言語（日本語）だとつらい部分もあるね

2017/05/23リンク

その他

shinagaki若者たちはスマホからわざわざソースを見たりしないだろうな

2017/05/22リンク

その他

o9rahtml5 マークアップ

2017/05/22リンク

その他

s99e209意図を明確にするHTMLコーディング

2017/05/22リンク

その他

soul_soul_Qこういう話、嫌いじゃない。やるとか、やらねぇとか、やれねぇとかは、どーでもいいけど

2017/05/21リンク

その他

vndn『30歳前後の』は？

2017/05/21リンク

その他

ka-ka_xyzhttps://developer.mozilla.org/ja/docs/Web/HTML/Element/i とかhttps://developer.mozilla.org/ja/docs/Web/HTML/Element/u とか見てると何か違くね感が強い。その"セマンティックなマークアップ"ってほんとに他者と認識共有されてんの感

2017/05/21リンク

その他

wordinameはDB上のカラム名をそのまま使う、JSONなりシリアライズしてそのままPOSTで済むから

2017/05/21リンク

その他

doubleup意図は理解するが賛同はできない

2017/05/21リンク

その他

abababababababaガラケー用のコーディングはね、って言ったらモテないんだろうなー。おじさんはね、でぃぶタグが大好きなんだ。世界のすべてはでぃぶで囲えば間違いないよ()■セマンティックでモテるのかな…？正しいだろうけど。

あとで読む

2017/05/21リンク

その他

hirose504おじさんが知らない事いっぱいあった / "Mozillaのデベロッパガイドに、あらゆるフォーム項目の命名指針やその他属性の指定方法が記載"

html

2017/05/21リンク

その他

kvxariaまで踏み込もう

2017/05/21リンク

その他

musignマークアップは大多数には関係ないんかな、その「大多数」がだれなのかを正しく知れていないのでなんとも言えない

2017/05/21リンク

その他

peperon_brain30歳が…おじさん……？

2017/05/21リンク

その他

mami-hateこれを機にマークアップを見直す

2017/05/21リンク

その他

psfactoryおじさんが若者たちにモテるためのモダンなHTML/CSSマークアップ - Qiita

2017/05/21リンク

その他

motchangセマンティクスにうるさいのおっさん/おばさんの方じゃない？(´･_･`)

html

2017/05/21リンク

その他

lenoreこう言うの、おじさんじゃなくてフロントもやらされてしまう若手バックエンドエンジニアに見せたい。おじさんHTMLやらない。

2017/05/21リンク

その他

taguch1おじさんの定義が若いのでおじいちゃんエンジニアになってしまった。

2017/05/21リンク

その他

luccafortテーブルダメ絶対！とだけフロントエンドエンジニアに言われて困ったことあるのでビフォーアフターがあるのは良い。

あとで読む

2017/05/21リンク

その他

rinxmoon“フォームの各項目は名前が標準化されている”

2017/05/21リンク

その他

hatsu_miいい

2017/05/21リンク

その他

fanjak2参考

2017/05/21リンク

その他

Nean とかとかの説明、これでいいの？

2017/05/20リンク

その他

コメントするにはログインが必要ですログインしてコメント

注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています

リンクを埋め込む

以下のコードをコピーしてサイトに埋め込むことができます

プレビュー

はてなブックマークボタンを作成して埋め込むこともできます

規約違反を報告

いまの話題をアプリでチェック！

バナー広告なし
ミュート機能あり
ダークモード搭載

アプリをダウンロード

usersに達しました！

さんが1番目にブックマークした記事「おじさんが若者た...」が注目されています。

気持ちをシェアしよう

ツイートする

おじさんが若者たちにモテるためのモダンなHTML/CSSマークアップ

タイトルに含まれる語に関する補足おじさん：筆者の便宜上、30歳前後のフロントエンドエンジニア、マ...タイトルに含まれる語に関する補足おじさん：筆者の便宜上、30歳前後のフロントエンドエンジニア、マークアップエンジニア等を指す。性別は問わない。なぜ「モテ」なければいけないのか「モテる」とは、最先端の流行を知り取捨選択することで、自由意志を謳歌することで実現する。PHPとjQueryの時代は廃れ始め、AngularやReactに代表されるUIフレームワーク、ES2015やTypeScriptを流暢に扱えることがフロントエンドの責務となり、HTMLやCSSも、EJSやPug・SassやPostCSSなどのトランスパイル言語を介すことがほぼ常識になってきた（と思う）。ところが、HTMLやCSSを何の言語で書くか以前に、中身をどうするべきかはあまり議論されていないので、「モテる」ための方法をいくつかかいつまんでまとめてみた。セマンティックなコーディングは、開発者の課題理解度を図り、意