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

差分

このページの2つのバージョン間の差分を表示します。

この比較画面へのリンク

--- 02.初めてのcssでwebデザイン:index.html [2018/12/07] – 作成 adash333
+++ 02.初めてのcssでwebデザイン:index.html [2019/01/29] (現在) – [Vue.jsとBulmaに関するリンク] adash333
@@ 行 52: / 行 52: @@
 https://adash333.github.io/bulma-test/column.html
+{{:02.初めてのcssでwebデザイン:pasted:20181209-020732.png}}
+スマホでの表示
+{{:02.初めてのcssでwebデザイン:pasted:20181209-020752.png}}
 参考
@@ 行 70: / 行 74: @@
 以下のような1ページのみからなるホームページを作成してみます。
 https://adash333.github.io/bulma-test/
+{{:02.初めてのcssでwebデザイン:pasted:20181209-020848.png}}
 ==== 0.用意するもの（開発環境） ====
@@ 行 200: / 行 203: @@
 簡単な割には、それっぽいデザインになっているのではないでしょうか？
+==== Bulma利用のためのテンプレートhtmlファイル ====
+Bulmaを利用したサイトのためのテンプレートファイルを以下に作りましたので、もしよろしければお使いください。
+<html>
+<script src="https://gist.github.com/adash333/69c4a5df13a0e6d3c105260f318f7f94.js"></script>
+</html>
+なぜかはよく分からないのですが、CSSフレームワークBulmaを用いる場合は、以下のように、最初に<wrap hi>section class="section"とdiv class="container"</wrap>で囲んでおくと、思ったようなデザインにできることが多いです。
+<code>
+<section class="section">
+  <div class="container">
+    <!-- ここにコンテンツを記載 -->
+  </div>
+</section>
+</code>
@@ 行 266: / 行 285: @@
 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（スタイルシート）入門：基本的な書き方を総まとめ！
+/07/15
+https://saruwakakun.com/html-css/basic/margin-padding
+CSSのmarginとは？paddingとは？余白の指定方法まとめ
+/07/15
+https://saruwakakun.com/html-css/basic/display
+【CSS】displayの使い方を総まとめ！inlineやblockの違いは？
+/05/06
+https://saruwakakun.com/html-css/basic/text-setting
+【CSS】文字装飾の基本を総まとめ！初心者向けに解説
+/07/16

02.初めてのcssでwebデザイン/index.html.1544143353.txt.gz · 最終更新: 2018/12/07 by adash333