Hello Bulma!

===== 02.初めてのCSSでWebデザイン(CSSフレームワークBulmaでWEBデザイン) ===== ホームページの本文やリンクや画像の配置は、HTMLというプログラミング言語で記載しますが、それだけでは白黒の味気ないサイトになってしまいます。ホームページに色をつけたりする言語として、CSS(シーエスエス)というプログラミング言語があります。しかし、これをそのまま勉強しても、初心者には難しすぎるので、Bulmaというものを使用して、サイトを作ってGitHubで公開していきたいと思います。 ==== CDNを用いてBulmaを用いる方法 ==== CSSフレームワークBulmaを用いる方法として一番簡単なのは、CDN（Content Delivery Network）を利用する方法です。具体的には、htmlファイルの内に、以下のコードを埋め込むと、Bulmaが使えるようになると公式サイトに記載されています。

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




  
  
  
  
  


  
    
      
        First column
      
      
        Second column
      
      
        Third column
      
      
        Fourth column

実際の表示 https://adash333.github.io/bulma-test/column.html {{:02.初めてのcssでwebデザイン:pasted:20181209-020732.png}} スマホでの表示 {{:02.初めてのcssでwebデザイン:pasted:20181209-020752.png}} 参考セクション: 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/ {{:02.初めてのcssでwebデザイン:pasted:20181209-020848.png}} ==== 0.用意するもの（開発環境） ==== パソコン\\ Windowsパソコンでも、Macでも、できれば、Chromeというブラウザをインストールして、Chrome上で操作を行ってください。 ==== 1.GitHubアカウントは作成済みとします ==== GitHubアカウントの作成方法については、[[:index.html|このサイトについて]]をご覧下さい。 ==== 2.Githubで新規リポジトリを作成（新しいファイルの置き場所を作る） ==== GitHubにアカウント登録をすると、ログイン後の画面になりますので、画面右上の「＋」ボタンをクリックして、さらに、New repository をクリック。 {{:pasted:20181202-200027.png}} -「Repository name」のところに、「bulma-test」と入力し、 -「Create repository」ボタンをクリックします。 {{:pasted:20181202-200406.png}} ==== 3. index.htmlファイル（HTMLファイル、ホームページのファイル）を作成 ==== すると、以下のような画面になるので、「creating a new file」をクリックします。 {{:pasted:20181202-200811.png}} 以下のような真っ白な画面が出てきます。 {{:pasted:20181202-200844.png}} -name your file... のところに、index.html と記入し、 -下の方に、以下のコードをがんばって打ちこみます（で囲まれた部分はコピべがお勧めですが、以下の部分は、キーボードで打ち込んでみるのがお勧めです。） -入力し終わったら、下の方へ移動して、 -Commit new file をクリック





  
  
  Hello Bulma!
  
  


    
  
    
      
        Hello World
      
      
        My first website with Bulma!
      
    
  
  
  
    
      
        
          このページはCSSフレームワークBulmaを利用して作成したサンプルページです。
        
        
          パソコンでは3つのカラムが横並びに表示されます。
        
        
          スマホでは3つのカラムが縦並びに表示されます。
        
      
    
  
  
  
    
      
        このサイトはBulmaを利用しています。

{{:pasted:20181202-201514.png}} {{:pasted:20181202-201647.png}} ==== 4. GitHubでindex.htmlをホームページとして公開 ==== 以下のような画面になるので、画面右上の方にある、「Settings」をクリック。 {{:pasted:20181202-202255.png}} -Settingsページが表示されるので、下の方へ行き、 {{:pasted:20181202-202339.png}} -GitHub Pagesのところの、Source のところの、None をクリック -master branch をクリック {{:pasted:20181202-202800.png}} -Save をクリック {{:pasted:20181202-202914.png}} ==== 5. 公開されたホームページを確認する ==== 公開されているホームページアドレス（URLといいます）は、Settings画面から確認することができます。 {{:pasted:20181202-203329.png}} -Settingsの画面になっていますので、そのまま下の方へ行き、 -GitHub Pagesの下にある、Your site is ready to be published at の右側のリンクをクリック {{:pasted:20181202-203644.png}} 私の場合は、https://adash333.github.io/bulma-test/　がリンクとなり、実際、以下のようになりました。 {{:cssフレームワークbulmaでwebデザイン:pasted:20181207-005258.png}} スマホでは、以下のように表示されます。 {{:cssフレームワークbulmaでwebデザイン:pasted:20181207-005329.png}} 簡単な割には、それっぽいデザインになっているのではないでしょうか？ ==== Bulma利用のためのテンプレートhtmlファイル ==== Bulmaを利用したサイトのためのテンプレートファイルを以下に作りましたので、もしよろしければお使いください。なぜかはよく分からないのですが、CSSフレームワークBulmaを用いる場合は、以下のように、最初にsection class="section"とdiv class="container"で囲んでおくと、思ったようなデザインにできることが多いです。

===== Bulma日本語リンク ===== 公式サイトも、日本語での紹介サイトも、結構不親切なものが多いと感じます。サンプルコードを写経しながら、[[https://bulma.io/documentation/|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のサンプルソースコードのリンク ===== https://www.sitepoint.com/a-css-framework-in-6-minutes-with-bulma/ 英語ですが、順番に説明があって、分かりやすいです。 https://github.com/dansup/bulma-templates/blob/master/templates/kanban.html https://github.com/adash333/bulma-test/blob/master/index.html ===== 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