staffBootstrapの使い方についてのまとめです。BootstrapはTwitterが開発した無償でダウンロードし利用することが可能なCSSフレームワークです。webデザインに関する知識が少ない人でも簡単に見栄えのいいサイトを作ることが可能で、全ての機能がレスポンシブデザインに対応しているのが特徴です。そのため、スマートフォン向けのサイトを作る際にもとても便利で多くの人がBootstrapを利用しています。はじめに下記の公式サイトからBootstrapをダウンロードします。ダウンロードしたZIPファイルを解凍すると下記のようにcss,font,jsというファイルが入っているので使用したいファイルにそれぞれコピーして配置します。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></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で表示するというコードになっています。カラムのオフセットはカラムに空白を入れたいときに使える機能です。*の部分にカラムの値を入れることで指定した要素の左側に、入れたカラムの値の分余白ができます。200px;}1000pxのcontainerの中に両端余白、中央にboxを寄せる形のコードです。box1の左側に2カラムの余白を入れ、4カラムのbox1,box2が続き、最後に残った2カラム分の余白が残ります。</div></div>同様にbox2の方にoffsetをつければ、box2の左側に余白ができます。col-md-push-*とcol-md-pull-*を使用することで表示画面(ブラウザ)の大きさによって表示するカラムの位置を変更することができます。</div></div>画面がmd以下の時にはbox1が左に、lgの時はbox1が右に来るようになっています。画面の大きさによってカラムの表示/非表示を切り替えたり、表示の仕方(block、inline、inline-block)を設定することができる機能です。visibleは表示を指示します。visible-md-blockという感じで画面のサイズと表示方法を設定します。hiddenは非表示を指示します。表示方法の選択を不要なのでhidden-mdのようにサイズのみ設定します。</div></div>画面がlgの時にはbox2を非表示にし、md以下で表示されるようになっています。ヘルパークラスはあらかじめbootstrapで用意されているclassでとても便利な機能です。3つのスタイルが定義されていて、画像を表示画面の大きさに合わせて拡大、縮小させることができます。3つのスタイルが定義されていてブロック要素を表示画面の大きさに関わらず親要素の中央に配置することができます。スタイルが定義されていて、文字を画面の大きさに関わらず親要素の中央に配置することができます。定義されていてスマートな記述で要素を横並びに配置することができます。formやbutton、tableなどもあらかじめbootstrapで用意されていて、公式サイトから直接コピーペーストして使用できるのでとても便利です。staffゴシック体、明朝体、セリフ、サンセリフ、スクリプトの種類の中からそれぞれ代表的なフォントを3つずつ紹介します。縦線と横線の太さに差がほとんどないのが特徴のフォントです。横線が細く縦線が太い、セリフ(飾り)があるのが特徴のフォントです。リュウミン・セリフ文字の先端にセリフがあるフォントをセリフ体といいます。Bodoni・サンセリフ文字にセリフがないフォントをサンセリフといいます。Optima・スクリプト筆記体のフォントでデザイン性が高いのが特徴です。staffウェブサイトの制作などの参考になるサイトのまとめです。色、デザイン、ジャンルでまとめられており、おすすめサイトや新着サイトなどもスクリーンショットと共に簡単なサイトの説明が載っているのでとても親切なサイトです。縦に長くオーソドックスなレイアウトかつ、非常に優れたデザインを厳選して記載しているサイトです。業種、ジャンル、サイトタイプ、色で検索可能です。イケてるサイト、カッコいいサイトを掲載しているサイトです。日本語、日本人が製作したデザインを対象としているのが特徴です。国内外問わず、ウェブ制作の参考になるサイトを掲載しています。ツイッターでも更新情報を発信しており更新頻度も高いです。webデザイン、web製作に特化した記事を配信しているサイトです。cssやjavascriptなどのテクニックを集めたサイトです。毎日更新されており記事の数がとても多く参考になります。web製作における様々なジャンルの記事をたくさんまとめているサイトです。流行のウェブサイトのデザインについて詳しく解説しているサイトです。その他フリー素材の提供などもあります。htmlやcss、wordpressについての記事が管理者の備忘録としてたくさんまとめられているサイトです。ホームページ作成やネットショップ作成についての記事を主にまとめているサイトです。他にもウェブ分析や小話といったカテゴリの豆知識もサイト制作に非常に役立つ記事が多いです。transitionプロパティを使用した要素の変化(アニメーション)についてのまとめです。変化を適用するCSSプロパティの指定。変化にかかる時間の長さの指定。変化の進行時間の割合の指定。変化を始めるまでの時間の長さの指定。上記のプロパティで説明したようにtransition-timing-functionを使用して設定します。上記のサイトを参考に直接値を入れて調整することもできますが、元々用意されている値があるので今回はそちらを紹介します。始まりゆっくり終わるが、easeよりも起伏が少ない。staffCSS3において、animationプロパティと@keyframes使用することでウェブページにアニメーションを表現する方法のまとめです。@keyframesで指定する名前の設定。1回のアニメーションサイクルに要する時間の設定。アニメーションを繰り返す回数の設定。値をinfiniteにすることで無限に繰り返すこともできます。順方向のアニメーションを毎回繰り返す。逆方向のアニメーションを毎回繰り返す。順方向から始まり、逆方向とを交互に繰り返す。逆方向から始まり、順方向とを交互に繰り返す。direction;の形で省略して記述することができます。name2つ以上のキーフレームを定義することが原則です。アニメーションの始点を0%、終点を100%と表し、それぞれfrom,toで代替することもできます。2s;)であるというコードです。rotate(360deg);})させるコードです。始点から終点までにかかる時間を1秒、ページ表示直後にアニメーションが開始され、6回順方向、逆方向を交互で繰り返すという設定です。scale(1);})するコードです。1}}縦横100pxの正方形を透明を始点として中間でフェードインし、終点でフェードアウトするコードです。上記のプロパティにanimationプロパティを定義することで実行タイミングを設定することができます。rotate(360deg);}}マウスが正方形の上に乗ったときに回転するソースです。始めに紹介したanimationプロパティの他にanimation-timing-functionというプロパティがあり、これはキーフレームを使用する際のアニメーションの進行速度の割合を設定できるプロパティです。上記のサイトで簡単に自由な設定ができますが、あらかじめ用意されている値もあるので、その中から使われる機会が多い値を紹介します。“~”:”~”});のように書くことで同時に書き換えることができます。“~”:”~”});のように書くことで同時に書き換えることができます。TagName,ClassName,Nameは1つのHTMLファイルの中に同じ要素名を持つ要素が存在する可能性があるためElementsと複数形になっているので注意が必要です。.styleを記述することでstyle属性を変更することができます。一つの要素に複数の変更を加える場合は、一度変数に入れることで処理の負担を減らすことができます。staff商用利用可能な無料イラストサイトのまとめです。詳しい利用規約は各サイトをご覧ください。ダウンロードには無料会員登録必要ですが、現在80万人以上の会員が利用している大きなサイト。人気イラストランキングやイラストレーター一覧など検索機能が便利なのが人気の理由です。シンプルでかわいい人物のイラスト無料配布しているサイト。イラストのバリエーションも豊富なので人物のイラストが必要な場合にとてもおすすめです。花や雑貨など、女性向けをコンセプトにした可愛いイラストを無料配布しているサイトです。多くのカテゴリのイラストが揃ってるサイト。検索のコツがホームページで紹介されるほどイラストの数が多いです。人物イラストを扱っているサイト。可愛いらしい人物イラストが多いです。水彩画のイラストが揃っているサイト。一風変わったイラストをお求めの方におすすめです。建物や風景の線画イラストを無料提供しているサイト。数は少ないですが個性的なデザインが魅力的です。シンプルなアイコンが揃っているサイト。人や食べ物、動物から記号や建造物などのアイコンが揃っています。フレームのイラストを専門に扱っているサイト。多種多様なフレームデザインが揃っています。吹き出しのイラストを専門に扱っているサイト。300種類以上の吹き出しイラストが揃っています。Pages)とは、モバイル端末でのWebページの閲覧を高速化するためのサービスで、GoogleとTwiiterの共同開発のプロジェクトです。2016年2月にGoogle検索への対応が始まり、それをきっかけにより身近な存在になりました。HTMLの仕様に則った記述方法で作成する必要があります。基本的には通常のHTMLと同じ様にかくことができますが、記述の仕方に変更がある要素や、使用できなくなった要素があるので注意が必要です。以下の要素は全て使用不可になります。formAMPのメリットカルーセル表示になるので大きく領域を取って表示されクリック率が上がるのに加え、クリックされなかった場合も写真やテキストを見てもらうことができます。従来に比べてページの読み込みが早くなるのでユーザーのストレスを軽減できます。HTMLに対応させなければならないため、仕様の変更を理解して管理する手間がかかります。使用できる広告が限られているのでサイトによっては不都合が生じる場合があります。HTMLで作成する必要がありますが、通常のHTMLと大きな差はないのでモバイルページを多く作成するのであれば覚えておいて損はないと思います。staffGitは、プログラムのソースコードなどの変更履歴を記録・追跡するための分散型バージョン管理システムです。何度も編集を重ねその度にバックアップを取るのは大変だったり、複数人で作業する際のトラブルを防止するためなど、エンジニアにとって無くてはならないものとして重宝されています。その中でも特に多く使われている、GitHubとBitbucketの2つホスティングサービスについて解説します。GitHub無料プランと有料プランがあり、無料プランではプライベートリポジトリを利用することができませんが、パブリックリポジトリに関しては携わるメンバーと共に無制限となっており最も人気で使われているサービスです。Bitbucketこちらも無料プランと有料プランがありますが、無料プランでもパブリックリポジトリ、プライベートリポジトリ共に無制限に利用可能です。その代わりに携わることができるメンバーに制限があり、無料プランでは5人までしか利用することができません。用語解説Gitで使われる用語について解説していきます。リポジトリとは、ファイルやディレクトリの状態を保存する場所です。変更履歴を管理したいディレクトリなどをリポジトリの管理下に置くことで、そのディレクトリ内のファイルなどの変更履歴を記録することができます。リポジトリは自分のPC内にある「ローカルリポジトリ」とサーバなどネットワーク上にある「リモートリポジトリ」の2箇所にあります。基本的にローカルリポジトリで作業を行い、その作業内容をリモートリポジトリへプッシュする流れで行います。インターネット上にライブラリを公開したくない場合、自分でリポジトリを用意して利用することができます。このリポジトリのことをプライベートリポジトリと呼びます。ローカルリポジトリの変更をリモートリポジトリに反映させる。リモートリポジトリの変更をローカルリポジトリに反映させて履歴を残す(fetch+merge)。フォークしたリポジトリでの変更を、フォーク元のリポジトリへ反映するよう依頼する。インデックスに登録してある変更対象をローカルリポジトリに反映する。リモートリポジトリの変更をローカルリポジトリに反映させる。履歴管理を枝分かれさせてたもの。ブランチを使うことにより、複数の履歴を並列に管理できる。異なるブランチの変更を反映させること。お互いの変更履歴は残る。リモートリポジトリをコピーしてリモートリポジトリを作成する。リモートリポジトリをコピーしてローカルリポジトリを作成する。履歴管理の対象外とするファイルを登録するところ。対象範囲は各リポジトリ。