cssフレームワークbulmaでwebデザイン:index.html
差分
このページの2つのバージョン間の差分を表示します。
両方とも前のリビジョン前のリビジョン次のリビジョン | 前のリビジョン | ||
cssフレームワークbulmaでwebデザイン:index.html [2018/12/06] – [3. index.htmlファイル(HTMLファイル、ホームページのファイル)を作成] adash333 | cssフレームワークbulmaでwebデザイン:index.html [2018/12/07] (現在) – 削除 adash333 | ||
---|---|---|---|
行 1: | 行 1: | ||
- | ===== CSSフレームワークBulmaでWEBデザイン ===== | ||
- | |||
- | ==== CDNを用いてBulmaを用いる方法 ==== | ||
- | |||
- | CSSフレームワークBulmaを用いる方法として一番簡単なのは、CDN(Content Delivery Network)を利用する方法です。 | ||
- | |||
- | 具体的には、htmlファイルの< | ||
- | |||
- | < | ||
- | <link rel=" | ||
- | </ | ||
- | |||
- | ちょっと面倒ですが、以下のように入力すると、パソコンではボタンが横並びに表示され、スマホでは縦並びにボタンが表示されます。 | ||
- | |||
- | < | ||
- | < | ||
- | < | ||
- | < | ||
- | <meta charset=" | ||
- | <meta name=" | ||
- | <link rel=" | ||
- | <script defer src=" | ||
- | </ | ||
- | < | ||
- | <div class=" | ||
- | <div class=" | ||
- | <div class=" | ||
- | <p class=" | ||
- | </ | ||
- | <div class=" | ||
- | <p class=" | ||
- | </ | ||
- | <div class=" | ||
- | <p class=" | ||
- | </ | ||
- | <div class=" | ||
- | <p class=" | ||
- | </ | ||
- | </ | ||
- | </ | ||
- | </ | ||
- | </ | ||
- | </ | ||
- | |||
- | 実際の表示 | ||
- | |||
- | https:// | ||
- | |||
- | 参考 | ||
- | |||
- | セクション: | ||
- | https:// | ||
- | |||
- | カラム: | ||
- | https:// | ||
- | |||
- | ノーティフィケーション: | ||
- | https:// | ||
- | |||
- | 文字のセンタリング: | ||
- | https:// | ||
- | |||
- | ===== Bulmaを利用したホームページの作成 ===== | ||
- | |||
- | 以下のような1ページのみからなるホームページを作成してみます。 | ||
- | |||
- | |||
- | https:// | ||
- | |||
- | |||
- | ===== 開発環境 ===== | ||
- | パソコン\\ | ||
- | Windowsパソコンでも、Macでも、できれば、Chromeというブラウザをインストールして、Chrome上で操作を行ってください。 | ||
- | |||
- | ==== 1.GitHubアカウントは作成済みとします ==== | ||
- | GitHubアカウントの作成方法については、[[: | ||
- | |||
- | ==== 2.Githubで新規リポジトリを作成(新しいファイルの置き場所を作る) ==== | ||
- | |||
- | GitHubにアカウント登録をすると、ログイン後の画面になりますので、画面右上の「+」ボタンをクリックして、さらに、New repository をクリック。 | ||
- | |||
- | {{: | ||
- | |||
- | -「Repository name」のところに、「bulma-test」と入力し、 | ||
- | -「Create repository」ボタンをクリックします。 | ||
- | |||
- | {{: | ||
- | |||
- | ==== 3. index.htmlファイル(HTMLファイル、ホームページのファイル)を作成 ==== | ||
- | すると、以下のような画面になるので、「creating a new file」をクリックします。 | ||
- | |||
- | {{: | ||
- | |||
- | 以下のような真っ白な画面が出てきます。 | ||
- | |||
- | {{: | ||
- | |||
- | -name your file... のところに、index.html と記入し、 | ||
- | -下の方に、以下のコードをがんばって打ちこみます(< | ||
- | -入力し終わったら、下の方へ移動して、 | ||
- | -Commit new file をクリック | ||
- | |||
- | < | ||
- | < | ||
- | < | ||
- | < | ||
- | <meta charset=" | ||
- | <meta name=" | ||
- | < | ||
- | <link rel=" | ||
- | <script defer src=" | ||
- | </ | ||
- | < | ||
- | | ||
- | <section class=" | ||
- | <div class=" | ||
- | <h1 class=" | ||
- | Hello World | ||
- | </h1> | ||
- | <h2 class=" | ||
- | My first website with < | ||
- | </h2> | ||
- | </ | ||
- | </ | ||
- | | ||
- | <section class=" | ||
- | <div class=" | ||
- | <div class=" | ||
- | <div class=" | ||
- | <p class=" | ||
- | </ | ||
- | <div class=" | ||
- | <p class=" | ||
- | </ | ||
- | <div class=" | ||
- | <p class=" | ||
- | </ | ||
- | </ | ||
- | </ | ||
- | </ | ||
- | | ||
- | <footer class=" | ||
- | <div class=" | ||
- | <p> | ||
- | このサイトは< | ||
- | </p> | ||
- | </ | ||
- | </ | ||
- | |||
- | </ | ||
- | </ | ||
- | </ | ||
- | |||
- | {{: | ||
- | |||
- | {{: | ||
- | ==== 4. GitHubでindex.htmlをホームページとして公開 ==== | ||
- | 以下のような画面になるので、画面右上の方にある、「Settings」をクリック。 | ||
- | |||
- | {{: | ||
- | |||
- | -Settingsページが表示されるので、下の方へ行き、 | ||
- | |||
- | {{: | ||
- | |||
- | -GitHub Pagesのところの、Source のところの、None をクリック | ||
- | -master branch をクリック | ||
- | |||
- | {{: | ||
- | |||
- | -Save をクリック | ||
- | |||
- | {{: | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | ===== Bulma日本語リンク ===== | ||
- | 公式サイトも、日本語での紹介サイトも、結構不親切なものが多いと感じます。 | ||
- | |||
- | サンプルコードを写経しながら、[[https:// | ||
- | |||
- | https:// | ||
- | @ochiochi | ||
- | 2017年02月13日に更新 | ||
- | CSSフレームワーク BULMA チュートリアル① | ||
- | |||
- | |||
- | https:// | ||
- | |||
- | ===== Bulma英語解説リンク ===== | ||
- | |||
- | https:// | ||
- | |||
- | 英語ですが、分かりやすいですし、Scrimbaというサイトを用いて、動画での解説と、ソースコードも公開されていて素晴らしいです。 | ||
- | |||
- | https:// | ||
- | Bulmaの使用方法について、動画での詳しい解説(Scrimbaの仕組みのおかげでソースコードも簡単にコピペできます。) | ||
- | |||
- | |||
- | Scrimba | ||
- | |||
- | 無料で、プログラミング解説動画を作成できるサイト | ||
- | |||
- | 解説:https:// | ||
- | |||
- | CodeSandbox | ||
- | |||
- | 無料でAngularやVue.jsのプログラミングができるサイト | ||
- | |||
- | 解説:https:// | ||
- | |||
- | |||
- | |||
- | ===== Bulmaのサンプルソースコードのリンク ===== | ||
- | |||
- | https:// | ||
- | 英語ですが、順番に説明があって、分かりやすいです。 | ||
- | |||
- | |||
- | https:// | ||
- | |||
- | |||
- | |||
- | https:// | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | ===== Vue.jsとBulmaに関するリンク ===== | ||
- | |||
- | http:// | ||
- | Vue.js(nuxt.js)内でのBulma-extention(Bulma-carousel)の使い方 | ||
- | 2018-10-10 投稿者: miho | ||
- | |||
- | |||
- | https:// | ||
- | |||
cssフレームワークbulmaでwebデザイン/index.html.1544111501.txt.gz · 最終更新: 2018/12/06 by adash333