サルでもわかるWEBプログラミング

フリーソフトのみでホームページ作成

ユーザ用ツール

サイト用ツール


サイドバー

目次

サルでもわかる機械学習

sidebar

02.初めてのcssでwebデザイン:index.html


02.初めてのCSSでWebデザイン(CSSフレームワークBulmaでWEBデザイン)

ホームページの本文やリンクや画像の配置は、HTMLというプログラミング言語で記載しますが、それだけでは白黒の味気ないサイトになってしまいます。

ホームページに色をつけたりする言語として、CSS(シーエスエス)というプログラミング言語があります。

しかし、これをそのまま勉強しても、初心者には難しすぎるので、Bulmaというものを使用して、サイトを作ってGitHubで公開していきたいと思います。

CDNを用いてBulmaを用いる方法

CSSフレームワークBulmaを用いる方法として一番簡単なのは、CDN(Content Delivery Network)を利用する方法です。

具体的には、htmlファイルの<head></head>内に、以下のコードを埋め込むと、Bulmaが使えるようになると公式サイトに記載されています。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css">

ちょっと面倒ですが、以下のように入力すると、パソコンではボタンが横並びに表示され、スマホでは縦並びにボタンが表示されます。

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css">
  <script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
</head>
<body>
  <div class="section">
    <div class="columns">
      <div class="column">
        <p class="notification is-primary has-text-centered">First column</p>
      </div>
      <div class="column">
        <p class="notification is-info has-text-centered">Second column</p>
      </div>
      <div class="column">
        <p class="notification is-warning has-text-centered">Third column</p>
      </div>
      <div class="column">
        <p class="notification is-danger has-text-centered">Fourth column</p>
      </div>
    </div>
  </div>
</body>
</html>

実際の表示

https://adash333.github.io/bulma-test/column.html

スマホでの表示

参考

セクション:
https://bulma.io/documentation/layout/section/

カラム:
https://bulma.io/documentation/columns/basics/

ノーティフィケーション:
https://bulma.io/documentation/elements/notification/

文字のセンタリング:
https://bulma.io/documentation/modifiers/typography-helpers/

Bulmaを利用したホームページの作成

以下のような1ページのみからなるホームページを作成してみます。

https://adash333.github.io/bulma-test/

0.用意するもの(開発環境)

パソコン

Windowsパソコンでも、Macでも、できれば、Chromeというブラウザをインストールして、Chrome上で操作を行ってください。

1.GitHubアカウントは作成済みとします

GitHubアカウントの作成方法については、このサイトについてをご覧下さい。

2.Githubで新規リポジトリを作成(新しいファイルの置き場所を作る)

GitHubにアカウント登録をすると、ログイン後の画面になりますので、画面右上の「+」ボタンをクリックして、さらに、New repository をクリック。

  1. 「Repository name」のところに、「bulma-test」と入力し、
  2. 「Create repository」ボタンをクリックします。

3. index.htmlファイル(HTMLファイル、ホームページのファイル)を作成

すると、以下のような画面になるので、「creating a new file」をクリックします。

以下のような真っ白な画面が出てきます。

  1. name your file… のところに、index.html と記入し、
  2. 下の方に、以下のコードをがんばって打ちこみます(<head></head>で囲まれた部分はコピべがお勧めですが、<body>以下の部分は、キーボードで打ち込んでみるのがお勧めです。)
  3. 入力し終わったら、下の方へ移動して、
  4. Commit new file をクリック
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Hello Bulma!</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css">
  <script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
</head>
<body>
    
  <section class="hero is-primary is-bold">
    <div class="hero-body">
      <h1 class="title is-size-2">
        Hello World
      </h1>
      <h2 class="subtitle is-size-4">
        My first website with <strong>Bulma</strong>!
      </h2>
    </div>
  </section>
  
  <section class="section">
    <div class="container">
      <div class="columns">
        <div class="column">
          <p class="notification is-info">このページはCSSフレームワークBulmaを利用して作成したサンプルページです。</p>
        </div>
        <div class="column">
          <p class="notification is-success">パソコンでは3つのカラムが横並びに表示されます。</p>
        </div>
        <div class="column">
          <p class="notification is-warning">スマホでは3つのカラムが縦並びに表示されます。</p>
        </div>
      </div>
    </div>
  </section>
  
  <footer class="footer">
    <div class="content has-text-centered">
      <p>
        このサイトは<a href="https://bulma.io">Bulma</a>を利用しています。
      </p>
    </div>
  </footer>

</body>
</html>

4. GitHubでindex.htmlをホームページとして公開

以下のような画面になるので、画面右上の方にある、「Settings」をクリック。

  1. Settingsページが表示されるので、下の方へ行き、

  1. GitHub Pagesのところの、Source のところの、None をクリック
  2. master branch をクリック

  1. Save をクリック

5. 公開されたホームページを確認する

公開されているホームページアドレス(URLといいます)は、Settings画面から確認することができます。

  1. Settingsの画面になっていますので、そのまま下の方へ行き、
  2. GitHub Pagesの下にある、Your site is ready to be published at の右側のリンクをクリック

私の場合は、https://adash333.github.io/bulma-test/ がリンクとなり、実際、以下のようになりました。

スマホでは、以下のように表示されます。

簡単な割には、それっぽいデザインになっているのではないでしょうか?

Bulma利用のためのテンプレートhtmlファイル

Bulmaを利用したサイトのためのテンプレートファイルを以下に作りましたので、もしよろしければお使いください。

なぜかはよく分からないのですが、CSSフレームワークBulmaを用いる場合は、以下のように、最初にsection class=“section”とdiv class=“container”で囲んでおくと、思ったようなデザインにできることが多いです。

<section class="section">
  <div class="container">
    <!-- ここにコンテンツを記載 -->
  </div>
</section>

Bulma日本語リンク

公式サイトも、日本語での紹介サイトも、結構不親切なものが多いと感じます。

サンプルコードを写経しながら、Bulma公式サイトのドキュメントを読んで、自分に必要な部分を一つずつ理解していくのが一番おすすめです。

https://qiita.com/ochiochi/items/de1afd2d3fc8f6d3ea55
@ochiochi
2017年02月13日に更新
CSSフレームワーク BULMA チュートリアル①

https://misc.laboradian.com/bulma/sample1/

Bulma英語解説リンク

https://www.freecodecamp.org/forum/t/free-course-level-up-with-bulma-css/190635

英語ですが、分かりやすいですし、Scrimbaというサイトを用いて、動画での解説と、ソースコードも公開されていて素晴らしいです。

https://scrimba.com/g/gbulma

Bulmaの使用方法について、動画での詳しい解説(Scrimbaの仕組みのおかげでソースコードも簡単にコピペできます。)

Scrimba

無料で、プログラミング解説動画を作成できるサイト

解説:https://paiza.hatenablog.com/entry/2017/08/03/%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E3%81%A0%E3%81%91%E3%81%A7%E7%B0%A1%E5%8D%98%E3%81%AB%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0%E5%8B%95%E7%94%BB%E3%82%92%E4%BD%9C%E3%81%A3

CodeSandbox

無料でAngularやVue.jsのプログラミングができるサイト

解説:https://paiza.hatenablog.com/entry/2018/03/29/%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E4%B8%8A%E3%81%ABAngular%2CReact%2CVue%E7%AD%89%E3%81%AE%E7%92%B0%E5%A2%83%E3%82%92%E4%B8%80%E7%99%BA%E6%A7%8B%E7%AF%89%EF%BC%86%E9%96%8B%E7%99%BA%E3%81%A7%E3%81%8D

Bulmaのサンプルソースコードのリンク

Vue.jsとBulmaに関するリンク

http://www.art-side.com/archives/131
Vue.js(nuxt.js)内でのBulma-extention(Bulma-carousel)の使い方
2018-10-10 投稿者: miho

https://nulab-inc.com/ja/blog/backlog/vue-js-kanban-app/

ホームページをデザインするためのCSSというプログラミング言語について

ホームページのデザインをするためには、BootstrapやBulmaといったCSSフレームワークを使用すると便利ですが、結局は、細かい微調整をするために、CSSの知識が必要になると思われます。

個人的にCSSは非常に苦手ですが、以下のサイトは非常に分かりやすいので、お勧めです。

https://saruwakakun.com/html-css/basic/css
初心者向けCSS(スタイルシート)入門:基本的な書き方を総まとめ!
2017/07/15

https://saruwakakun.com/html-css/basic/margin-padding
CSSのmarginとは?paddingとは?余白の指定方法まとめ
2017/07/15

https://saruwakakun.com/html-css/basic/display
【CSS】displayの使い方を総まとめ!inlineやblockの違いは?
2018/05/06

https://saruwakakun.com/html-css/basic/text-setting
【CSS】文字装飾の基本を総まとめ!初心者向けに解説
2017/07/16


02.初めてのcssでwebデザイン/index.html.txt · 最終更新: 2019/01/29 by adash333