HTML&CSS

Flexboxを使ったECサイト向けパーツ

ECサイトなどで見かける商品別のブロックをFlexboxを使って作成するサンプルです。 参考にしたのはこちらのページです。Some Inspiration for Pricing Tables 折角Flexboxを使っているので、少し応用してみました。 サンプル1 3カラムになったブロックの中央がお  >>続きを読む

display:flexの基本的な使い方〜脱フロートレイアウト

Flexboxを使うとfloatでの面倒なレイアウト作成から解放されます。概ねのブラウザも対応していますし、問題のIE8以下のバージョンも急速にその終焉を迎えました。Flexboxレイアウトを積極的に採用する時が来たように思います。 Flexboxレイアウトではfloatレイアウトでできなかったこと  >>続きを読む

Git〜コミットのコメント内容を変更したい時

Gitでコミットしたけれども、コミットの内容を変更したい時の方法です。 SourceTreeでの操作方法ですが、簡単そうでどこを操作したら良いのかわかりにくいです。 操作方法 上にあるコミットボタンをクリックします。 コミットオプションから「最新のコミットを修正」を選択して内容を変更します。

CSSでカラムの作成方法〜floatとdisplay:tableの活用

CSSを使ってカラムを作成する復習です。 自分なりにいろいろなカラムを作るパターンを作成しておくとよいです。 フロートを使った固定レイアウトのカラム 固定レイアウトのカラムはPC用のレイアウトでかつて多く使用されたパターンです。幅を固定にしてブラウザの幅に依存せずにデザインしますので型崩れが起こりに  >>続きを読む

水滴の作り方〜Photoshop

水滴の作り方のTipsです。 作成前写真 完成画像 作成手順 対象写真を読み込んだ後に、新規レイヤーを作成します。 描画色は黒にして、ブラシツールで水滴の形を作ります。 ブラシの形ははっきりした丸型を選びます。 描画モードをスクリーンにします。これで黒は隠れますが、以降のレイヤースタイルで形が現れて  >>続きを読む

Git入門(5)〜ブランチとマージそしてコンフリクト

今回の内容で特にマージをした時にコンフリクトを起こしてしまう状況を考えてみます。 Git初心者で実務でコンフリクトを起こすと焦ってしまうに違いありません。日頃からGitを使い倒しておくと焦ることはないでしょう。 ココは何度も失敗をしてこれはやっちゃダメとかいうことを身をもって学習することです。 今回  >>続きを読む

Git入門(4)〜GitHubで共有する

GitHubはリモートリポジトリと多くのWebツールを提供してくれるオクトリンク社のサービスです。ソフトウエア開発にとどまらず Web制作でも活用されるようになっています。無料で使えるプランは公開リポジトリのみです。 GitHubへアクセスします。 ユーザー名とメールアドレスとパスワードを設定してユ  >>続きを読む

Git入門(3)〜Bitbucketで共有する

Bitbucketについて Bitbucketはアトラシアンが運営するプライベートリポジトリを無制限に持てる無料アカウントを提供しているサービスです。 無料アカウントの場合、5 ユーザーまで使用できます。GitHubとの違いは非公開リポジトリを無料で作成できることです。 Bitbucketのページで  >>続きを読む

Git入門(2)〜SourceTreeの使い方

前回はコマンドでGitの仕組みを見てきました。今回はGUIのアプリケーションSourceTreeの使い方を学習します。 ローカルでのバージョン管理を行う上で必須の作業は次の3つです。 ローカルリポジトリの作成  git init 作業ツリーからステージングエリアへ移動  git add ファイル名   >>続きを読む

Git入門(1)〜Gitの導入とおおまかな仕組み

Gitはバージョン管理をするための分散型バージョン管理システムです。 日頃からソースコードの変更履歴を記録・管理するくせをつけておくと、会社などの実務に入ってから戸惑うこともなくなると思います。 バージョン管理は大切な共同作業を行う上で必須項目です。一度時間をかけて習得しておいて損はないでしょう。   >>続きを読む