note保存記事

再利用できるセレクタの書き方をレクチャー

よく初学者・初級者向けの教材では、HTMLやCSSについて、わかりやすさを優先して説明するためにHTML要素タグを用いたセレクタ指定（クラス名ではなく、<p>や<div>に直接指定する方法）で教えることがあります。しかしながら、その方法でのCSSスタイリングは多くの問題を抱えています。皆さんが何気なくやっているセレクタ指定の方法を改めて考えてみることで、スマートなHTMLやCSSを書くことがいかに大事なのか、その必要性に気が付きます。クラス名をつけるということクラ

未経験エンジニアとして就職するための一番賢い勉強方法をレクチャー

毎年、多くの方がWebサイト制作を学び始め、転職活動に勤しんでいます。 HTMLやCSS、JavaScriptを身につけようと、様々な取り組みをおこない頑張っておられるかと思います。あなた：「はい、インターネットや書店に置いてある教材で順当に学んでいます」しかしながら、あなたのその勉強の方法が間違っていたら、と考えたことはありませんか？あなた：「いや、自分はイケてるものを作れている自信がある」見栄えの良いポートフォリオサイトを制作しようと、〈かっこいいレイ

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

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

Webデザインについて＃1「コンテナという概念」

前回のお話と前置きこのシリーズは「グラフィックデザイナーがWebを学んでみて」というテーマで不定期連載しております。このマガジンに今後もストックされていきます。初回では -デザインとは？ -紙とWebの違いについてまとめました。今回はWebデザインを行う上での基本的概念の「コンテナ」についてまとめます。これはデザインのみでなくコーディングにも通ずる考え方です。前回の記事で書いたようにWEBデザイナーは全員コーディングを行う必要はないと思いますが -自身のデザインがど

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

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

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

フォローしませんか？

#HTML