見出し画像

【オリジナルアプリ】トップページ作成1

ono

トップページを作成していきます！
下に各文章の説明書きがあります！
※プログラミング初心者のため記述が誤っている場合があります。

app/views/layouts/application.html.erb

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1"
      crossorigin="anonymous"
    />
    <link
      href="https://unpkg.com/boxicons@2.0.9/css/boxicons.min.css"
      rel="stylesheet"
    />
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.1/font/bootstrap-icons.css" rel="stylesheet">
    <title>Oriapp</title>

    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    <%= stylesheet_link_tag "style", "data-turbo-track": "reload" %>
    <%= javascript_importmap_tags %>
  </head>
</html>

  1. <html lang="en">：HTML文書が英語で書かれていることを示します。

  2. <meta charset="utf-8" />：このページの文字エンコーディングがUTF-8であることを示します。

  3. <meta name="viewport" content="width=device-width, initial-scale=1" />：ビューポートの幅をデバイスの幅に合わせ、初期のズームレベルを1に設定することをブラウザに指示します。これにより、モバイルデバイスでのレスポンシブWebデザインが可能になります。

  4. <link>タグ（3個）：BootstrapやBoxiconsというCSSライブラリを外部から読み込み、ページに適用します。これにより、Bootstrapのグリッドシステムや、Boxiconsのアイコンを使用できます。

  5. <title>Oriapp</title>：ブラウザのタブに表示されるページのタイトルを設定します。

  6. <%= csrf_meta_tags %>：Rails特有の記述で、Cross-Site Request Forgery（CSRF）攻撃を防ぐためのトークンをページに埋め込みます。

  7. <%= csp_meta_tag %>：Content Security Policy（CSP）に関するメタタグを生成します。これもセキュリティ対策の一部で、特定のコンテンツの読み込みを制限します。

  8. <%= stylesheet_link_tag "style", "data-turbo-track": "reload" %>："style"という名前のスタイルシートを読み込みます。また、"data-turbo-track": "reload"により、ページ遷移時にもこのスタイルシートが必ず再読み込みされます。

  9. <%= javascript_importmap_tags %>：importmapを使用してJavaScriptモジュールを読み込むタグを生成します。これにより、JavaScriptの依存関係を管理し、モダンなJavaScript開発を実現します。


次の投稿にapp/views/layouts/application.html.erbの続きの記述を載せます😊

最近投稿にいいねがついて嬉しいです♡
頑張ります！


この記事が気に入ったらサポートをしてみませんか？