見出し画像

【後で役立つWebヒント集 Vol.04】Webの引き出し：私だけのWebライブラリ

neko.usaさん

スマートフォンにずっと開いたままになっているURL、ありませんか？ついつい後で読もうと思ってそのままにしてしまいますよね。

このリストは、そんな「デジタルな忘れ物」を整理して、Web制作を始めたばかりの方にも役立つようにまとめたものです。ウェブサイトの企画から実際のコーディングまで、ステップに沿って学べるように構成しました。



1. リニューアル失敗の要因は『要件定義』にあり！ プロジェクト成功の鍵は「目的」を定めることだった

URL https://webtan.impress.co.jp/e/2019/03/20/31418?amp

https://webtan.impress.co.jp/e/2019/03/20/31418?amp

ページ内容の紹介 この記事は、Webサイトのリニューアルを成功させるための「要件定義」の重要性を解説したレポートです。要件定義は、プロジェクトの意見の不一致や作業の増加を防ぎ、リニューアルの成功を導くための最初の重要な工程だと述べられています。

特に重要なのは、リニューアルの目的や範囲を明確にすることです。具体的な要件定義の進め方として、以下の4つの段階が紹介されています。

  1. 課題の把握: 経営層や関係部署へのヒアリングを通じて、現状の課題を把握する。

  2. 仮説立案: 課題に基づいてリニューアルの目的や施策のツリーを作成する。

  3. 合意形成: ワークショップなどを通じて関係者間の合意を図る。

  4. 文書化: これらを「要件定義書」として文書化する。

このプロセスを経ることで、その後の制作工程がスムーズに進み、リニューアルの目的達成につながると説明されています。



2.【HTML】articleタグで要素の構造を明確化しよう！｜使い方解説

URL https://style.potepan.com/articles/20089.html

https://style.potepan.com/articles/20089.html

ページ内容の紹介 この記事は、HTMLのarticleタグの使い方について解説しています。articleタグは、ブログ記事やニュース記事、コメントなど、それ自体で完結し独立した内容を持つセクションを示すために使用されます。


記事では、articleタグの特徴や、h1やh2などの見出しタグをarticleタグ内で使用する際のルールについて説明しています。また、articleタグと似ているsectionタグやasideタグとの使い分けについても解説しており、これらのタグの使い分けに悩んだ際に役立つ内容となっています。



3. article要素とは？ HTMLの <article> 要素を使いこなそう

URL https://developer.mozilla.org/ja/docs/Web/HTML/Reference/Elements/article

https://developer.mozilla.org/ja/docs/Web/HTML/Reference/Elements/article

ページ内容の紹介 この記事は、ウェブページやアプリケーションで独立したコンテンツをマークアップするHTMLの<article>要素について解説しています。


<article>要素は、ブログ記事、ニュース記事、ユーザーコメントなど、単独で完結し再利用や配信が可能な自己完結型の構成要素を表します。

記事では、この要素の具体的な使い方として、入れ子にして親の記事に関する内容（ブログ投稿へのコメントなど）を表現する方法や、見出し（<h1>〜<h6>）を含めるべきであることなどが説明されています。また、著者の情報は<address>要素で、発行日時は<time>要素で示すことができることも記載されています。具体的なコード例も提供されており、HTMLとCSSを使った天気の予報や映画レビューを通じて、<article>要素がどのように使われるかを視覚的に理解できるようになっています。



4. 【HTML】コンテンツを区切るタグ、sectionとarticleの違いについて解

説

URL https://zero-plus.io/media/html-section-article/#:~:text=section%E3%82%BF%E3%82%B0%E3%81%A8article%E3%82%BF%E3%82%B0%E3%81%AE%E9%81%95%E3%81%84%E3%81%AF%E3%80%81%E4%BC%BC%E3%81%A6,%E5%AF%BEdat%E3%81%97%E3%81%A6%E4%BD%BF%E7%94%A8%E3%81%95%E3%82%8C%E3%81%BE%E3%81%99%E3%80%82

https://zero-plus.io/media/html-section-article/#:~:text=section%E3%82%BF%E3%82%B0%E3%81%A8article%E3%82%BF%E3%82%B0%E3%81%AE%E9%81%95%E3%81%84%E3%81%AF%E3%80%81%E4%BC%BC%E3%81%A6,%E5%AF%BE%E3%81%97%E3%81%A6%E4%BD%BF%E7%94%A8%E3%81%95%E3%82%8C%E3%81%BE%E3%81%99%E3%80%82

ページ内容の紹介 この記事は、HTMLのsectionタグとarticleタグの違いについて解説しています。


  • sectionタグ: 「章・節・項」のように、ひとまとまりの文章やコンテンツを示すために使用されます。

  • articleタグ: ブログ記事のように、それ自体で完結し独立したコンテンツの要素に使用されます。

両タグは似ていますが、それぞれ役割が異なるため、状況に応じて使い分けることが重要です。記事では、具体的なコード例を挙げてそれぞれの使い方を示し、divタグをこれらのタグに置き換える例も紹介しています。



5. CSSで蛍光ペン風のマーカーを引く方法

URL https://junpei-sugiyama.com/highlighter-marker/

https://junpei-sugiyama.com/highlighter-marker/

ページ内容の紹介 この記事は、CSSを使ってテキストに蛍光ペン風のアンダーライン（マーカー）を引く方法を解説しています。WordPressの有料テーマでは簡単にできるこの機能を、CSSのlinear-gradient()プロパティを使って実装する具体的な方法が、サンプルコードを交えて紹介されています。


記事では、線の幅を調整する方法や、上線や上下2色に分ける方法など、さまざまな応用例も示されています。



6. CSSでテキストにマーカー風のアンダーラインをつける方法

URL https://design-baum.jp/develop/877/

https://design-baum.jp/develop/877/

ページ内容の紹介 この記事は、CSSを使ってテキストにマーカー風のアンダーラインをつける様々な方法を解説しています。text-decorationではなく、より自由にデザインできる方法として、spanタグで囲んだテキストにCSSを適用することを提案しています。


記事では、以下のようなマーカー風アンダーラインの実装方法が紹介されています。

  • 単色マーカー

  • 半透明マーカー

  • 半分のマーカー（下線のみ）

  • グラデーションマーカー

  • ストライプマーカー

  • 画像を使ったマーカー

また、padding-bottomを使ってマーカーをテキストから少しずらすテクニックや、pタグではなくspanタグを使うべき理由についても説明しています。



いいなと思ったら応援しよう！

この記事が参加している募集

#

今日の振り返り

12万件

#

編集の仕事

3,134件