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

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

ユーザ用ツール

サイト用ツール


z_blog:2019:190323_elmでbulmaを利用


差分

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

この比較画面へのリンク

次のリビジョン
前のリビジョン
z_blog:2019:190323_elmでbulmaを利用 [2019/03/23] – 作成 adash333z_blog:2019:190323_elmでbulmaを利用 [2019/04/14] (現在) – [ソースコードその他] adash333
行 5: 行 5:
 やってみたいと思います。 やってみたいと思います。
  
-===== ク =====+===== 開発環境 ===== 
 +参考:http://i-doctor.sakura.ne.jp/font/?p=36967 
 + 
 +Windows 10 Pro 
 +Chrome 
 +VisualStudioCode 1.32.3 
 +git version 2.20.1.windows.1 
 +nvm 1.1.7 
 +node 10.2.0 
 +npm 6.4.1 
 +elm 0.19.0 
 +elm-format 0.8.1 
 +VisualStudioCodeの拡張機能でelmをイストールして、settings.jsonに以下のようにelmを設定 
 +<code> 
 +    "[elm]":
 +        "editor.formatOnSave": true 
 +    }, 
 +</code> 
 +create-elm-app 3.0.6 
 + 
 +VisualStudioCodeで、Alt+Shift+F, Ctrl+S を繰り返しながらコーディングをしていきます。 
 +===== public/index.html ===== 
 +public/index.htmlの<head></head>内に、bulmaとFontAwesome5のCDNを記載して、使用できるようにします。 
 + 
 +<code> 
 +<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.min.css"> 
 +<script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script> 
 +</code> 
 + 
 + 
 +===== src/Main.elm ===== 
 + 
 +<html> 
 +<script src="https://gist.github.com/adash333/6d2e1cb2df25b96f4ff55022f3dd63ca.js"></script> 
 +</html> 
 + 
 +{{:z_blog:2019:pasted:20190414-174324.png}} 
 +===== ソースコードその他 =====
  
 https://github.com/syossan27/kuso2018-front https://github.com/syossan27/kuso2018-front
  
 +https://github.com/ababup1192/crud_elm
  
 +https://package.elm-lang.org/packages/surprisetalk/elm-bulma/latest/
 +
 +
 +
 +
 +===== リンク =====
  
  


z_blog/2019/190323_elmでbulmaを利用.1553343484.txt.gz · 最終更新: 2019/03/23 by adash333

Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki