Github PagesでWebサイトを公開する方法

こんにちは！

今回はGithub PagesでWebサイトを公開する方法についてまとめます。

目次

Github Pagesとは

• Githubのリポジトリ内のhtml, cssをWebサイトとして公開できる仕組み
• サーバーを借りることなく、自分のWebサイトを公開できる

Github PagesでWebサイトを公開するには

前提

• Githubのアカウントを持っていること
  • 無料アカウントでOK
• gitを使用してアップロードする場合は、gitの基礎知識

手順

1. リポジトリの作成
2. ファイルのアップロード
   1. 直接アップロードする方法
   2. git pushする方法
3. ページの公開
   • ページの公開停止

1. リポジトリの作成

• Githubページの上部から、+アイコンをクリック

• New repositoryを選択

• Repositoryを作成
  1. Repository nameの入力
  2. Publicを選択
  3. Create repositoryをクリック

※publicにしないとWebサイトを公開できないが、publicはリポジトリ内のファイルは全世界に公開されるため注意

2. ファイルのアップロード

a. 直接アップロードする方法

• uploading an existing fileをクリック

• アップロードしたいファイルをD&D

• ファイルの説明を入力し、Commit Changesをクリック

• リポジトリ内にindex.htmlが追加されていれば成功

b. git pushする方法

• フォルダをgit管理し、ファイルの登録とコミットをする
  • 公開したいファイルがあるフォルダでgit init
  • git add .
  • git commit -m "first commit"
• リモートリポジトリとローカルリポジトリを紐づける
  • HTTPS認証の場合
    • git remote add origin https://github.com/ユーザー名/リポジトリ名.git
  • SSH認証の場合
    • git remote add origin git@github.com:ユーザー名/リポジトリ名.git
• リモートリポジトリにmainブランチをプッシュする
  • git push -u origin main

3. ページの公開

• リポジトリのsettingsをクリック

• サイドバーのPagesをクリック

• Deploy from a branchになっていることを確認し、Noneをクリックし、mainを選択

• mainが選択された状態で、Saveをクリック

• 上部にGitHub Pages source saved.と表示されれば成功

• ページを再読み込みすると、公開中のページ情報が表示されるため、Visit Siteを押す

※ページを再読み込みしても表示されない場合は、数分待ってみる

※URLは青枠内に表示

• index.htmlの内容が表示されれば公開成功

ページの公開停止

• 公開中のページ情報の「…」をクリック

• Unpublish siteをクリック

• ページ情報が表示されなくなれば公開停止成功

おわりに

今回はGithub PagesでWebサイトを公開する方法についてまとめました。 サーバーを借りなくても手軽にWebサイトを公開できるので便利ですね。ソフトウェアの説明など、ちょっとしたドキュメントの公開に使っていきたいと思います。

97/100

最近覚えたEmmetまとめ

こんにちは！

今回は最近覚えたEmmetについてまとめます。

HTML

タグ名.class名

• クラス名を自動で付ける

タグ名.class名|c

• 閉じタグの後に、<!-- /.クラス名 -->というコメントを付ける

CSS

m20

• margin: 20px

emmet	CSS
m	margin: ;
mt	margin-top: ;
mr	margin-right: ;
mb	margin-bottom: ;
ml	margin-left: ;
p	padding: ;
pt	padding-top: ;
pr	padding-right: ;
pb	padding-bottom: ;
pl	padding-left: ;

m20-10

• margin: 20px 10px

位置調整関係

emmet	CSS
df	display: flex;
aic	align-items: center;
jcc	justify-content: center;
psa	position: absolute;
psr	position: relative;

おわりに

今回は最近覚えたEmmetについてまとめました。以前から活用していますが、数値を伴う場合も同時に指定できるのは知りませんでした。Emmetは使いこなせば使いこなすだけ開発効率が上がっていくと思うので、また少しずつ覚えたいと思います。

96/100

PRECSSの書き方を簡単にまとめてみた

こんにちは！

今回はPRECSSの書き方を簡単にまとめてみました。

PRECSSとは

• PRESCSS（プレックス）とは、prefixed CSS（接頭辞付きのCSS）の略
• CSS設計完全ガイドの著者が開発
• CSSを次の6グループに分ける
  1. ベース
  2. レイアウト
  3. モジュール
     1. ブロックモジュール
     2. エレメントモジュール
  4. ヘルパー
  5. ユニーク
  6. プログラム

命名規則

• 2文字の接頭辞 + アンダースコア + クラス名
• クラス名はローワーキャメルケース（例：halfMedia）
• 各モジュールの子要素は、基本的に親の名前のみを継承
  • 子要素の中に子要素がネストしても、親の名前のみ継承
  • ただし、次の場合は子要素の名前を継承しても良い
    • 親子関係を明確に定義したい場合
    • 子要素の名前の重複を避けたい場合

ベースグループ

• a要素や、 img要素に対する標準スタイルを指定

レイアウトグループ

• 接頭辞: ly_を付ける（layout）
• レイアウトを形成する要素に使用する
  • レイアウトとは全体の色分けが出来るレベル

モジュールグループ

• 再利用性の高いコードをモジュールと呼ぶ

ブロックモジュール

• 接頭辞: bl_を付ける（block）
• 複数の子要素を持ち、様々なページで利用できるひとつの塊
  • カード、メディアなどを指す
• ブロックモジュールではレイアウトに関わるスタイリングは行わない
  • 例外的に上下間の余白についてはモジュールに記載することも許容する

エレメントモジュール

• 接頭辞: el_を付ける（element）
• ボタン、ラベル、見出しなどの最小単位のモジュール
• どこにでも埋め込めるため、汎用的な名前にする
• 色の変更などは、別のクラスとしてモディファイアを作成して同時に指定する
  • モディファイアの命名規則
    • モジュール名+アンダースコア2つ+モディファイア名
  • モディファイア例： el_labelとel_label__red
    • el_label.el_label__red { color: red; }
  • モディファイアにはサイズ指定をしてもよい
    • ただし、数値ではなくsなどの汎用的なキーワードを使用する

ヘルパーグループ

• 接頭辞: hp_を付ける（helper）
• 特定の場所に一つのスタイルを適用したい場合に使用する
• !importantを付けることを推奨

ユニークグループ

• 接頭辞: un_を付ける（unique）
• ある1ページでしか使用されていないことを明示する
• 影響範囲を気にせずに改修してよいことを表す
• 命名に悩んだらひとまずユニークグループを使うとよい

プログラムグループ

• 接頭辞: js_を付ける（JavaScriptの場合）
• 接頭辞: is_を付ける（英語のbe動詞）
• JavaScriptなどで要素を扱う場合や、状態を管理するために使用する

オリジナルグループ

• その他、自由に接頭辞を追加してよい
• 例: gridの.gr_4, .gr_6やレスポンシブの.lg, .md, .sm_など

おわりに

今回はPRECSSの書き方を簡単にまとめてみました。CSS設計完全ガイドの内容を元にしています。複雑なページを作成すると、CSSが膨大な量になり整理できていないことがあるので、こういったCSS設計技法を覚えていきたいと思います。PRECSSはCSS設計技法のなかでも、比較的扱いやすいように思ったので、使ってみたいと思います。

95/100

参考書籍

CSS設計完全ガイド　～詳細解説＋実践的モジュール集

CSSの疑似要素でリストのマークを作る方法

こんにちは！

今回はCSSの疑似要素でリストのマークを作る方法についてまとめます。

今回作るリスト

サンプルコード

<ul>
  <li>list1</li>
  <li>list2</li>
  <li>list3</li>
</ul>

CSSの疑似要素で実装

ul li {
  position: relative
}

ul li::before {
  content: "";
  width: 10px;
  height: 10px;
  border-top: 3px solid #555;
  border-right: 3px solid #555;
  rotate: 45deg;
  position: absolute;
  top: 50%;
  left: -30px;
  transform: translateY(-50%);
}

ポイント

• li要素にposition: relativeとし、位置指定の基準にする
  • ここの基準をulにしてしまうと、それぞれのli要素にマークがつかずに、一か所に重なってしまう
• 疑似要素で図形を作る時はcontent: ""を指定
• width: 10px, heigth: 10pxで四角の箱を用意
• border-top, border-rightで上辺と右辺に線を引く
• rotate: 45degで右に45度回転し矢印に見えるように
• top: 50%とtransform: translateY(-50%)の組み合わせで上下中央揃え

おわりに

今回はCSSの疑似要素でリストのマークを作る方法についてまとめました。疑似要素の::beforeなどを見ると苦手意識がありましたが、少しずつ慣れてきたように思います。

94/100

CSSのdisplay: inline-flexについて

こんにちは！

今回はCSSのdisplay: inline-flexについてまとめます。

display: inline-flexとは？

• flexコンテナを定義するが、コンテナ自体はinline要素のように横に要素を並べられる
• 見出しなどで便利

やりたいこと

• タイトルの前に正方形、中央揃えで数字を入れたい

コード例

    <h1 class="title"><span class="title_number">1</span>Lorem ipsum</h1>

.title {
  font-size: 30px;
}
.title_number {
  background-color: antiquewhite;
  width: 50px;
  height: 50px;
}

display: inline-blockの場合

.title_number {
  background-color: antiquewhite;
  width: 50px;
  height: 50px;
  display: inline-block;
  text-align: center;
  line-height: 50px;
}

• 横と縦の指定が出来るように、display: inline-blockを指定
• text_alignとline-heightで上下中央揃え

難点

• heightが変更になった際に、上下中央揃えにするためにはline-heightも変更が必要

display: inline-flexの場合

.title_number {
  background-color: antiquewhite;
  width: 50px;
  height: 50px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

• display: inline-blockでflexコンテナ化しつつ、右側にタイトルが並ぶように
• 上下中央揃えはalign-itemsで行っているので、heightが変更になっても調整不要

display: flexの場合

.title_number {
  background-color: antiquewhite;
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}

• display: flexの場合は、flexコンテナ化できるが、自身がブロック要素になるのでタイトルが右に並ばない
• 数字とタイトルを並べるためには、数字とタイトルを囲むdivを作成し、さらにflexコンテナで囲まないといけない

おわりに

今回はCSSのdisplay: inline-flexについてまとめました。実はまだ使ったことがないプロパティですが、変更に強く、div要素を減らせそうなのでこれから使っていきたいと思います。

93/100

position: absolute時に中央揃えをする方法

こんにちは！

今回はposition: absolute時に中央揃えをする方法についてまとめます。

やりたいこと

• position: absoluteで親要素に対して中央揃えをしたい

コード例

<div class="parent">
  <div class="child">Lorem</div>
</div>

.parent {
  background-color: khaki;
  height: 300px;
  width: 500px;
  position: relative;
}

.child {
  background-color: burlywood;
  height: 50px;
  width: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
}

位置の指定方法を試す

何も指定しない場合

top: 100%を指定した場合

left: 100%を指定した場合

top: 50%を指定した場合

left: 50%を指定した場合

top: 50%, left: 50%を指定した場合

transform: translateを試す

transform: translateX(-50%)を指定した場合

tranform: translateX(50%)を指定した場合

transform: translateY(-50%)を指定した場合

transform: translateY(50%)を指定した場合

transform: translateX(-50%)とtransform: translateY(-50%)を組み合わせた場合

• transform: translate(-50%, -50%)と指定

位置の指定とtransfrom: translateを組み合わせる

top: 50%, left: 50%, transform: translate(-50%, -50%)を指定

おわりに

今回はposition: absolute時に中央揃えをする方法についてまとめました。position: absolute自体、まだ使った回数がそれほど多くないので、中央揃えをしたい時には都度調べて使っていましたが、今回まとめたことで大分理解が進んだ気がします。

92/100

CSSでmax-width: 100%を指定する理由

こんにちは！

今回はCSSでmax-width: 100%を指定する理由についてまとめます。

コード

na-ah.hatenablog.com

• コードは前回と同様
• ウインドウ幅を狭めた場合の挙動を比較

min-width: 300pxの場合

• 最小でも300pxという指定をしているため、ウィンドウ幅が300pxを下回ると、ボタンがはみ出している

width: 300pxの場合

• 300px固定のため、同様にウィンドウ幅が300pxを下回ると、ボタンがはみ出している

max-width: 300pxの場合

• 最大幅が300pxという指定のため、ウィンドウ幅が300pxを下回った場合でも、ウィンドウ幅に追従しておりはみ出していない

max-width: 100%を追加した場合

min-width: 300pxの場合

• min-width: 300pxが優先されており、ボタンがはみ出している

width: 300pxの場合

• 画面幅が最大幅となるので、ボタンがはみ出さなくなっている

max-width: 300pxの場合

• 元々はみ出していないので変化なし

max-width: 100%の使い方

• 画面サイズが小さくなった時に、要素が画面からはみ出さないように指定する
• min-widthと同時に使った場合は、min-widthが優先される模様（下記参考） coliss.com
• 結論としては、widthで固定値を指定したときに、レスポンシブを想定して設定しておくといった使い方をする

おわりに

今回はCSSでmax-width: 100%を指定する理由についてまとめました。CSSは慣れるまではサイズの指定が一番引っかかるポイントだと思うので、気を付けながら書いていきたいですね。

91/100