なぜHTMLだけなのか。拙著「武器になるHTML」の執筆を通して伝えたかったこと - Shibajuku
こんにちは。 いつも通りのパーマをかけたらトイプードルみたいになった、どうも柴田です。 さてさて、昨年の11月26日に技術評論社さんより「武器になるHTML」というHTMLだけに特化した初学者向けの書籍を出版させて頂きました。 この記事を読んで下さっている方の中にも、すでに本書をお持ちの方もいらっしゃるかもしれませんね。 ご購入頂きありがとうございます！ ひょっとしたら、もう読み終えられた方もいらっしゃるかもですね。 ということで、本書が発売されて半年近く経ちますが、今更ながら、この本をどういう想いで書いて、どんな方に読んで頂きたいのかについて書いてみたいと思います。 目次 初学者の方に向けたHTMLだけの424ページ「とりあえずこう書いておきましょう」は、ありません一人でも多くの人が利用できるWebサイトを構築するために学校やスクールの先生が教科書としても使いやすいように中級者になっても
【2022年3月版】文章・画像を引用する時のHTMLの書き方｜SEO基礎 ｜ TK-CREATE
自分のウェブサイトに外部サイトの情報を記載するときには、引用タグを使う必要があります。当記事は、その記述方法を解説したものです。 対象読者は、テキストエディタを使ってHTMLをコーディングする方です。 筆者：タケヨシ ホームページに関する仕事をしています。今年で10年目。現在はフリーランスで働いています。 ホームページに関する困りごとがあればご相談ください。 »»» 相談する 当記事で紹介するHTMLについて 情報源：WHATWG 当記事は『WHATWG』の情報をもとに作成したものです。 ↓ WHATWG の説明 WHATWG (Web Hypertext Application Technology Working Group) はウェブ標準の保守や開発を行うためのコミュニティで、 DOM, Fetch, HTML などを扱っています。 Apple、Mozilla、Opera の従業員た
引用元を表すタグ <cite>要素とcite=”URL”属性の違いと使い分け方 – Jill Tone Blog
blockquote や q など、HTMLにおける引用タグ。 サイト訪問者だけでなくGoogleなど検索エンジンに引用であることを示し、ペナルティを回避するためのSEO対策的な一面も持つHTMLタグでもあります。 ややこしいことに、引用タグと対となり引用元を示す cite タグには要素形式のlt;cite>と属性形式のcite="URL"の2種類が存在しています。 引用タグの解説をしているサイトでもciteの使い方はどちらか一方しか解説していないことも多く、初心者にはよくわからないタグのひとつとなっています。 2種類あるcite、どちらが正しい？引用タグの使い方を調べていると、引用元を表す cite の使い方でどちらか一方しか解説されていないことが多々あります。その両方をまとめるとこんな感じ。 <!-- 属性としてのciteタグ --> <blockquote cite="https:/
マークアップを進化させる WAI-ARIA の基本
マークアップを進化させる WAI-ARIA の基本 私 @masuP9 WAI-ARIAとは何か WAI Web Accessibility Initiative ARIA Accessible Rich Internet Applications WAI-ARIAは、ウェブコンテンツおよび アプリケーションのアクセシビリティと相互運用性を改良するためのフレームワークを提供する技術仕様である。 Accessible Rich Internet Applications (WAI-ARIA) 1.2 日本語訳 WAI-ARIAは ウェブのアクセシビリティを 高めるための技術仕様 WAI-ARIAはなぜ必要か アプリケーション化するウェブ Notion Figma G Suite 3D CAD etc... 意味も振る舞いも 既存のHTMLでは表現できなくなってきた 例えば タブUI 開いてい
Webページ高速化に必須の知識！ブラウザがWebページをどのようにレンダリングしているか、図を用いて解説
ブラウザがWebページをどのようにレンダリングしているか、図を用いてやさしく解説した記事を紹介します。 レンダリングの仕組みを理解することで、HTMLやCSSやJavaScriptなど実装時にも気をつける点があります。 How the browser renders a web page by James Starkie 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. HTMLの解析（パース）を開始する 2. 外部リソースを取得する 3. CSSを解析し、CSSOMを構築する 4. JavaScriptを実行する 5. DOMとCSSOMをマージしてレンダリングツリーを構築する 6. レイアウトとペイントを計算する はじめに 私の考えとしては、高速で信頼性の高いWebサイトを構築するには、実装中に各ステップを最適
開発者のためのReactJSロードマップ
ThemeSelection 高品質でモダンなBootstrap HTMLテーマや管理者向けテンプレートを提供するUIキットベンダ この記事は、著者の許可を得て配信しています。 https://dev.to/theme_selection/reactjs-roadmap-for-developers-2824 ReactJSまたはReactは、ユーザーインターフェイスやUIコンポーネントを構築するためのオープンソースのフロントエンドのJavaScriptライブラリです。Facebookや個人の開発者や企業のコミュニティがメンテナンスをしています。近年、コンポーネントベースのGUI開発に最適なライブラリの一つとして成長しています。 AngularやVue.jsのようなフロントエンドフレームワークは他にもありますが、Reactが他と違うのは、コンポーネントベースのGUI開発だけに焦点を当ててお
SEOに重要な全HTMLタグと構造化マークアップテンプレート
HTMLに求められることは何か？ユーザーから検索エンジンに要求されることは、単なる文章ではなく、「意図」になりました。そのため、ウェブページを記述する基本言語であるHTMLには、 ことが求められます。 HTMLを適切に記述することで、そのコンテンツが持つ本来の意味を検索エンジンに伝えやすくなり、SEOに強力に働きます。 セマンティックとは何か？「本来の意味やユーザーが求める意図」を意識した検索のことを「セマンティック検索」といいます。現在ではランクブレインなどの人工知能を活用しながら行われています。 「意図」を意識してHTMLを記述することを「セマンティックHTML」や「セマンティックにマークアップ」などと呼びます。 せっかく作った渾身のコンテンツをより正確に検索エンジンに伝えるためには、HTMLを理解し、文法通りにマークアップすることがどうしても必要です。 HTMLマークアップのポイント
[CSS]悩む人も多い、要素を内包するラッパーの最適な実装テクニック
HTMLで最初に書かれている要素が、他のすべてを包み込む要素であるということは少なくありません。これはラッパーと呼ばれるもので、多くの人が使用していると思います。 このラッパーの在り方について、divがよいのか、sectionはどうなのか、コンテナとの違い、レスポンシブ対応の幅指定やpadding指定の効果的なテクニックなどを紹介します。 The Best Way to Implement a “Wrapper” in CSS 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 Wrapper vs Container -ラッパーとコンテナ width vs max-width -widthとmax-width Additional Padding -追加のpadding どのHTML要素を使用するべきか <body>タグを使用 v
![[CSS]悩む人も多い、要素を内包するラッパーの最適な実装テクニック](https://cdn-ak-scissors.b.st-hatena.com/image/square/a295455180b3b8aecc4e6fcf4fa77f6224405f55/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201703%2F2017082401.png)
Reactを使うとなぜjQueryが要らなくなるのか - Qiita
はじめに React（通称 React.js1）を全く知らない、あるいは幾つか記事を見たけどなんなのかピンと来ていない、という人のために書いています。 「jQuery くらいしか知らない」くらいの人に具体的に雰囲気を知ってもらうのが目的であり、すでにやる気がある人向けのチュートリアルではありません。やる気が出れば日本語版ドキュメントを読んで手を動かせばあっという間なので、そこまでの興味が出ることを目標にしています。 以降では ES2015 (ES6) の文法（アロー関数とか）を使っています。この部分が怪しい人は先にアロー関数と const 文だけでも知ってから先に進んでください。 以下の説明中、このアイコンで表すのは（2023 年現在から見た）『昔話』です。新しく自分のコードを書く際には本来知らなくていいことですが、古い記事を見たときに混同しないための参考情報として書いてあります。この記事
CSSを最適化してページの読み込み時間を高速化する方法
CSSを最適化して、ページの読み込み時間を高速化する方法を紹介します。 シンプルなCSSのファイルをはじめ、大規模プロジェクトで使用されるCSSまで、すべてのCSSに効果があるテクニックです。 Optimizing CSS for faster page loads by Tomas Pustelnik 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 読み込みに時間がかかるのはなぜか？ スタイルシートのファイルサイズを制限する クリティカルCSSを使用する 遅延読み込みのスタイルシート スタイルシートにコード分割を使用する まとめ はじめに 先日、私は自分のWebサイトの読み込み時間を改善することにしました。すでにかなり高速にロードされていましたが、まだ改善の余地があり、CSSの読み込みがその原因の1つであることが分か
JavaScript学習ロードマップ - Qiita
JavaScript苦手・・という状況からJavaScript好きになれるロードマップ（多分） 全編ほぼ動画なので、とっても見やすい。挫折しづらい。 全体的な流れとしては、動画見る ▶︎ コードを書いて学習の流れです 個人的に好きなエンジニア系Youtuberのお二人の動画がメインになります Yahoo!出身のエンジニア しまぶーのIT大学さん Web万屋エンジニアチャンネルさん LEVEL ☆ JavaScriptってなに？ そもそもJavaScriptって何？フロントエンドって何してるの？ってレベルを解消 フロントエンド基礎編 / 約40分 LEVEL ★ JavaScript入門編 JavaScriptをマスターするならHTMLを知っておかないかん by 弊社マネージャー HTMLの基礎から、JavaScriptの全体像を学習できます。 HTML入門編 / 約43分 JavaScri
ウェブ入門 - ウェブ開発を学ぶ | MDN
プロが作るようなウェブサイトを作るのはとても大変な作業です。ウェブ開発の初心者は、まずは小さなものから作り始めるとよいでしょう。今すぐ Facebook のようなサイトを作ることはできませんが、簡単なウェブサイトなら作るのはそれほど難しくありません。私たちはここから始めることにしましょう。 以下の一覧の記事を通して作業することで、何もないところから、最初のウェブページをオンラインで公開できるようになります。さあ、旅を始めましょう。 基本的なソフトウェアのインストール ウェブサイトを構築するためのツールは、実にさまざまなものからがあります。これから始める人は、コードエディター、フレームワーク、テストツールなど、さまざまな種類のツールに戸惑うかもしれません。この記事では、基本的なウェブ開発を始めるために必要なソフトウェアをインストールする方法を手順を追って紹介します。 ウェブサイトをどんな外見
【ブログ向け】CSSセレクタ入門【基本編】 - mlog
今回は、「CSSセレクタ」 について解説していきたい思います。 主に、ブログでCSSデザインを導入する場合を想定 して、基本編・応用編の２回に分けて解説を進めて行きます。 今回は、基本編として、CSSセレクタについて簡単に解説した後、よく使う「基本のセレクタ」を紹介していきます。 ※ ブログでCSSを使用する場合は、お使いのブログがCSSの使用に対応している必要があります。 目次 CSSセレクタとは？ カスタム対象のクラスやIDの確認方法 記事中で紹介するコードの表示確認方法【ブログ向け】 はてなブログの場合 CSSファイルから試す場合 よく使う「基本のセレクタ」 要素の指定 ID名の指定 クラス名の指定 要素名＋クラス名で指定 特定の複数クラスを持つ要素を指定 複数セレクタの指定 子孫セレクタの指定 子セレクタの指定 まとめ CSSセレクタとは？ 「CSS」を使うと、HTMLの特定の要素
超絶初心者のためのフロント入門（HTML、CSS、JavaScript） - Qiita
1. はじめに 1-1. 技術の概要 エンジニアの技術は、かなりざっくり言うと、 フロントエンド → 見える部分。 （例）HTML、CSS、JavaScriptなど サーバサイド → アプリケーションを動かす中身の部分。 （例）Java、PHP、Ruby、C、C++、Perlなど インフラ → Webアプリケーションを動かすための環境構築など。 （例）Webサーバ構築、DBサーバ構築、DNSサーバ構築など の3つに類別できる。 その中で、プログラミング未経験者が最も手をつけやすいのが、フロント（HTML、CSS、JavaScript）の技術である。 ※ 上記は、「Webアプリケーション開発」のお話です。 ※ 「ネイティブ開発」ではObjective-C/Swift/AndroidJava/Cocos2d-x/Unityなどがよく使われる。 1-2. フロントの概要 フロントの技術を学ぶため
【入門向け！】独学に最適なHTMLを学べる学習サイト20選
【入門向け！】独学に最適なHTMLを学べる学習サイト20選 初心者向けにHTMLを独学で学習できるサイトをまとめて紹介しています。入門向けでかつ無料で利用できるので、これから始める人におすすめです。自分に合った学習スタイルでHTMLの勉強を始めてみてはいかがでしょうか！ テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査 Web開発やデザインをやってみたいけれど、何から手をつければ良いか分からないという方もいらっしゃるかもしれませんね。 Web
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScriptやフレームワーク等への依存がない、純粋なHTML/CSSで作られた無料のランディングページのテンプレート集・「Uisual」
フロントエンド学習のロードマップ | FrontierTech Media
HTML, CSS, and JavaScript Tutorials, References, and Articles | HTML Dog
はじめてのHTML入門講座
https://www.ituore.com/entry/html-css-basic
