note保存記事

正しいイメージタグの扱い方をレクチャー

<img>タグは頻繁に使用されるタグということもあり、その分間違った使い方をよく見ます。本記事では、<img>タグの取り扱いについて、以下の2点について解説したいと思います。 1. <img>タグをどんなタグで囲うか 2. alt属性には何を入れたら良いか <img>タグをどんなタグで囲うかよくTwitterや個人の方が書かれているブログなどで「<img>タグは、○○タグで囲うべきだ！」というようなことを発信されているのを見かけます。しかしながら、そもそも<img

Progateが教えてくれない、マークアップの考え方

おまたせしました。「Progateが教えてくれないフロントエンドの基礎知識」シリーズ第二弾を投下します。今日はズバリ、「マークアップ」についてです。ProgateでHTMLの書き方を勉強した駆け出しの方に向けて、Web制作の現場で求められるマークアップの考え方を解説します。 HTMLを書く≠マークアップProgateを終了した方であればHTMLを書く事自体は特に難しいものではない、ということは理解していることと思います。 <h1>見出し</h1><p>段落</p><ul>

世界一「雑」に説明するセマンティック・マークアップの手順（１）

Progate卒業生のみなさん、こんにちは。「Progateが教えてくれないフロントエンドの基礎知識」シリーズの第一弾、第二弾が比較的好評だったようなので、調子に乗って第三弾を投下します。今回は、見出しだけではなく一般的なWebページ全体を最低限セマンティックにマークアップするための、世界一（？）雑な説明をお届けします（笑）見出し（h1〜h6）前回の記事に書いたとおり、一番基本的なHTMLのセマンティックを担保するための要素は「見出し」です。１に見出し、２に見出し、３

世界一「雑」に説明するセマンティック・マークアップの手順（2）

前回の記事では、単純な文書を最低限セマンティックにマークアップする手順を解説しましたが、今回はそこから更に情報構造を肉付けしていってみたいと思います。ただし、このnoteではあくまで出来るだけ楽に、でも不適切なマークアップにならないようにするための手順を示すことに主眼を置いているので、各要素の詳細な仕様や使い方の事例などは各自で調べるようにしてください。コンテンツ情報をグルーピングする見出し、段落、箇条書きといった文書内の個別の要素の意味づけが終わったら、次にそれらのコ

世界一「雑」に説明するセマンティック・マークアップの手順（3）

年末から怒涛のコーディング案件ラッシュでnote書いてる余裕が全くなったので、かなり間があいてしまいました。待っててくれた方（いるの？）ごめんなさい。というわけで、今更ですがProgateが教えてくれないシリーズ第5弾を投下します。見出し、箇条書き、段落、セクション関連要素などで文書全体の情報構造をマークアップした後は、画像の挿入、リンクの設定、その他テキストレベルでの細かい意味づけなどを必要に応じて行います。今回はこれらの細かいマークアップに関する注意点をまとめ

Progateが教えてくれない、デザインカンプからのコーディング手順

Progateの道場コース、苦戦してる人多いみたいですね。課金中には道場までやらなかったのでちゃんと中身は精査できてないのですが、無料でできる範囲の初級編headerを作るところだけやってみても、「あ、こりゃ大変だわ」と思いました。なにしろそれまであれだけ手取り足取り丁寧にお膳立てされた環境で学ばせていたくせに、道場になると手のひら返したように突然ノーヒントで「自由にやってね♪」となるわけですから、戸惑わないわけがないわけです。むしろ道場コースを何の問題もなくスラスラとク

フォローしませんか？

#マークアップ