個人アプリ制作２　WEBフォントの導入

3182 ワード
Rails Ruby 初心者 scss haml Ruby テキストリンク

今日の実装

①　controller users tweet
②　model　user(devise) tweet
③　haml scssの導入
④　viewの作成　tewwt index

webフォントの導入　Google Web Fonts

今回はおしゃれフォントをにしするためにGoogle Web Fontsを使用した。

導入方法

今回はscssで導入方法を記述する。

１　使いたいフォントを探す

google fonts から使いたいフォントを探す。
Google Web Fonts

右上にタブの

link href="https://fonts.googleapis.com/css2?family=Anton&display=swap" rel="stylesheetのURLをコピーする。

２　SCSSに読み込ませる

app/assets/stylesheets/application.scss
@import url(https://fonts.googleapis.com/css?family=Anton);

これでSCSS内でfontfamilyでAntonを使用することができる。

3 SCSSに使う。

app/assets/stylesheets/modules/_tweets.scss
font-family: 'Anton', sans-serif;

すると　下のstudy-supportにAntonフォントが適用される。

注意

上のサイトgoogle fontsは日本語が対応していないものがほとんどなので日本語は適用されない場合が多い。
私は、日本語だけ適用されないことに気づかず４０分ほど時間を浪費した笑

今回はapplication.scssに読み込ませたが他の導入方法をあります。

参考サイト

Google Web Fontsを使ってみよう

今日のアイディア

投稿機能に動画を埋め込む

投稿機能（アウトプット）を今日勉強したことの自分のアウトプット動画をいれる

経緯

昨今はyoutubeなどの動画をみて学習したり、Twitter等でアウトプットをすることが動画でアウトプットをしているのが少なく見えた。時代の流れから推測するにSNSは、文字による表現➯文字＋写真（インスタグラム）➯動画（youtubeにより個人の発信）となり、時代は動画にあると感じる。今よりももっと個人で発信できることを踏まえ、個人アプリstudy-supportでは、投稿機能に動画によりアウトプットもできるようにしたい。人に何かを伝えることが1番の勉強である。動画という選択肢はアウトプットの幅を広げることだと感じる。