note保存記事

Progate修了！…で、どうすればいいの？

Progate修了おめでとうございます。これであなたもフロントエンドの第一歩を踏み出しましたね。ところで未経験からProgateでHTML/CSSを初めて勉強してみて実際どうですか？簡単？難しい？感想は人それぞれだと思います。 Progateをやり終えた駆け出しの人からよく聞く声は、「次に何をしたらいいのか分からない」「いざ自分で何か作ろうと思っても何からやったらいいのか分からない」というものです。このnoteでは、未経験からProgateで初めてHTML/C

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弾を投下します。見出し、箇条書き、段落、セクション関連要素などで文書全体の情報構造をマークアップした後は、画像の挿入、リンクの設定、その他テキストレベルでの細かい意味づけなどを必要に応じて行います。今回はこれらの細かいマークアップに関する注意点をまとめ

フォローしませんか？

#未経験webエンジニア

Progate修了！…で、どうすればいいの？

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

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

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

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