あなたは間違いなくこの素晴らしいbulma cssチュートリアルを開始するまでのウェブサイトを構築する必要があります

24746 ワード
html webdev css beginners テキストリンク
この記事はもともとで公開されました.
https://www.blog.duomly.com/how-to-build-company-website-with-bulma-css/

Bulma CSSで会社ウェブサイトを構築する方法


今日、あなたはBulma CSSで会社ウェブサイトを構築する方法を学びます.
前のエピソードでは、ブートストラップ5でウェブサイトを構築する方法を学びました.
https://www.blog.duomly.com/how-to-crate-simple-web-page-using-bootstrap-5/
そして、ブートストラップ5で管理テンプレートを構築する方法を学びました.
https://www.blog.duomly.com/how-to-build-bootstrap-admin-template-tutorial/
今、それは同じ幻想的な何かのための時間であり、多分、多分、UIのために甘い.
Bulma CSSのフレームワークは非常に人気のある、偉大な使用すると、偉大なUIを構築するために使用できる美しいCSSフレームワークです.
Bulma CSSを使用すると、すぐに美しいウェブサイト、電子商取引、アプリ、さらに管理パネルを構築することができます.
今日のエピソードでは、企業のウェブサイトを構築する方法に焦点を当てます.
始めましょう!
閉じるこの動画はお気に入りから削除されています

ヘッダーの作成方法


最初のステップとして、プロジェクトの構造を作成する必要があります.
まず最初に必要なのはindexというファイルを作成することです.HTML .次にスタイルというスタイルを作ります.CSS (同じディレクトリにあります)、そして、最後のものは「img」という名前のディレクトリでなければなりません.
IMGディレクトリでは、すべての画像を処理します.
だから、もし構造があれば、インデックスに入ることができます.HTMLファイルを作成し、最初のヘッダー要素を使用して簡単なHTMLテンプレートを作成します.
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Company website with Bulma</title>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css"
    />
    <link rel="stylesheet" href="style.css" />
    <script
      defer
      src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"
    ></script>
  </head>
  <body>
    <header class="section has-background-link py-4 has-text-white">

    </header>
    <script>
      document.addEventListener('DOMContentLoaded', () => {
        // Get all "navbar-burger" elements
        const $navbarBurgers = Array.prototype.slice.call(
          document.querySelectorAll('.navbar-burger'),
          0
        );

        // Check if there are any navbar burgers
        if ($navbarBurgers.length > 0) {
          // Add a click event on each of them
          $navbarBurgers.forEach((el) => {
            el.addEventListener('click', () => {
              // Get the target from the "data-target" attribute
              const target = el.dataset.target;
              const $target = document.getElementById(target);

              // Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
              el.classList.toggle('is-active');
              $target.classList.toggle('is-active');
            });
          });
        }
      });
    </script>
  </body>
</html>

ヘッダーにコラムとアイコンを加える方法


次のステップでは、“header”要素に欠落した要素を作成する必要があります.
これを行うには、いくつかの列を作成し、そこにアイコンをテキストを配置する必要があります.
以下の例でどのように表示するかを見ることができます.
<header class="section has-background-link py-4 has-text-white">
  <div class="container">
    <div class="columns">
      <div class="column">
        <span class="icon">
          <i class="far fa-envelope"></i>
        </span>
        [email protected]
      </div>
      <div class="column">
        <i class="fas fa-phone-volume"></i>
        +44-754-443-222
      </div>
      <div class="column has-text-right-tablet">
        <i class="fas fa-headphones-alt"></i>
        Support
      </div>
    </div>
  </div>
</header>

セクションの作成方法


すごい!我々の骨格はほとんど準備ができている.
今、私たちは、テンプレート構造(ヘッダーと共に)をつくるすべてのセクションを加えなければなりません.
以下の例を見てみましょう.
<section class="section" id="hero">

</section>
<section class="section">

</section>
<section class="section" id="contact">

</section>

ヒーローセクションでメニューを作成する方法


我々が作成する必要がある次のことは、ヒーローのセクションのトップメニューです.
それを行うには、我々はBulmaのウェブサイトからメニュー全体をコピーしたり、練習したい場合は、それを入力してください.
メニューには3つの主要なセクションが含まれます.最初の1つは、左側に配置する必要がありますロゴです.
次の1つは適切なメニューです.
そして、最後のものはサインアップ/ログインボタングループです.
<section class="section" id="hero">
  <div class="container">
    <nav
      class="navbar is-transparent"
      role="navigation"
      aria-label="main navigation"
    >
      <div class="navbar-brand">
        <a class="navbar-item" href="https://bulma.io">
          <img
            src="https://bulma.io/images/bulma-logo.png"
            width="112"
            height="28"
          />
        </a>

        <a
          role="button"
          class="navbar-burger burger has-text-white"
          aria-label="menu"
          aria-expanded="false"
          data-target="navbarBasicExample"
        >
          <span aria-hidden="true"></span>
          <span aria-hidden="true"></span>
          <span aria-hidden="true"></span>
        </a>
      </div>

      <div id="navbarBasicExample" class="navbar-menu">
        <div class="navbar-start">
          <a class="navbar-item has-text-white">
            Home
          </a>

          <a class="navbar-item has-text-white">
            Services
          </a>

          <div class="navbar-item has-dropdown is-hoverable">
            <a class="navbar-link has-text-white">
              More
            </a>

            <div class="navbar-dropdown">
              <a class="navbar-item">
                About
              </a>
              <a class="navbar-item">
                Jobs
              </a>
              <a class="navbar-item">
                Contact
              </a>
              <hr class="navbar-divider" />
              <a class="navbar-item">
                Report an issue
              </a>
            </div>
          </div>
        </div>

        <div class="navbar-end">
          <div class="navbar-item">
            <div class="buttons">
              <a class="button is-info">
                <strong>Sign up</strong>
              </a>
              <a class="button is-warning">
                Log in
              </a>
            </div>
          </div>
        </div>
      </div>
    </nav>
  </div>
</section>

コラムで英雄をつくる方法


私たちのヒーローはゆっくりとより良い形になります.
今、我々はトップメニューの下に追加されるべきである2つのコラムに集中することができます、しかし、まだ「英雄」セクションで.
次の手順で、これらの列の内部にコンテンツを追加します.
以下の例を見てみましょう.
<div class="columns pt-6">
  <div class="column mt-6">

  </div>
  <div class="column mt-6">

  </div>
</dev>

英雄の左のコラム内容をつくる方法


これは、必要なコンテンツを“英雄”列を満たすために時間です.
この手順では、左の1つの列に焦点を当てます.
我々はいくつかの要素が必要です、我々が加えるべき最初のものは大きいアイコンです.
次に、H 1サイズの見出しと下のテキストを追加する必要があります.
最後の要素として、黄色のボタンを追加する必要があります.
以下のコード例を見てみましょう.
<span class="icon has-text-warning">
  <i class="far fa-chart-bar fa-lg"></i>
</span>
<h1 class="is-size-1 has-text-white has-text-weight-semibold">
  Web design<br />
  & App Development
</h1>
<p class="has-text-white">
  Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quae at
  natus dicta tempora? Distinctio vero aut, eveniet perferendis
  maiores corporis.
</p>
<button class="button is-warning mt-4">
  Learn more
</button>

英雄にイメージを加えてください


ここで最後のステップであり、ここでは1つの要素だけを追加する必要があるのでとても簡単です.
右の列では、“img”ディレクトリからイメージを追加する必要があります.
我々は購入した画像を使用しますが、FreeEpicのような任意のウェブサイトを訪問することができますか、どこか他の無料画像を見つけることができます.
以下のコード例を見てみましょう.
<img src="img/hero-image.png" />

サービスヘッダーを作成する方法


我々は現在、我々の代理店が提供するサービスを示す次のセクションに行くことができます.
サービスセクションの最初のステップとして、セクションヘッダーを追加する必要があります.
そのようなヘッダーを作成するには、タイトルと字幕の組み合わせを使用できます.
そのためには、“title”というクラスを最初の要素に追加する必要があります.
<section class="section" id="services">
  <div class="container">
    <div class="has-text-centered">
      <h2 class="title is-2">Full Service Web Development Agency</h2>
      <h6 class="subtitle is-6 has-text-grey">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis
      </h6>
    </div>
  </dev>
</section>

カードの作り方


現在、我々はサービスに入ることができて、「カード」という名前の要素に集中することができます.
最初にdiv "column "とdiv "column "を追加する必要があります.
次に、アイコン、タイトル、コンテンツ、フッターを持つカードを作成する必要があります.
以下の例を見てみましょう.
<div class="columns pt-6">
  <div class="column">
    <div class="card">
      <div class="card-content">
        <div class="has-text-centered">
          <span class="icon is-size-1 py-6 my-3">
            <i class="fas fa-code"></i>
          </span>
        </div>
        <p class="title is-4">
          Web development
        </p>
        <div class="content">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit.
          Laborum necessitatibus veritatis ullam ratione
        </div>
      </div>
      <footer class="card-footer">
        <a href="#" class="card-footer-item">Learn more</a>
      </footer>
    </div>
  </div>
</dev>

サービスでカードをつくる方法


今、あなたはカードを作成する方法を知っているが、1つは十分ではありません.
私たちは、すべての異なるアイコンとタイトルを持つ8つのカードが必要になりますが、心配しないでください.
あなたはそれらを1つずつ書く必要はありません.
我々は、列のdiv、アイコンを変更すると、タイトルをコピーすることができますが、ダブル“列”のdivについては、1行で8枚のカードを持っていないことを忘れないでください.
以下のコード例を見てみましょう.
<div class="columns pt-6">
  <div class="column">
    <div class="card">
      <div class="card-content">
        <div class="has-text-centered">
          <span class="icon is-size-1 py-6 my-3">
            <i class="fas fa-code"></i>
          </span>
        </div>
        <p class="title is-4">
          Web development
        </p>
        <div class="content">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit.
          Laborum necessitatibus veritatis ullam ratione
        </div>
      </div>
      <footer class="card-footer">
        <a href="#" class="card-footer-item">Learn more</a>
      </footer>
    </div>
  </div>
  <div class="column">
    <div class="card">
      <div class="card-content">
        <div class="has-text-centered">
          <span class="icon is-size-1 py-6 my-3">
            <i class="fas fa-paint-brush"></i>
          </span>
        </div>
        <p class="title is-4">
          Web design
        </p>
        <div class="content">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit.
          Laborum necessitatibus veritatis ullam ratione
        </div>
      </div>
      <footer class="card-footer">
        <a href="#" class="card-footer-item">Learn more</a>
      </footer>
    </div>
  </div>
  <div class="column">
    <div class="card">
      <div class="card-content">
        <div class="has-text-centered">
          <span class="icon is-size-1 py-6 my-3">
            <i class="fas fa-server"></i>
          </span>
        </div>
        <p class="title is-4">
          Web hosting
        </p>
        <div class="content">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit.
          Laborum necessitatibus veritatis ullam ratione
        </div>
      </div>
      <footer class="card-footer">
        <a href="#" class="card-footer-item">Learn more</a>
      </footer>
    </div>
  </div>
  <div class="column">
    <div class="card">
      <div class="card-content">
        <div class="has-text-centered">
          <span class="icon is-size-1 py-6 my-3">
            <i class="fas fa-mobile-alt"></i>
          </span>
        </div>
        <p class="title is-4">
          Mobile development
        </p>
        <div class="content">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit.
          Laborum necessitatibus veritatis ullam ratione
        </div>
      </div>
      <footer class="card-footer">
        <a href="#" class="card-footer-item">Learn more</a>
      </footer>
    </div>
  </div>
</div>
<div class="columns pt-6">
  <div class="column">
    <div class="card">
      <div class="card-content">
        <div class="has-text-centered">
          <span class="icon is-size-1 py-6 my-3">
            <i class="far fa-chart-bar"></i>
          </span>
        </div>
        <p class="title is-4">
          SEO Boost
        </p>
        <div class="content">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit.
          Laborum necessitatibus veritatis ullam ratione
        </div>
      </div>
      <footer class="card-footer">
        <a href="#" class="card-footer-item">Learn more</a>
      </footer>
    </div>
  </div>
  <div class="column">
    <div class="card">
      <div class="card-content">
        <div class="has-text-centered">
          <span class="icon is-size-1 py-6 my-3">
            <i class="fas fa-ad"></i>
          </span>
        </div>
        <p class="title is-4">
          Marketing
        </p>
        <div class="content">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit.
          Laborum necessitatibus veritatis ullam ratione
        </div>
      </div>
      <footer class="card-footer">
        <a href="#" class="card-footer-item">Learn more</a>
      </footer>
    </div>
  </div>
  <div class="column">
    <div class="card">
      <div class="card-content">
        <div class="has-text-centered">
          <span class="icon is-size-1 py-6 my-3">
            <i class="fas fa-funnel-dollar"></i>
          </span>
        </div>
        <p class="title is-4">
          Sales funnels
        </p>
        <div class="content">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit.
          Laborum necessitatibus veritatis ullam ratione
        </div>
      </div>
      <footer class="card-footer">
        <a href="#" class="card-footer-item">Learn more</a>
      </footer>
    </div>
  </div>
  <div class="column">
    <div class="card">
      <div class="card-content">
        <div class="has-text-centered">
          <span class="icon is-size-1 py-6 my-3">
            <i class="fas fa-cog"></i>
          </span>
        </div>
        <p class="title is-4">
          Maintenance
        </p>
        <div class="content">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit.
          Laborum necessitatibus veritatis ullam ratione
        </div>
      </div>
      <footer class="card-footer">
        <a href="#" class="card-footer-item">Learn more</a>
      </footer>
    </div>
  </div>
</div>

ボタンのグループを加える方法


カードの下に、我々は2つのボタンを加えるべきです.
最初のものは黄色でなければなりません、そして、第2のものは青でなければなりません.
つのグループでそれらを持っているために、私たちはクラスを「グループ化されています」を使用する必要があります、そして、スタイルを彼らが中心にするために「style . css」で少しスタイルを整えてください.
スタイルは、次の手順で追加します、今ちょうどHTMLを追加しましょう.
コード例を見てみましょう.
<div class="field is-grouped mt-6 is-flex service-buttons">
  <p class="control">
    <button class="button is-warning">
      Free consultation
    </button>
  </p>
  <p class="control">
    <button class="button is-info">
      Request pricing
    </button>
  </p>
</div>

で分割を作成する方法


残念なことに、Bulma CSSでは除算コンポーネントがありません.
NPMパッケージをインストールしたり、スタイルを作成するためにいくつかの行を追加したりできます.
後でスタイルを追加しますが、以下のコード例を見てください.そうすれば、秒単位で除算器を作成する方法がわかります.
.logos:before {
  content: '';
  position: absolute;
  width: 50%;
  left: 25%;
  top: 0;
  border-top: 1px solid #ebebeb;
}

クライアントロゴを加える方法


これはサービスセクションの最後のステップです.おめでとう!
この手順では、クライアントのロゴを追加する必要があります.
そのためには、単純なgirdを作成し、クラス「列」と4つのdivsを追加し、それらの中にイメージを入れるだけです.
<div class="columns mt-6 pt-5 logos is-relative">
  <div class="column">
    <img src="https://placeholder.com/wp-content/uploads/2018/10/placeholder.com-logo1.jpg">
  </div>
  <div class="column">
    <img src="https://placeholder.com/wp-content/uploads/2018/10/placeholder.com-logo3.jpg">
  </div>
  <div class="column">
    <img src="https://placeholder.com/wp-content/uploads/2018/10/placeholder.com-logo1.jpg">
  </div>
  <div class="column">
    <img src="https://placeholder.com/wp-content/uploads/2018/10/placeholder.com-logo3.jpg">
  </div>
</div>

コンタクトフォームの作り方


ウーホー!私たちは今最後のセクションに入ります、そして、あなたのウェブdevエージェンシーウェブサイトはすぐにクライアントの準備ができています!
最初のステップとして、最後のセクションで2つのカラムを作成する必要があります.
次に、最初の(左)列では、空の体と黄色のヘッダーを持つ簡単なカードを作成する必要があります.
次のステップでは、いくつかの入力、および送信ボタンを持つフォームを追加する必要があります.
以下の例を見てみましょう.
<section class="section" id="contact">
  <div class="container">
    <div class="columns">
      <div class="column">
        <div class="card">
          <header class="card-header has-background-warning">
            <p class="card-header-title">
              Free Consultation
            </p>
          </header>
          <div class="card-content">
            <div class="field">
              <label class="label">Name</label>
              <p class="control">
                <input class="input" type="text" placeholder="Name">
              </p>
            </div>
            <div class="field">
              <label class="label">Phone number</label>
              <p class="control">
                <input class="input" type="text" placeholder="Phone number">
              </p>
            </div>
            <div class="field">
              <label class="label">Email</label>
              <p class="control">
                <input class="input" type="email" placeholder="Email">
              </p>
            </div>
            <div class="field">
              <p class="control">
                <button class="button is-warning">
                  Submit
                </button>
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

証拠を加える方法


次のステップとして、私たちは私たちのクライアントが私たちを与えたとのレビューとの証拠を追加することができます.
そのためには、右の列に2つの大きな引用アイコンを作成する必要があります.
次に、それらの間に白いテキストを追加する必要があります.
<div class="column has-text-white pt-6 pl-6">
  <span class="icon is-size-1 pb-6 my-3 has-text-grey-lighter">
    <i class="fas fa-quote-left"></i>
  </span>
  <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Maxime placeat, dolorem, quam expedita deleniti accusantium animi adipisci neque rem nobis at necessitatibus iusto vero exercitationem illum amet hic eligendi sapiente!</p>
  <p class="has-text-weight-bold pt-3 is-size-4">John Doe</p>
  <span class="icon is-size-1 pt-6 pr-3 my-3 has-text-grey-lighter is-pulled-right">
    <i class="fas fa-quote-right"></i>
  </span>
</div>

カスタムスタイルを追加


それは当社のウェブサイトと重要なものの最後のステップです.
このステップでは、スタイルに移動する必要があります.CSSとスタイルの要素.
あなた自身の写真をバックグラウンドで使用する必要があることを忘れないでください.
簡単にインターネット上で無料の写真を見つけることができます.
次のコード例で追加したスタイルを見てみましょう.
#hero {
  background: url('img/hero-bg.png');
  height: 1079px;
  background-position-x: center;
  background-size: cover;
}

#hero .navbar.is-transparent {
  background-color: transparent;
}

.service-buttons {
  justify-content: center !important;
}

.logos:before {
  content: '';
  position: absolute;
  width: 50%;
  left: 25%;
  top: 0;
  border-top: 1px solid #ebebeb;
}

#contact {
  background: url('img/contact-bg.png');
  background-size: cover;
}

@media screen and (max-width: 1023px) {
  .navbar-menu a.has-text-white {
    color: #4a4a4a !important;
  }
  .navbar-menu a.has-text-white:hover {
    color: #3273dc !important;
  }
}

CIMAでウェブサイトを構築する方法の結論


おめでとう、ウェブ開発エージェンシーのためのあなたのウェブサイトは、最初のクライアントの準備ができています!
今日、あなたはBulma CSSで会社ウェブサイトを構築する方法を学びました.
AWSコースLesson 1で:CloudFlareでS 3の上でウェブサイトをホストする方法は、あなた自身のウェブサイトをホストする方法に関してステップバイステップのチュートリアルを見つけることができます.
ここではAWSコースのLesson 1へのURLを示します.
https://www.blog.duomly.com/aws-course-lesson-1-how-to-host-website-on-s3-with-cloudflare/
それは準備ができて、S 3上でホストされた後、あなたのウェブサイトを表示することを忘れないでください!

読書ありがとう.
DuomlyからのRadek
ZabbixドッキングGrafana
AWS Systems Manager Session Manager導入メモ