タグ

マークアップに関するquuuteeeのブックマーク (5)

  • HTML5でのアウトラインの書き方について考えてみた。 | Adlib

    【セマンティックSEO】という言葉がかなり認知されたのではないでしょうか? サイト上の文章に意味を持たせることで、これまでクローラーがただのテキストとして認識していたものを、より正確に認識しそのコンテンツが何を表しているのかを知れるようになりました。 セマンティックWEBとは? セマンティックWebとは、Webページおよびその中に記述された内容について、それが何を意味するかを表す情報(メタデータ)を一定の規則に従って付加することで、コンピュータが効率よく情報を収集・解釈できるようにする構想。インターネットを単なるデータの集合から知識のデータベースに進化させようという試みがセマンティックWebである。 IT用語辞典 セマンティックSEOと聞いて最近よく取り上げられるのが、schema.orgなどの構造化データだと思います。 Search Consoleでも構造化データマークアップが正しく行え

    HTML5でのアウトラインの書き方について考えてみた。 | Adlib
  • WAI-ARIAを活用したフロントエンド実装 | 第1回 role属性、aria属性の基礎知識

    WAI-ARIAを活用したフロントエンド実装 第1回 role属性、aria属性の基礎知識 Webコンテンツアクセシビリティを確保するさまざまな仕様のうち、WebサイトやWebアプリケーションで活用できるrole属性とaria属性について取り上げます。まず、両者の基礎的な知識から解説します。 はじめに 情報アクセシビリティに関する法整備などの背景もあり、アクセシビリティの確保は、今後、エンジニアとして無視できない技術となってきました。 あなたがこれまで、アクセシビリティに対して、あまり興味のないマークアップ・エンジニアフロントエンドエンジニアだったとしても、HTMLSVGの追加仕様であるWAI-ARIA(ウェイ・アリア)を理解すれば、Webサイトのアクセシビリティを強化できるのはもちろんのこと、CSS設計やJavaScriptでのUI実装の際にも、WAI-ARIAの考え方を役立てるこ

    WAI-ARIAを活用したフロントエンド実装 | 第1回 role属性、aria属性の基礎知識
  • 「マークアップの最適解を見つけ出す方法」というセッションをDevLOVEにて発表しました | 活動 | mkasumi.com

    2016年9月23日(金)に、DevLOVEという勉強会に話し手として参加しました。今回は東京でしたが、DevLOVEは仙台や関西でも開催している勉強会です。なんと今回が198回目だそうです。 今回お話しした理由 今回の勉強会では、「マークアップの最適解を見つけ出す方法」というタイトルでお話ししてきました。もともとアップルップルの社内勉強会で、後輩に向けて話した内容だったので基よりももっと根っこになる考え方の部分についてお話ししました。 私がこの内容を話そうと思った理由は、これから勉強する人たちに私みたいにマークアップで悩まないで欲しかったからです。私はとても長い間マークアップに悩んでいました。今はたくさん学ばなければいけないことがたくさんあるので(開発環境、作業効率、メンテナンス性などなど)、なかなかじっくり悩むということが難しいかもしれません。ですが、マークアップはまだまだ重要ですし

    「マークアップの最適解を見つけ出す方法」というセッションをDevLOVEにて発表しました | 活動 | mkasumi.com
  • WEB未経験者もどんどん伸びる!マークアップ育成プログラム | WebNAUT by Beeworks

    WEB制作部ではどんな方でもWeb制作にスムーズになじんでもらえるよう、デザイナー・ディレクター・エンジニアの職種によらず 新しいメンバーには初めに共通のマークアップ育成プログラムを使い学習してもらっています。 この記事ではその内容や考え方をご紹介します! なぜプログラムが必要なのか 以前、新しいメンバーの指導はその都度課題を設定し、作業を通じて必要になったことを教えるといった方法をとっていました。しかしタスクランナーやGitを使うなど作業環境も複雑になり、デザイナーやディレクターにも一定水準のマークアップスキルが必要になってくると、これまでの教育方法では無理があると感じるようになりました。 そこで、効率的に現在のWeb制作に必要な基技術が学べるように、共通で使用するマークアップ育成プログラムを作成しました! プログラムの概要 プログラムは講義・自学形式のレクチャーと実践編のワークの繰り

    WEB未経験者もどんどん伸びる!マークアップ育成プログラム | WebNAUT by Beeworks
  • [CSS] olの数字をCSSでいい感じに装飾する方法 * prasm(プラズム)

    あれ?どうやるんだっけな?となるコトが多いので、勉強がてら記事に。 olを使って連番付きのリストを作ろうと思った場合、数字部分が気に入らない事があります。 ブログパーツで言うと、人気記事のマークアップで、ランキングなんかを作るときに、数字部分にアプローチできれば、捗ること請け合いですね。 と思って、さあ、CSSで装飾や!ってなっても、あれolの数字って、どうやって弄ったらいいんだ?list-style??みたいになります。 じゃあ、腰入れてolの数字をカスタマイズしてやろう!と、イマココって感じです。 olとは?まずはolってなによ?という話しですが、簡単に言えば「数字付きリスト」をマークアップするためのHTMLですね。 <ol> <li>こんな</li> <li>感じで</li> <li>数字付き!</li> </ol> こんな感じで数字付き!といった具合に。 ブログやサイトのUIを作

    [CSS] olの数字をCSSでいい感じに装飾する方法 * prasm(プラズム)
  • 1