GitHubのデザインについて大切な知識2選。

この記事では、将来プログラミングをできるようになるために、プログラムについて学んだ知識を解説していく記事です。
今日学んだプログラミングの知識。

1. サイトのデザインを改善する方法。

2. CSSを適用させる方法。

サイトのデザインを改善する方法。

HTML で作ったファイルは CSS というものを使うと見た目を整えることができます。
CSS は、 Cascading カスケーディング Style スタイル Sheets シート の略称で、スタイルシートと呼ばれることもあります。
HTML の見栄えを変えることができる言語です。

CSSを適用させる方法。

CSSを適用させるには以下の手順で進めていきます。

1.リポジトリの「Code」タブを開きます。
もし見つからない場合は以下のリンクをコピーし、あなたのユーザ名の部分を自身のユーザ名に置き換えてページを開きます。
例えばユーザ名が tarouであれば
https://github.com/tarou/
tarou.github.io となります。

例…https://github.com/あなたのユーザ名/あなたのユーザ名.github.io

2.Add file から Create new file をクリックしまします。

3.Name your file… の入力欄に style.css と入力します。

4.以下の CSS コードをコピー & ペーストします。

5.ここまでに問題がなければ「Commit changes」ボタンを押します。

6.コミットメッセージを「style.css を作成」と入力します。

7.Commit changes ボタンを押します。

8.html で作成した CSS ファイル (style.css) を読み込みます。
<link href="style.css" rel="stylesheet"> を以下の行に追記します。

9.「Commit changes」ボタンを押しましょう。

10.コミットメッセージを「style.css を追加」と入力します。
Commit changes ボタンを押します。

CSS がサイトに反映されているか見てみましょう。
先ほどのコミットが反映されるのを待つために 1 分程度経ってからブラウザのアドレスバーに https://ユーザ名.github.io と入力してサイトにアクセスしてみます。
上手く表示されていれば完成です。

まとめ

今回はGitHubのページをデザインする方法について解説していきました。
Webデザインの時もページをデザインする時にはCSSを使いましたが、GitHubでもCSSが出てきました。デザインをする上でCSSは特に欠かせないものだと気づいたので、これからもしっかりCSSの学習に取り組んでいきたいです。