CSS | メサイア・ワークス

tailwind.cssでhello,world!

2024年5月20日に admin が投稿

tailwind.cssでhello,world! styleタグもCSS定義ファイルは使わずに、クラス指定でスタイル指定するのが斬新！ ToDoアプリの見た目を、tailwind.cssで整える。レスポンシブでhel 続きを読む tailwind.cssでhello,world!→

package.jsonから開始するreactチュートリアル。Dog APIで犬画像ギャラリー

2024年4月23日に admin が投稿

package.jsonから開始するreactチュートリアル。Dog APIで犬画像ギャラリー参考URL https://zenn.dev/likr/articles/6be53ca64f29aa035f07 [cra 続きを読む package.jsonから開始するreactチュートリアル。Dog APIで犬画像ギャラリー→

CSSの練習で、yahooニュースRSSを使って、gigazineみたいな表示をしてみた！

2024年4月22日に admin が投稿

CSSの練習で、yahooニュースRSSを使って、gigazineみたいな表示をしてみた！ https://messiahworks.com/news/ 他サーバにあるrssデータを、jsから直接取得できないWeb仕様な続きを読む CSSの練習で、yahooニュースRSSを使って、gigazineみたいな表示をしてみた！→

CSS写経してみた。なんでコメントが全然無いの？

2024年4月18日に admin が投稿

CSS写経してみた。なんでコメントが全然無いの？ CSSって、特に何の説明もなく、属性や値が記述されてて、どういう意図でこのCSS書いたの？と疑問に思う事が多いけど、基本的にコメントが無い。経験則や慣習で、書いているの続きを読む CSS写経してみた。なんでコメントが全然無いの？→

単純なhtml5とcss3で、サンプル企業サイトを作ってみたけど、やっぱりcssの値をどう設定するのが正解か分からない…。

2024年4月17日に admin が投稿

単純なhtml5とcss3で、サンプル企業サイトを作ってみたけど、やっぱりcssの値をどう設定するのが正解か分からない…。

<!DOCTYPE html> <!-- html5宣言 -->
<html lang="ja"> <!-- 日本語のhtml5文書 -->

<head> <!-- htmlのヘッダ宣言 -->
  <meta charset="UTF-8"> <!-- 文字化け防止 -->
  <!-- スマホなどレスポンシブデザイン用。デバイス幅で表示。等倍表示 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>初めてのHTML5</title> <!-- ブラウザに表示されるタイトル -->
  <link rel="stylesheet" href="styles.css"> <!-- 使うcssを指定。relはrelationship(関係性)の略 -->
</head>

<!-- htmlのbody(本体)宣言 -->
<body> 
   <!-- このページの見出し -->
  <header>
    <h1>このページのタイトル</h1> <!-- このページのタイトル -->
    <nav> <!-- ナビゲーションバー専用タグ。このサイトのリンク -->
      <ul> <!-- unorder list (順番号なしリスト)-->
        <!-- リンク先をid指定でsectionに移動する。縦長じゃないと意味ない？ -->
        <li><a href="#home">ホーム</a></li> 
        <li><a href="#services">サービス</a></li>
        <li><a href="#contact">お問い合わせ</a></li>
      </ul>
    </nav>
  </header>
  <!-- このページのメインの内容 -->
  <main>
    <section id="home">
      <h2>ホーム</h2>
      <p>ホームページの内容</p>
    </section>
    <section id="services">
      <h2>サービス</h2>
      <p>提供するサービスの内容</p>
    </section>
    <section id="contact">
      <h2>お問い合わせ</h2>
      <p>連絡先を記述</p>
    </section>    
  </main>
  <!-- このページのフッタ -->
  <footer>
    <p>@ 2024 オレオレ株式会社 All rights reserved.</p>
  </footer>
</body>
</html>

<!DOCTYPE html>

<title>初めてのHTML5</title>

</head>

<body>

<h1>このページのタイトル</h1>

<li><a href="#contact">お問い合わせ</a></li>

</ul>

</nav>

</header>

<main>

<p>ホームページの内容</p>

</section>

<p>提供するサービスの内容</p>

</section>

<h2>お問い合わせ</h2>

<p>連絡先を記述</p>

</section>

</main>

</footer>

</body>

</html>

[crayon-673f46e 続きを読む単純なhtml5とcss3で、サンプル企業サイトを作ってみたけど、やっぱりcssの値をどう設定するのが正解か分からない…。→