Bootstrapの使い方

Bootstrapの使い方についてのまとめです。 ・bootstrapとは BootstrapはTwitterが開発した無償でダウンロードし利用することが可能なCSSフレームワークです。 webデザインに関する知識が少ない人でも簡単に見栄えのいいサイトを作ることが可能で、全ての機能がレスポンシブデザインに対応しているのが特徴です。 そのため、スマートフォン向けのサイトを作る際にもとても便利で多くの人がBootstrapを利用しています。   ・導入方法 はじめに下記の公式サイトからBootstrapをダウンロードします。 http://getbootstrap.com/ bootdl ダウンロードしたZIPファイルを解凍すると下記のようにcss,font,jsというファイルが入っているので使用したいファイルにそれぞれコピーして配置します。 bootfile
<script type='text/javascript' src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/bootstrap.min.js"></script>
HTMLのhead内にそれぞれ参照するファイルを読み込ませます。 Bootstrapはjqueryを活用しているので必ず用意しましょう。 使用する前の導入は以上です。 それでは実際に代表的な機能をいくつか紹介します。   ・グリッドシステム グリッドシステムとは、要素の横幅を割合で指定してカラムを整えることができるシステムです。 bootstrapでは12本のグリッドを利用してカラムを指定することができます。 6:6の2カラムや4:4:4の3カラムのように均等にしたり、6:3:3や5:4:3のように不規則な割合でも合計が12なっていれば問題なく機能します。
<div class="container">
 <div class="row">
  <div class="col-xs-3 col-sm-4 col-md-5 col-lg-6">
  </div>
  <div class="col-xs-9 col-sm-8 col-md-7 col-lg-6">
  </div>
 </div>
</div>
グリッドシステムを使うためには、始めにclass=”contener”とその中にclass=”row”を用意する必要があります。 そしてclass=”row”の中にカラムを指定するための要素、class=”col”を書き込みます。 xs,sm,md,lgというのは表示される画面の大きさに合わせて書いてください。 それぞれ、xs=749px以下(スマートフォン等),sm=969px以下(タブレット等),md=1169px以下(PC等),lg=1170以上(PC大画面)の場合に適用される値です。 つまり、上記のHTMLはxsの時に3:9、smの時に4:8、mdの時に5:7、lgの時に6:6で表示するというコードになっています。   ・カラムのオフセット カラムのオフセットはカラムに空白を入れたいときに使える機能です。 col-md-offset-* *の部分にカラムの値を入れることで指定した要素の左側に、入れたカラムの値の分余白ができます。 html
<div class="container">
 <div class="row">
  <div class=" box1 col-md-4 col-md-offset-2">
  </div>
  <div class="box2 col-md-4">
  </div>
 </div>
</div>
css
.container{
width: 1000px;
 background-color: gray;
}

.box1{
background-color: black;
height: 200px;
}

.box2{
background-color: orange;
height: 200px;
}
bootclm1 1000pxのcontainerの中に両端余白、中央にboxを寄せる形のコードです。 box1の左側に2カラムの余白を入れ、4カラムのbox1,box2が続き、最後に残った2カラム分の余白が残ります。 html
<div class="container">
 <div class="row">
  <div class=" box1 col-md-4 col-md-offset-2">
  </div>
  <div class="box2 col-md-4">
  </div>
 </div>
</div>
bootclm2 同様にbox2の方にoffsetをつければ、box2の左側に余白ができます。   ・カラムの順序変更 col-md-push-*とcol-md-pull-*を使用することで表示画面(ブラウザ)の大きさによって表示するカラムの位置を変更することができます。 html
<div class="container">
 <div class="row">
  <div class=" box1 col-md-4 col-lg-push-4">
  </div>
  <div class="box2 col-md-4 col-lg-pull-4">
  </div>
 </div>
</div>
bootcol4 bootcol3 画面がmd以下の時にはbox1が左に、lgの時はbox1が右に来るようになっています。   ・レスポンシブ・ユーティリティ 画面の大きさによってカラムの表示/非表示を切り替えたり、表示の仕方(block、inline、inline-block)を設定することができる機能です。 visible-*-* hidden-* visibleは表示を指示します。visible-md-blockという感じで画面のサイズと表示方法を設定します。 hiddenは非表示を指示します。表示方法の選択を不要なのでhidden-mdのようにサイズのみ設定します。 html
<div class="container">
 <div class="row">
  <div class=" box1 col-md-4">
  </div>
  <div class="box2 col-md-4 hidden-lg">
  </div>
 </div>
</div>
bootcol5 bootcol4 画面がlgの時にはbox2を非表示にし、md以下で表示されるようになっています。   ・ヘルパークラス ヘルパークラスはあらかじめbootstrapで用意されているclassでとても便利な機能です。 img-responsive class=”img-responsive” には display:block, height:auto, max-width: 100% の3つのスタイルが定義されていて、画像を表示画面の大きさに合わせて拡大、縮小させることができます。 center-block class=”center-block” には display: block, margin-left: auto, margin-right: auto の3つのスタイルが定義されていてブロック要素を表示画面の大きさに関わらず親要素の中央に配置することができます。 text-center class=”text-center” には text-align:center のスタイルが定義されていて、文字を画面の大きさに関わらず親要素の中央に配置することができます。 clearfix class=”clearfix” には :after{content:” “, display:block, clear:both} が定義されていてスマートな記述で要素を横並びに配置することができます。   ・その他の機能 formやbutton、tableなどもあらかじめbootstrapで用意されていて、公式サイトから直接コピーペーストして使用できるのでとても便利です。  

フォントの種類と代表的なフォント

ゴシック体、明朝体、セリフ、サンセリフ、スクリプトの種類の中からそれぞれ代表的なフォントを3つずつ紹介します。  

・ゴシック体

縦線と横線の太さに差がほとんどないのが特徴のフォントです。   MS ゴシック msgothicpng 小塚ゴシック kozukagothic Axis axis  

・明朝体

横線が細く縦線が太い、セリフ(飾り)があるのが特徴のフォントです。   モトヤ明朝 motoyamincyo MS 明朝 msmintyo リュウミン ryuumin  

・セリフ

文字の先端にセリフがあるフォントをセリフ体といいます。   Times New Roman times Caslon caslon540 Bodoni bodoni  

・サンセリフ

文字にセリフがないフォントをサンセリフといいます。   Helvetica helvetica Univers univers Optima optima  

・スクリプト

筆記体のフォントでデザイン性が高いのが特徴です。   Bickham script bickham Shelley script shelley Kaufmann kaufmann

Web製作の参考になるブログ、サイトの紹介

ウェブサイトの制作などの参考になるサイトのまとめです。   1.WEBデザインの見本帳 色、デザイン、ジャンルでまとめられており、おすすめサイトや新着サイトなどもスクリーンショットと共に簡単なサイトの説明が載っているのでとても親切なサイトです。 mihon   2. MUUUUU.ORG 縦に長くオーソドックスなレイアウトかつ、非常に優れたデザインを厳選して記載しているサイトです。業種、ジャンル、サイトタイプ、色で検索可能です。 muuu   3. イケサイ イケてるサイト、カッコいいサイトを掲載しているサイトです。日本語、日本人が製作したデザインを対象としているのが特徴です。 ikesai   4. I/O 3000 国内外問わず、ウェブ制作の参考になるサイトを掲載しています。ツイッターでも更新情報を発信しており更新頻度も高いです。 io   5. commte blog webデザイン、web製作に特化した記事を配信しているサイトです。 commte   6.Design Develop cssやjavascriptなどのテクニックを集めたサイトです。ほぼ毎日更新されており記事の数がとても多く参考になります。 design   7.Find Job web製作における様々なジャンルの記事をたくさんまとめているサイトです。 find   8.PHOTOSHOP VIP 流行のウェブサイトのデザインについて詳しく解説しているサイトです。その他フリー素材の提供などもあります。 photo   9. NxWorld htmlやcss、wordpressについての記事が管理者の備忘録としてたくさんまとめられているサイトです。 nx   10. ウェブさえ ホームページ作成やネットショップ作成についての記事を主にまとめているサイトです。他にもウェブ分析や小話といったカテゴリの豆知識もサイト制作に非常に役立つ記事が多いです。 sae  

CSS3 Transition

CSS3 transitionプロパティを使用した要素の変化(アニメーション)についてのまとめです。  

transitionプロパティ

・transition-property 変化を適用するCSSプロパティの指定。 ,で区切って複数指定、noneで全て変化なし、allで全て変化、初期値はnone ・transition-duration 変化にかかる時間の長さの指定。 値はnsで初期値は0s ・transition-timing-function 変化の進行時間の割合の指定。 詳しくは後述。 ・transition-delay 変化を始めるまでの時間の長さの指定。 値はnで初期値は0  

特定の条件下での変化

:hover マウスを要素の上に乗せている間だけ変化 html
<div class="test"></div>
css
.test {
width: 100px;
height: 100px;
background-color: black;
}
.test:hover {
background-color: orange;
}
 

変化時間の調節

上記のプロパティで説明したようにtransition-timing-functionを使用して設定します。 cubic-bezier.com 上記のサイトを参考に直接値を入れて調整することもできますが、元々用意されている値があるので今回はそちらを紹介します。 デモページ ・ease ゆっくり始まりゆっくり終わる(初期値) ・linear 一定の速度 ・ease-in ゆっくり始まり、終点に向けて加速 ・ease-out 早く始まり、終点に向けて減速 ・ease-in-out ゆっくり始まりゆっくり終わるが、easeよりも起伏が少ない。  

Animationとの違い

animation ・ループ可能 ・keyframesで細かい設定が可能 ・動作終了後、即座に元の状態に戻る transition ・ループが無い ・複雑なアニメーションには向かない ・動作終了後、逆再生で元に戻る

CSS3 Animation

CSS3において、animationプロパティと@keyframes使用することでウェブページにアニメーションを表現する方法のまとめです。 デモページ  

animationプロパティ

・animation-name: → @keyframesで指定する名前の設定。 ・animation-duration: ns → 1回のアニメーションサイクルに要する時間の設定。 ・animation-delay: ns → ページが開かれてからアニメーションを始めるまでの時間の設定 ・animation-iteration-count: n → アニメーションを繰り返す回数の設定。値をinfiniteにすることで無限に繰り返すこともできます。 ・animation-direction: → アニメーションの開始時、繰り返し時の方向の設定 normal → 順方向のアニメーションを毎回繰り返す。 reverse → 逆方向のアニメーションを毎回繰り返す。 alternate → 順方向から始まり、逆方向とを交互に繰り返す。 alternate-reverse → 逆方向から始まり、順方向とを交互に繰り返す。 複数の設定を行う場合は、animation:name duration delay iteration-count direction;の形で省略して記述することができます。  

@keyframes name

2つ以上のキーフレームを定義することが原則です。 アニメーションの始点を0%、終点を100%と表し、それぞれfrom,toで代替することもできます。  

移動

html
<div class="test"></div>
css
.test {
width: 100px;
height: 100px;
background-color: blue;
animation:test 2s;
}

@keyframes test{
from{transform: translateY(0px);}
to{transform: translateY(100px);}
縦横100pxの正方形を始点から終点までに下方向に100px移動させ、その移動にかかる時間は2秒間(animation-duration: 2s;)であるというコードです。  

回転

transform:rotate(n deg) html
<div class="test"></div>
css
 .test {
width: 100px;
height: 100px;
background-color: blue;
animation: test 1s 0s 6 alternate;
}

@keyframes test {
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg);}
}
縦横100pxの正方形を1回転(0% {transform: rotate(0deg);}100% {transform: rotate(360deg);})させるコードです。 始点から終点までにかかる時間を1秒、ページ表示直後にアニメーションが開始され、6回順方向、逆方向を交互で繰り返すという設定です。  

拡大、縮小

transform:scale(n) html
<div class="test"></div>
css
.test {
width: 100px;
height: 100px;
background-color: blue;
animation:test 2s;
}

@keyframes test {
0%{transform: scale(1);}
50%{transform: scale(5);}
100%{transform: scale(1);}
}
縦横100pxの正方形をアニメーションの中間で拡大(50%{transform: scale(5);})、終点で元のサイズに縮小(100%{transform: scale(1);})するコードです。  

フェードイン、フェードアウト

opacity: n html
<div class="test"></div>
css
.test {
width: 100px;
height: 100px;
background-color: blue;
animation: test 3s  0s 3 normal;
}

 @keyframes test {
0% {opacity: 0}
100% {opacity: 1}
}
縦横100pxの正方形を透明を始点として中間でフェードインし、終点でフェードアウトするコードです。  

実行のタイミング

:hover → マウスを要素の上に乗せた時に作動 :acthive → リンクをクリック(押しっぱなし)にしている間のみ作動 :checked → チェックボックスやラジオボタンにチェックが入ったときに作動 :focus → inputなど、要素にフォーカスした時に作動 上記のプロパティにanimationプロパティを定義することで実行タイミングを設定することができます。 html
<div class="test"></div>
css
.test {
width: 100px;
height: 100px;
background-color: blue;
}

.test:hover{
animation: test 2s 0s 1;
}

@keyframes test {
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg);}
}
マウスが正方形の上に乗ったときに回転するソースです。  

イージング

cubic-bezier.com cubic 始めに紹介したanimationプロパティの他にanimation-timing-functionというプロパティがあり、これはキーフレームを使用する際のアニメーションの進行速度の割合を設定できるプロパティです。 上記のサイトで簡単に自由な設定ができますが、あらかじめ用意されている値もあるので、その中から使われる機会が多い値を紹介します。 ・ease cubic-bezier(0.25, 0.1, 0.25, 1.0) と同値(初期値) ・linear cubic-bezier(0.0, 0.0, 1.0, 1.0) と同値(一定) ・ease-in cubic-bezier(0.42, 0, 1.0, 1.0) と同値 ・ease-out cubic-bezier(0, 0, 0.58, 1.0) と同値 ・ease-in-out cubic-bezier(0.42, 0, 0.58, 1.0) と同値  

jqueryを使用したHTMLの書き換え

テキストの書き換え $(“セレクター”).text(“書き換え”);
<p class="test">テキスト</p>

$("p.test").text("新しいテキスト");
  HTMLタグの追加 $(“セレクター”).html(“タグ”);
<p class="test">テキスト</p>

$("p.test").html("<h3>新しいテキスト</h3>");
  HTMLの追加 指定した要素の先頭に追加 $(“セレクター”).prepend(“書き換え”);
<p class="test">テキスト</p>

$("p.test").prepend("新しいテキスト");
指定した要素の最後に追加 $(“セレクター”).append(“書き換え”);
<p class="test">テキスト</p>

$("p.test").append("新しいテキスト");
指定した要素の前に追加 $(“セレクター”).before(“書き換え”);
<p class="test">テキスト</p>

$("p.test").before("新しいテキスト");
指定した要素の後に追加 $(“セレクター”).after(“書き換え”);
<p class="test">テキスト</p>

$("p.test").after("新しいテキスト");
  要素の削除 $(“セレクター”).remove();
<p><h3>テキスト</h3></p>

$("p h3").remove();
  属性値の変更 $(“セレクタ”).attr(“属性名”,”値”);
<img src="before.jpg">

$("img").attr("src","after.jpg");
複数の属性値を同時に変更したい場合は、$(“セレクタ”).attr({“src”:”after.jpg” , “~”:”~” , “~”:”~”});のように書くことで同時に書き換えることができます。   属性の削除 $(“セレクタ”).removeAttr(“属性名”);
$("img").removeAttr("border");
  属性のスタイル変更 $(“セレクタ”).css(“属性名”,”値”);
<p class="test">テキスト</p>

$(".test").css("color","red");
複数の属性値を同時に変更したい場合は、$(“セレクタ”).css({“color”:”red” , “~”:”~” , “~”:”~”});のように書くことで同時に書き換えることができます。   CSSの追加と削除 $(“セレクタ”).addClass(“CSS名”); $(“セレクタ”).removeClass(“CSS名”);
$(".test").addClass("test2");

$(".test").removeClass("test3");
 

JavascriptのDOMを使用したHTMLの書き換え

要素の取得 ID名を指定して取得 document.getElementById(“ID名”); タグを指定して取得 document.getElementsByTagName(“タグ名”); classを指定して取得 document.getElementsByClassName(“クラス名”); nameを指定して取得 document.getElementsByName(“name名”); TagName,ClassName,Nameは1つのHTMLファイルの中に同じ要素名を持つ要素が存在する可能性があるためElementsと複数形になっているので注意が必要です。

<div id="test1">ID</div>
<p>タグ</p>
<p class="test2">クラス</p>
<p name="test3">ネーム</p>
 
<script>
document.getElementById("test1");
document.getElementsByTagName("p")
document.getElementsByClassName("test3");
document.getElementsByName("test4");
</script>
  要素の変更 取得した要素に.innerHTMLを代入することで要素の変更を、 .styleを記述することでstyle属性を変更することができます。 また、一つの要素に複数の変更を加える場合は、一度変数に入れることで処理の負担を減らすことができます。

<div id="test">テスト</div>

<script>
var a = document.getElementById("test");
 
a.style.color = "red";
a.innerHTML = "変更";
</script>

    要素の作成 document.createElement(“要素名”);   要素の追加 指定した子要素の1つ前に追加 → 親要素.insertBefore(追加する要素, 指定した子要素); 指定した要素の最後に追加 → 親要素.appendChild(追加する要素);

<body>

<script>
var a = document.createElement("div");
document.body.appendChild(a);
</script>

</body>

  要素の削除 指定する要素.removeChild(“削除する子要素”);

<div id="test">テスト</div>

<script>
var a = document.getElementById("test");
a.parentNode.removeChild(a);
</script>

  属性の取得 指定する要素.getAttribute(“取得する属性”);

<div id="test" style="color:red;">テスト</div>

<script>
document.getElementById("test").getAttribute("style");
</script>

  属性の変更 指定する要素.setAttribute(“属性名”,”設定値”);

<div id="test" style="color:red;">テスト</div>

<script>
document.getElementById("test").setAttribute("style","color:blue");
</script>

  属性の削除 指定する要素.removeAttribute(“属性名”);

<div id="test" style="color:red;">テスト</div>

<script>
document.getElementById("test").removeAttribute("style");
</script>

 

国内無料デザイン素材サイトまとめ

商用利用可能な無料イラストサイトのまとめです。 詳しい利用規約は各サイトをご覧ください。   イラストAC http://www.ac-illust.com/ ac ダウンロードには無料会員登録必要ですが、現在80万人以上の会員が利用している大きなサイト。 人気イラストランキングやイラストレーター一覧など検索機能が便利なのが人気の理由です。   人物イラスト館 http://jinbutuillust.businesscatalyst.com/index.html jinbutu シンプルでかわいい人物のイラスト無料配布しているサイト。 イラストのバリエーションも豊富なので人物のイラストが必要な場合にとてもおすすめです。   ガーリー素材 http://girlysozai.com/ gurley 花や雑貨など、女性向けをコンセプトにした可愛いイラストを無料配布しているサイトです。   いらすとや http://www.irasutoya.com/ ilust 多くのカテゴリのイラストが揃ってるサイト。 検索のコツがホームページで紹介されるほどイラストの数が多いです。   フリーラ http://freeillustration.net/ free 人物イラストを扱っているサイト。 可愛いらしい人物イラストが多いです。   Sui-Sai http://www.sui-sai.jp/ suisai 水彩画のイラストが揃っているサイト。 一風変わったイラストをお求めの方におすすめです。   Line illustration labo http://loops-inc.com/lineart/ line 建物や風景の線画イラストを無料提供しているサイト。 数は少ないですが個性的なデザインが魅力的です。   イラスト無料ネット http://illustration-free.net/ icon シンプルなアイコンが揃っているサイト。 人や食べ物、動物から記号や建造物などのアイコンが揃っています。   フレームデザイン http://frames-design.com/ frame フレームのイラストを専門に扱っているサイト。 多種多様なフレームデザインが揃っています。   フキダシデザイン http://fukidesign.com/ fukidashi 吹き出しのイラストを専門に扱っているサイト。 300種類以上の吹き出しイラストが揃っています。  

Accelerated Mobile Pagesの解説

AMPとは

AMP(Accelerated Mobile Pages)とは、モバイル端末でのWebページの閲覧を高速化するためのサービスで、GoogleとTwiiterの共同開発のプロジェクトです。 2016年2月にGoogle検索への対応が始まり、それをきっかけにより身近な存在になりました。  

AMP対応ページの作り方

AMPに対応したWebページを作成するためには、AMP HTMLの仕様に則った記述方法で作成する必要があります。 通常のHTML5の構文
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>sample</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link rel="stylesheet" href="sample.css">
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<script src="sample.js"></script>
</head>
<body>

</body>
</html>
AMP HTMLの構文
<!doctype html>
<html amp>
  <head>
    <meta charset="utf-8">
    <title>Sample</title>
    <link rel="canonical" href="PCページのURL">
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <style amp-custom>
      h1 {color: red}
    </style>
    <script type="application/ld+json">
    {
      "@context": "http://schema.org",
      "@type": "NewsArticle",
      "headline": "Article headline",
      "image": [
        "thumbnail1.jpg"
      ],
      "datePublished": "2015-02-05T08:00:00+08:00"
    }
    </script>
    <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
    <script async src="https://cdn.ampproject.org/v0.js"></script>
  </head>
<body>
 
</body>
</html>
 

AMP HTMLで仕様変更された要素

基本的には通常のHTMLと同じ様にかくことができますが、記述の仕方に変更がある要素や、使用できなくなった要素があるので注意が必要です。 img → amp-img(src,width,heightの指定が必須) video → amp-video audio → amp-audio iframe → amp-iframe 以下の要素は全て使用不可になります。 frame, frameset, base, object, param, applet, embed, form  

AMPのメリット

カルーセル表示になるので大きく領域を取って表示されクリック率が上がるのに加え、クリックされなかった場合も写真やテキストを見てもらうことができます。 従来に比べてページの読み込みが早くなるのでユーザーのストレスを軽減できます。  

AMPのデメリット

AMP HTMLに対応させなければならないため、仕様の変更を理解して管理する手間がかかります。 さらに、使用できる広告が限られているのでサイトによっては不都合が生じる場合があります。  

まとめ

AMPに対応するためには通常のHTMLではなくAMP HTMLで作成する必要がありますが、通常のHTMLと大きな差はないのでモバイルページを多く作成するのであれば覚えておいて損はないと思います。   公式リンク https://www.ampproject.org//

Gitのホスティングサービスの解説

Gitは、プログラムのソースコードなどの変更履歴を記録・追跡するための分散型バージョン管理システムです。 何度も編集を重ねその度にバックアップを取るのは大変だったり、複数人で作業する際のトラブルを防止するためなど、エンジニアにとって無くてはならないものとして重宝されています。 その中でも特に多く使われている、GitHubとBitbucketの2つホスティングサービスについて解説します。  

GitHub

無料プランと有料プランがあり、無料プランではプライベートリポジトリを利用することができませんが、パブリックリポジトリに関しては携わるメンバーと共に無制限となっており最も人気で使われているサービスです。  

Bitbucket

こちらも無料プランと有料プランがありますが、無料プランでもパブリックリポジトリ、プライベートリポジトリ共に無制限に利用可能です。 その代わりに携わることができるメンバーに制限があり、無料プランでは5人までしか利用することができません。  

用語解説

Gitで使われる用語について解説していきます。 リポジトリ(ローカル、リモート) リポジトリとは、ファイルやディレクトリの状態を保存する場所です。変更履歴を管理したいディレクトリなどをリポジトリの管理下に置くことで、そのディレクトリ内のファイルなどの変更履歴を記録することができます。 リポジトリは自分のPC内にある「ローカルリポジトリ」とサーバなどネットワーク上にある「リモートリポジトリ」の2箇所にあります。基本的にローカルリポジトリで作業を行い、その作業内容をリモートリポジトリへプッシュする流れで行います。 プライベートリポジトリ インターネット上にライブラリを公開したくない場合、自分でリポジトリを用意して利用することができます。このリポジトリのことをプライベートリポジトリと呼びます。 Push ローカルリポジトリの変更をリモートリポジトリに反映させる。 Pull リモートリポジトリの変更をローカルリポジトリに反映させて履歴を残す(fetch+merge)。 PullRequest フォークしたリポジトリでの変更を、フォーク元のリポジトリへ反映するよう依頼する。 Commit インデックスに登録してある変更対象をローカルリポジトリに反映する。 Fetch リモートリポジトリの変更をローカルリポジトリに反映させる。 Branch 履歴管理を枝分かれさせてたもの。ブランチを使うことにより、複数の履歴を並列に管理できる。 Merge 異なるブランチの変更を反映させること。お互いの変更履歴は残る。 Fork リモートリポジトリをコピーしてリモートリポジトリを作成する。 Clone リモートリポジトリをコピーしてローカルリポジトリを作成する。 .gitignoreファイル 履歴管理の対象外とするファイルを登録するところ。対象範囲は各リポジトリ。