Googleフォントの使い方。可変フォントって何?
Summary
TLDRこの動画スクリプトは、Googleフォントの使い方について詳しく説明しています。Googleフォントの検索方法から、どのように使うか、特别是なフォントの利点や使い方の相違点まで解説されています。性的フォントと下辺フォントの違いや、可変フォントの利用方法まで学ぶことができます。また、CSSでのフォントの設定方法や、フォントウェイトや幅の調整方法も紹介されています。
Takeaways
- Googleフォントの使い方について学ぶことができます。
- Googleフォントの画面構成が変わったことに注意しましょう。
- 新しいフォントとして「花片」が利用できるようになりました。
- 下边フォントと性感フォントの使い方が異なります。
- Googleフォントを検索し、使いたいフォントを選ぶことができます。
- ゲットフォント機能を使うと、CSSに直接フォントを適用する方法があります。
- フォントの太さやスタイルを個別に設定することができます。
- 性感フォントでは、フォントウェイトやフォントサイズを100から900までの間で調整できます。
- 可変フォントの利点は、今までできなかったような細かい調整ができることです。
- CSSを使って個別の要素にフォントを適用する方法を学ぶことができます。
- 视频最后に、WEB制作スキルを学ぶための学習サイトが紹介されています。
Q & A
Googleフォントの設定方法を説明してください。
-Googleフォントを設定するには、まずGoogleフォントのウェブサイトにアクセスし、使用したいフォントを選択します。選択したフォントをクリックし、表示されるメニューから「Get font」をクリックして、必要なスタイルをチェックして「Embed」コードをコピーします。そのコードをHTMLの`<head>`セクションに貼り付けることで、Googleフォントが読み込まれます。
Googleフォントの画面構成が変わった理由は何ですか?
-最近のGoogleフォントの画面構成は、より使いやすくするために更新されています。新たに「Variable fonts」という機能が追加され、これまで以上に柔軟なデザインが可能となりました。また、性的なフォントと下辺フォントの違いを理解しやすくするため、使い方の説明が加えられました。
性的なフォントと下辺フォントの違いは何ですか?
-性的なフォントと下辺フォントの違いは、フォントの太さやデザインの柔軟性にあります。性的なフォントは、太さやデザインを細かく調整できる「Variable fonts」を使用しています。一方、下辺フォントは、固定された太さを持つ「Static fonts」です。
Googleフォントの「Get font」ボタンをクリックすると何が表示されますか?
-「Get font」ボタンをクリックすると、選択したフォントのさまざまなスタイルが表示されます。例えば、Light、Regular、Medium、Boldなどの太さや、イタリック体がある場合はイタリック体も表示されます。これらのスタイルをチェックして、必要なスタイルのみを選択することができます。
「Variable fonts」とは何ですか?
-「Variable fonts」とは、あるフォントファミリーの中で、太さやデザインを連続的に変化させることができるフォントのことを指します。これにより、デザイナーは一つのフォントで多数のスタイルを表現することができ、より柔軟なデザインが可能になります。
Googleフォントの「Embed」コードをHTMLにどのように挿入するのか説明してください。
-Googleフォントの「Embed」コードは、HTML文書の`<head>`セクションに挿入します。具体的には、`<link>`タグ内にエンベッドコードを記述し、そのタグを`<head>`セクションの適切な場所に追加します。これにより、ウェブページが読み込まれる際にGoogleフォントが自動的に読み込まれます。
Googleフォントで使える性的なフォントの利点は何ですか?
-性的なフォントを使用することで、デザインの柔軟性が大幅に向上します。たとえば、ウェブページ上でフォントの太さを連続的に変化させたり、特定のデザインスタイルに合わせてフォントの外観を調整したりすることができます。これにより、より洗練されたデザインを実現することが可能になります。
Googleフォントの検索方法について説明してください。
-Googleフォントを検索するには、Googleフォントのウェブサイトにアクセスし、検索バーにフォントの名前やキーワードを入力します。例えば、「Roboto」フォントを検索するには、その名前を検索バーに入力し、検索結果から使用したいフォントを選択します。
Googleフォントの利用において、無料で使えるフォントと有料で使えるフォントはどのように区別されますか?
-Googleフォントのほとんどは無料で利用可能ですが、一部のフォントは商用目的での利用に際して有料ライセンスが必要です。各フォントの詳細ページで、利用可能な範囲やライセンスの種類が明示されています。商用利用を検討する場合は、そのフォントのライセンス条件を確認することが重要です。
GoogleフォントのCSS適用方法について説明してください。
-GoogleフォントのCSS適用は、`<link>`タグを使用してHTMLの`<head>`セクションにフォントを読み込むことが必要です。読み込んだフォントは、CSS内で`font-family`プロパティを使用して適用します。例えば、Robotoフォントを適用する場合は、CSSに`font-family: 'Roboto', sans-serif;`と記述します。
Googleフォントで可変フォントを利用する際の注意点は何ですか?
-可変フォントを利用する際には、ウェブページの読み込み時間やパフォーマンスに影響を与える可能性があることに注意が必要です。また、すべてのブラウザで完全にサポートされているわけではないため、互換性の問題を確認することが重要です。さらに、可変フォントを使用する場合は、適切なフォールバックフォントを設定することが望ましいでしょう。
Outlines
🌟 Googleフォントの設定方法と使い方
この段落では、Googleフォントの設定方法と使い方について解説されています。Googleフォントは、ウェブデザインにおいてよく使用されるフォントサービスで、多数のフォントを無料で利用できます。動画では、Googleフォントの検索方法や、どのようにして特定のフォントをウェブページに適用するかについて詳しく説明されています。また、Googleフォントの画面構成が変わった点や、新しいフォント「花片」の利用方法にも触れられています。
🎨 フォントのカスタマイズと実践例
この段落では、Googleフォントのカスタマイズ方法と実際の応用例が紹介されています。特に、フォントの太さやスタイルを個別に指定する方法が詳細に説明されています。また、CSSを使用して、ウェブページに適用するフォントを調整する方法についても学ぶことができます。動画では、具体的な例を通じて、どのようにしてフォントを効果的に使用し、ウェブページの見た目を改善するかが示されています。
🔧 可変フォントの活用法と性的なフォントの使い方
この段落では、可変フォントの活用方法と性的なフォントの使い方について解説されています。可変フォントは、太さやスタイルを自由に調整できるフォントで、デザインの柔軟性が高まります。性的なフォントは、静かなものと対比し、よりアクティブな印象を与えるフォントです。動画では、これらのフォントの特徴や使い方について、具体的な例を挙げて説明されています。また、CSSでの指定方法や、どのようにしてデザインに合わせてフォントを調整するかも学ぶことができます。
📚 より深い理解を目指す―性的なフォントと下辺フォントの違い
最後の段落では、性的なフォントと下辺フォントの違いについて深く掘り下げています。性的なフォントは、一般的でなく、独自の個性を持つフォントで、デザインに独特の魅力を与えることができます。下辺フォントは、基本的なフォントで、様々な場面で使える標準的なフォントです。動画では、これらのフォントの特徴や使い方について、具体的な例を挙げて説明されています。また、どのようにしてこれらのフォントを組み合わせて、より魅力的なデザインを作り出すかについても学ぶことができます。
Mindmap
Keywords
💡Googleフォント
💡フォント
💡性的なフォント
💡下辺フォント
💡フォントの太さ
💡CSS
💡ウェブ制作
💡Googleフォントの設定方法
💡可変フォント
💡フォントの選び方
💡デザインのバランス
Highlights
Googleフォントの設定方法の紹介
Googleフォントの画面構成が変更
花片フォントと性的フォントの追加
Googleフォントの検索方法
人気のフォント「Roboto」の使用例
フォントの太さやイタリックの選択
ゲットフォントとエンベッドコードの説明
HTMLとCSSでのフォントの適用方法
下辺フォントと性的フォントの違い
性的フォントの具体的な使用方法
カフェフォントとその使用例
可変フォントの説明と利点
ウェイトとウィズの自由な調整可能性
実践的なフォント適用のデモンストレーション
WEB制作スキル向上のためのリソース紹介
Transcripts
どうもこんにちはあゆですえ今日はですね
Googleフォントの設定方法について
ですねやっていきたいと思いますで
Googleフォントの使い方に関しては
以前解説動画をあげているんですけれども
Googleフントのえ画面の構成変わり
ましてですねまここ1ヶ月ちょっとぐらい
の話だと思うんですけれども画面の使い方
が少し変わりましたでそれに加えて花片
フォントっていうのが使えるようになり
ましたで下辺フォントとあとはその性的な
フォントまこれが今までのフォントだった
んですけども今その2つ種類がありまして
まそれぞれですねま若干使い方がえ異なっ
てきますのでまそれらについてですねま
カフェフトは何かっていうところも含めて
え見ていきたいなという風にえ思いますえ
ということですねえやっていきたいと思い
ますえではですねまずGoogle
フォントとですねま検索をえしていき
ましょうそうするとGoogleフォン
ツってのが出てきますのでまこれを
クリックしてですねGoogleフツの
サイトに行きますでそうするとここで
サーチフォンツってことですねえフォント
を検索することができますのででまWEB
フォントえ初めて使う方はですねいろんな
ウェブフォントがありますのでまここで
言うとま169とかって書いてますけどね
まかなり数がありますのでえなのでまお
すすめのGoogleフォントみたいな
感じで検索をしてですねどんな
Googleフォントえ皆さんがお勧めし
てるのかっていうのをですねえま探してえ
まそれでですねこっからですねえ使いたい
ものを使っていくっていうのがいいかなと
思いますえということでですねサーチ
フォントでえGoogleフォントを検索
していきましょうま例えば有名なやつに
ロボットってのがありますでロボットって
やるとまここにロボットがが出てくるん
ですけどもじゃあこれをクリックしていき
ましょうでこのロボットがですねまこう
やってスクロールしていくとまここに
1100とかライト300とかですね
レギュラー400とかまいろんな太さが
ありますよあとはイタリックもありますよ
ということでえまイタリックがある場合は
イタリックも表示されますしま角太さが
あればその各種太さのですねフォントは
こんな感じですっていうプレビューがです
ねここで見ることができますでゲット
フォントですねこのゲットフォントを
クリックしてまそうするとこのバックの
アイコンにですねええGoogle
フォントえロボットがですね入りますので
ま今何種類のフォントを使おうとしてるの
かってのがここから分かりますそれでです
ねまGエンベットコードドってのがあり
ますでこのゲットエンベッドコードって
いうのとあとダウンロードして使う方法も
あるんですけどもまこのゲットエンベッド
コードでえ使うとですねasmlとCSS
にですねまペタペタと貼って使いますので
まこっちの簡単な方でですねやっていき
たいと思いますでゲットベッコードまこれ
をクリックしてですねそうするとこの右側
の方にですねまコードが出てくるのでこれ
をコピーしてですねacmlに貼り付け
たりえCSSに貼り付けてえ使っていくと
いう形にえなっていきますでですねえこの
先ちょっと進める前にえまずちょっとです
ねこのロボトっていうところのここを見て
いただきたいんですがここスタティックえ
ここですねここスタティックになってい
ますでこれはえ下辺フォントではなくてえ
性的フォントえというものになりますで
下辺フォントと性的フォントの違いなま
性的の性的ってのは静かなえ的って書いて
性的ですねでこの下辺フントとえ性的
フォントえの違いってのが何かっていうの
はえ後ほどえ別のフォントを見ていき
ながらですねま確認をしたいと思います
まずはこの性的フォントですねえどのよう
に使っていくのかっていうのをえ見ていき
ましょうで性的フントのことがもう分かっ
てるよって方はですねえちょっと飛ばして
次の下辺ホトの方をですねえ見てください
でまずはこのロボットから説明をしていく
んですがえまずですねここにチェンジ
スタイルズってのがあるのでちょっとこれ
をクリックしてみましょうでそうすると
まあここにですねまチェックマークえあり
ますけれどもえま先ほど見たようにですね
スイン100とかライト300とか
レギュラーとかですねまいろんな太さの
フォントがありますよっていうのがここに
出ていますで今これ全部チェック入ってる
んですけども例えばですねこれチェック
外してまレギュラー400とボールド
700とまブラック900だけを使いたい
ですよとえいうことであればですねえま
使いたいフォントだけにえチェックを入れ
てまそれ
でこの右側ですねこのエコーInThe
ヘッOfHMLっていうのがありますけど
もまここのコードをコピーしていきますで
ちょっとここをですね見るとここにロボッ
トって書いてあってまウェイトがえ
4700900ってのがここに書いてあり
ますでこのコードをコピーしてきます
ねでえこのですねHTMLのヘッドの中に
貼り付けますよとえ言われていたので
ヘッドの中に貼り付けますでヘッドに
貼り付けたらえこれでGoogleフント
を読み込む準備がえ完了しますましたで
あとはですねこの下の方にえロボット
CSSってのがありますのでこれをですね
コピーしていき
ましょうでえCSSの方にですね貼り付け
ますで例えばまボディの方にですねえ
なんか文言を書いていきましょうえそう
ですねじゃ例えばあのメッセージっていう
クラスがついたデブに対してですねえ
ハローえ
ワールドという風にえしてみましょうで
ちょっとブラウザーを立ち上げますねこれ
が今ハローワールドですね今書いたものが
えこのブラウザの方にえ表示されています
でちょっとえもう少し目やすくしたいの
でそうですねちょっとメッセージの
フォントサイズをま30ピクセルとかして
おきましょう4050ピクセルぐらいでい
ですねで先ほど貼り付けたコードここです
ねでロボットレギュラーとえロボット
ボールドとえロボットブラックってのが
あるのでま例えばロボットボールドまこれ
をですねコピーしてここに貼り付け
ますでそうするとですねまこれがえ
ロボットの表示になりますちょっと違いが
もう少し分かりやすいようにちょっと
ボディにマージンつけておきますでこんな
感じでちょっとやっていきますねでえっと
ちょっともう1回やってみますこの
ロボットボールドをえ消した状態だと
こんな感じですねでロボットボールドの
クラスをつつけるとウブフォントが適用さ
れますという感じですねま簡単にこれだけ
でですねええウブフォントを適用すること
ができますただですねま今CSSがあるボ
とえレギュラーボールドえブラック
それぞれですねえ書き出されているんです
けどもえまこれはCSSの設計次第なので
えま人それぞれていうところもあるかも
しれませんがえここはですねま僕だったら
ロボトっていう形にしてこのロボットには
えま
例えばフォントウートは抜いちゃってです
ねまフォントファミリーえとですねま
フォントスタイルぐらいをですねませま
ノーマルなんでまこれあのなくても除地な
んでいいと思いますけどもえロボットの
フォントファミリーをですねまこのロボッ
トっていうクラスにえけるようにしておい
てであとですねまこの3つはもう消して
しまってでたらフォントウトで400とえ
400と700と900は使えますのでま
例えばもうメッセージこのメッセージの方
ですねフォントウェイトえ700えとかに
してですねまそれであとこのメッセージの
とこの
クラスをですねえメッセージとロボットっ
ていうのをつけるという形の方がですねえ
管理はしやすいんじゃないかなという風に
え思いますままこれ今何をやってたかって
言とまロボットっていうクラスはその
ロボットっていうフォントファミリーを
設定するっていう役割をえを持っている
ものだという風にしてあとその太さとか
ですねえその他の細かいところの設定
みたいなところはですねま各要素ごとに
ですねま色々変わっていく可能性があり
ますのでそれは各要素ごとのスタイリング
に任せるえという方ががいいんじゃないか
なと思いますのでまなんかこのロボットっ
ていうのはですねま共通スタイルとしてま
最初の方にえまこうまとめて書いておいて
ですねでこのメッセージというクラスに
対してま個別のま太さとかそういったもの
をですねま設定していくという方がですね
まいいんじゃないかなと思いますまちなみ
にフォントウェートボールド700って
やってますけどこれボールドと同じですね
ボールドってのはフォントウート700で
えフォントウェートえノーマルはですねえ
フォントウートの400と同じですでです
ねフォントウート900もですね使える
ようにしたので900にするとえフォント
ウートも900えになりますでこれがです
ね性的フォントAの使い方になりますで
今度カフェフォントの方はですねやって
いきましょうえカフェフォントですね
例えばどういうものがあるかと言いますと
えトップの方に戻りましてえレイルウェイ
というものがありますでレールウェイを
ですねまクリックしていきましょうでそう
するとですねまレールウェもま先ほどと
同じようにまとかですねえエクストラ
ライトとかですねえライトま色々太さが
ありますしまイタリックもありますでえま
例によってですねゲットフントでこの
バックの中に入れていきましょうでこう
やって見るとレールウェイの方は
バリアブルバリケード
でもう1回えっとですね見ていきましょう
でゲットエンベッドコードすると今バック
にに2種類ですねえレールウェとえ
ロボットが入ってますのでえ最初にレール
ウェがあってその下にですねえロボットが
ありますでロボットとレールウどちらも
使いたい場合はですねこのバックに2つ
入ってる状態にしておいた上でえここの
コードをコピーしてくださいえそうすると
ですねま今まこのリンクコピーした時に
ですね今この2つバックに入ってるんで
このレールウェイとえこのロボットていう
のが今ここにレールウェとここにロボット
がありますよねまこれを貼り付けるとです
ねまレルへとロボット使えますよってこと
なのでえ2つ使う場合はですねこのバック
に2つえ入ってる状態でえこのエンベッド
コードをですねえコピーしていきましょう
でえさっきとですねこのレールへとま
ロボットでこの下辺ホトと性的ホトでえ
違うところはですねまこういう風にですね
まフルアクシスとまワンバリューっていう
のが選べるようになってますでえま基本的
に可変ホトを使うのであればまフル
アクシスにするという風にえ考えておいて
いただいて問題ないかなと思いますでフル
アクシスにした場合何ができるかっていう
とまウェイトが100から900までえ
可変で使うことができますで基本的に今ま
でっていうのはこの性的フォントっていう
のはまウェイト自体はですねま100単位
で使えたんですよねま100とか200と
か300とかあのま200さっまさっきの
ロボットみたいにですねま200がなくて
100300みたいなえものとかもあった
んですけどもまこういういずれにしよ
100単位で使えるっていう風になってた
んですけどこの下辺ホントってのはもう
ここの100から900までの間まこの
範囲は本当によって異なる可能性はあるか
もしれませんがこの100から900の
までの間自由に設定できますよというのが
下辺フォントになりますでさらにその自由
に設定できるっていうのがま1つの
フォントをダウンロードするえだけでです
ねえ自由に設定することができるように
なっていますちょっとこれよくわかんない
かもしれないんですけども例えばま
イメージとしてはですねまロボットで
先ほどえま400と700とま900って
のをまダウンロードしてきたえと思うん
ですけどもこれはそれぞれの太さの
フォントをですねま読み込んでいるという
風にえイメージして
くださいでただあの下辺フォントの方に
なってきますとま1つのフォントからあと
はもうその使う人開発者の人がま自由に
フォントウートをCSSで指定することに
よってえもう自由に100から900の間
で使うことができるという形になりますな
のでなので1つのフォントファイルでま
自由に設定ができるよというような
イメージだと思ってくださいで何が可変な
のかっていうところで言うとまこのレール
ウェイに関してはまウェイトとイタリッ
クってなってますけどものホトだとウを
変えることもできますまそれについても
ですねちょっと後ほど見ていきましょう
まずはこのレールウェイですねえ使って
いきたいと思いますえフルアクシスにした
状態でですねこのエンベットコードを
コピーしていくんですがちょっとワン
バリューの方もですね一応見ておき
ましょうワンバリュにすると何ができる
かって言とまこのスライダーで値をですね
ま決めてえまその太さをですねま使うえ
前提でですねえウブフントを設定しますと
いうことになりますでま下にあるこの
ボタンはですねま切りのいい値をですねま
このスライダの値が変わるだけですですね
ま800に下げれば800700に下げれ
ば700とま指定したえ値をここで選べる
よっていうだけですねまこっちの
スライダーで選んだのと同じですえという
ことでま可変フントなのでまこれフル
アクシスの方使っていきましょうでこの
エベコードですねまたコピーしていき
ましょうでさっきのこの産業ですねま
差し替えます
ねで今度はえレールウのシ設今この2つ
フォントえ取ってきてるのでこのレールと
ロボットはどっちも出てますけどもえ
レールをま今回は使うのでレールウェの方
をコピーしていきますまロボットの方は
先ほどえ取ってきてるのでまこれは大丈夫
ですねで今回ですねあのバックに2つ
フントが入ってるのでレールウェと
ロボットありますけどもえレールウェの方
ですねえ今回えコピーしていきます
ねでレールウェの方ですねまこの辺に
貼り付けましょうかで貼り付けるとえま
こんな感じでエラーができるんですがま
ちょっと上はコメントなのでこれ消してき
ますねえこんな感じですねま適切な
csssじゃありませんよという風になっ
てるんですがまこの角かこが書いてる部分
まこれはユーザーがえま開発者の人がです
ねま2位で設定できる値になってますで
先ほどえまフントウェイとこのえレール
ウェーってのは100から900までの間
で選べますよとまそれが花片フントですよ
という風に話をしましたえなのでまここで
ですね適当にま適当にというかえデザイン
に応じてえじゃあ自分がええ500に
しようかなとか400にしようかなって
いうのを決めることができますま400だ
とええフトウとノーマルと同じですねま
500だと少し太いって感じですねま
500にしておきましょうでこの上のです
ねこの部分クラス名の部分ですねでま
クラス名はですねま自分で決めれば何でも
いいのでえま問題ないんですけどもま
ちょっと見てみるとまレールウェハイフの
角かこの間にまユニークアイファアって
ありますけど多分これユニーク
アイデンティファイアーの略かなと思い
ますですからま個別のアイデンティファイ
え個別の識別値っていうような形の意味か
と思いますえですのでまレールウェの配分
のえ例えば今回フォントウト500で使い
たいならレールウェのま500というよう
な例えばクラスにして使いましょうって
いうだけの話ですねただですねまさっきの
話でまえここはレーウにしておいてこの
レールウェっていうクラスはですねま
フォントファミリーを決めるためのクラス
という風にえしておいてま太さとかですね
まそういった細かいところ変更する可能性
があるところに関してはま個別のですねま
クラスの方にえ割り当てた方がいいんじゃ
ないかなと思い
ますなのでまこんな感じしてあとはこの
レールっていうのをですねえこの
メッセージクラスのところにまつけ
ましょうという感じでまこうやって見ると
実際どうなってるかですがハローワールド
がレールウで表示されましたちょっと変化
を見たかったのでもう一度やってみ
ましょうレールウ外すとこんな感じですね
でレールウをけるとこんな感じですねでえ
可変フォントえなのでまフォントサイズは
ですねま100から900までの間で使え
ますよてことでこれ900にするとこんな
感じでえかなり太くなりますし100だと
まかなり薄くなりますねまこんな感じで
下辺フォント使いますよということになり
ますまこれが下辺フォントですで今で今
ですねフォントウートの部分だけ可変のえ
形でやったんですがえもう少しちょっと
面白いものを見たいなということでえもう
一度ですねトップのページ戻りましてえ
今度はアーカイボっていうですねえ
フォントを見ていきたいと思います
アーカイブですねでこれをクリックします
ねでまた同様にゲットフォントでバックの
中にアーカイバを入れますでこうやって
見るとアーカイブもえ
バリアブルソード
コードをクリックしていきましょうでえ
アーカイバの方ですねえこのチェンジ
スタイルちょっと見ていくとWとえ
withっていうのが出てきてますねこの
ウってのは何かって言うとえーまここの
ちょっとスライダー変えるとですねまここ
今ワンバリューになってますけどこの
スライダーの値変えるとこのプレビュー
変わっていくのでちょっと見ておいて
くださいねこんな感じですねフォントの
フォントのwith幅をですねまこういう
風に変えることができますよということで
まこれもフルアクセスにしておきましょう
でこれでですねこのエンベッドコードを
ですねえコピーしてえもう一度ですねえ
ヘッドの方ですねヘッドの方に貼り付け
ますでアーカイブのACCSSこれも
コピーしていき
ましょうでですねまさっきの話とま同じな
んですがえじゃこのレールウェの下にです
ね先ほどのコード貼り付けましょうまこの
上3つはコメントなので消しておきますで
ここもえアーカイボっていうクラスにして
おきましょうで今度はこのフォントウイと
フォントえバリデーションセッティングで
withっていうのを決めることができ
ますえですのでこのウェイトがウェイトが
100から900の間でwithが62
から125の間で変えることができますよ
ということですねということなんですがえ
このウイとですねえwithの部分これ
コピーしてきてこちらの方はメッセージ
クラスの方で管理をしましょうということ
ですねアーカイブクラスの方はフォント
ファミリーを管理してでメッセージの方で
え細かいところをですねえ調整していき
たいと思いますま例えば500とかまウを
ですねま100とかにしておきますでこれ
で保存をし
てクラスの方ですねHMLの方ですねこの
レルの方をアーカイブに書き換えますで
これで保存をして先ほどのハローワールド
見ていきましょうこれでアーカイブになっ
ていますえアーカイブ外すとですねま
こんな感じですがアーカイブをつつけると
こんな感じでアーカイブが適用されますで
ウズが改変ですよということなのでじゃあ
ここ65から変だえ62からでしたっけえ
602からえなのででウズが62からえ
可変できますのでじゃあ62にしましょう
ということでまかなりえなろうな感じ文字
の幅がですね狭い感じのデザインになり
ますま90とかにするとまなんか普通な
感じですねまこんな感じでま下辺フォン
トっていうのはちょっとフォントベト2つ
あるのおかしいですねまこんな感じでカフ
フォントっていうのはですねえまフォント
のウェイトとかウズとかまそういったもの
をですね下辺で変えていくことができます
よということでま非常にですねま今まで
できなかったような細かいえ調整ができる
ようになるんじゃないかなというところで
えま非常に面白いんじゃないかなという風
に思いますえま性的フォントだったんです
けどもまそっから可変フォントってのがま
使えるようになりましたよということでま
その下辺フォントとま性的本とまこの辺の
違いについてですねえま使い方えとかあと
はその仕様のま特徴的なところていのを
ですねま含めてえ理解をしていただけると
いいんじゃないかなという風にえ思います
のでえ是非参考にしてみてくださいはいと
いうことでですねえ今日の講座を終わりに
したいと思いますどうもありがとうござい
ました実務で使えるWEB制作スキルを身
につつけるための動画学習サイトウ好きと
いうものをご準備しています
WordPressHTMLCSS
JavaScriptを学びたい方向けの
コースをご用意していますので概要欄から
ですね是非チェックしてみて
ください
ne
5.0 / 5 (0 votes)