0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Last updated at Posted at 2020-05-20

今日の実装

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

webフォントの導入 Google Web Fonts

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

###導入方法
今回はscssで導入方法を記述する。
####1 使いたいフォントを探す
google fonts から使いたいフォントを探す。
Google Web Fonts
google-fonts.png
右上にタブの

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

####2 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フォントが適用される。
study-support.png

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

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

####参考サイト
Google Web Fontsを使ってみよう

今日のアイディア

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

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

経緯

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

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?