戻る

Rails5.0


動画学習サイトの構築 Rails5.0

  (0)
1,000円

タスク2-8   Googleフォント

このタスクについて


タスクの内容を一部抜粋します。
プロジェクトを購入していただくとこのタスクの内容の全てを読みやすい表示で見ることができます。
プログラムコードが色分けされて見やすくなります。
プログラムコードに行番号が付きます。
本文が色分けされて見やすくなります。
そしてこのアプリケーションのフルコードをダウンロードすることが可能になります。




サイト

fonts.google.com


上記のサイトで選んだフォントをサイトに適用することができます。


今回は「Kosugi Maru」というフォントを適用してみます。
https://fonts.google.com/specimen/Kosugi+Maru?subset=japanese


「select this style」をクリックします。


select this style



「Embed」をクリックし、表示されたリンクをコピーします。


リンクをコピー



コピーしたリンクを以下のファイルに貼り付けます。


記述追加 app\views\layouts\application.html.erb(10行目)
<link href="https://fonts.googleapis.com/css2?family=Kosugi+Maru&display=swap" rel="stylesheet">



app\views\layouts\application.html.erb
 
<!DOCTYPE html> 
<html> 
  <head> 
    <title>Gakushuu</title> 
    <%= csrf_meta_tags %> 
    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %> 
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %> 
    <!-- Googleフォント --> 
    <link href="https://fonts.googleapis.com/css2?family=Kosugi+Maru&display=swap" rel="stylesheet"> 
  </head> 
  <body> 
  
    <%= render  "shared/navbar" %> 
    <%= render 'shared/message' %> 
    <%= yield %> 
  </body> 
</html> 



スタイルシートの記述追加はすでに行なっていますが載せておきます。
70行目からがGoogleフォントの記述です。


app\assets\stylesheets\application.scss
 
/* 
 * This is a manifest file that'll be compiled into application.css, which will include all the files 
 * listed below. 
 * 
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets, 
 * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path. 
 * 
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the 
 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS 
 * files in this directory. Styles in this file should be added after the last require_* statement. 
 * It is generally better to create a new file per style scope. 
 * 
 *= require_tree . 
 *= require_self 
 */ 
 
 @import 'bulma'; 
 @import 'bulma-extensions'; 
 
 @import "toastr"; 
 $spaceamounts: (0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 60, 70, 80, 90, 100); 
 $sides: (top, bottom, left, right); 
 @each $space in $spaceamounts { 
   @each $side in $sides { 
     .m-#{str-slice($side, 0, 1)}-#{$space} { 
       margin-#{$side}: #{$space}px !important; 
     } 
     .p-#{str-slice($side, 0, 1)}-#{$space} { 
       padding-#{$side}: #{$space}px !important; 
     } 
   } 
   .m-#{$space} { 
     margin: #{$space}px !important; 
   } 
   .p-#{$space} { 
     padding: #{$space}px !important; 
   } 
   .h-#{$space} { 
     margin-top: #{$space}px !important; 
     margin-bottom: #{$space}px !important; 
   } 
   .f-#{$space} { 
     font-size: #{$space}px !important; 
   } 
 } 
 .is-horizontal-center { 
   justify-content: center; 
 } 
 .small-title { 
   font-size: 10px; 
 } 
 //ホームページ用 
 .has-bg-img { 
   background: url('/assets/home/background01.jpg') center center; 
   background-size: cover; 
 } 
 //ナビバーのアバター画像位置 
 .image { 
   //margin-top: 0.6rem; 
   display: flex; /* flexに */ 
   align-items: center; 
 } 
 
 // googlフォント用 
 .title { 
   font-family: 'Kosugi Maru', "Helvetica Neue", "Helvetica", "Arial", sans-serif; 
 } 
 .button { 
   font-family: 'Kosugi Maru', "Helvetica Neue", "Helvetica", "Arial", sans-serif; 
 } 
 .field { 
   font-family: 'Kosugi Maru', "Helvetica Neue", "Helvetica", "Arial", sans-serif; 
 } 
 .all { 
   font-family: 'Kosugi Maru', "Helvetica Neue", "Helvetica", "Arial", sans-serif; 
 } 
 .navbar-item { 
   font-family: 'Kosugi Maru', "Helvetica Neue", "Helvetica", "Arial", sans-serif; 
 } 
 .input { 
   font-family: 'Kosugi Maru', "Helvetica Neue", "Helvetica", "Arial", sans-serif; 
 } 
 .card-content { 
   font-family: 'Kosugi Maru', "Helvetica Neue", "Helvetica", "Arial", sans-serif; 
 } 
 .section { 
   font-family: 'Kosugi Maru', "Helvetica Neue", "Helvetica", "Arial", sans-serif; 
 } 
 .card-header-title is-centered { 
   font-family: 'Kosugi Maru', "Helvetica Neue", "Helvetica", "Arial", sans-serif; 
 } 
 .modal-card-title { 
   font-family: 'Kosugi Maru', "Helvetica Neue", "Helvetica", "Arial", sans-serif; 
 } 
 



ブラウザ確認
http://localhost:3000/




この続きはプロジェクトを購入していただくことで見ることができます。
プロジェクトを購入していただくとこのタスクの内容の全てを読みやすい表示で見ることができます。
プログラムコードが色分けされて見やすくなります。
プログラムコードに行番号が付きます。
本文が色分けされて見やすくなります。
そしてプロジェクトを購入するとこのアプリケーションのフルコードをダウンロードすることができます。

まだレビューはありません。

動画学習サイトの構築 Rails5.0

1,000円

動画で学べるサイトを構築するプロジェクトです。プロジェクトを登録し、そのプロジェクトに動画を登録できます。プロジェクトはクレジットカードで購入でき、購入後すぐに動画を見ることができます。写真のアップロード、レビュー機能の実装、Google認証、アマゾンS3の利用方法も解説。ActiveAdminの実装、Gメールの設定、 HEROKUへのデプロイ方法を解説。 フルコードのダウンロード可能。

タスク数: 100