HTMLのみでアイコンを制御する方法。サイズ・色・動きなど

今回の記事では、HTMLのみを使ってアイコンを制御する方法をご紹介します。

以前の記事で、アイコンを表示する方法をご紹介しました。今回はその応用編で、アイコンを制御する方法です。
somegoro.hatenablog.com

アイコンを制御する方法

制御したいアイコンに対して、クラスを追加します。具体的な書き方として次の5種類をとりあげて記載します。

・Larger Icons（大きさ倍率制御）
・Unify Icons（種類間の大きさ統一）
・Color Icons（色の制御）
・Animated Icons（動きの制御）
・Rotated & Flipped Icons（傾きの制御）

Larger Icons

アイコンの大きさを制御します。それぞれ標準サイズ、2倍サイズ、3倍サイズ、4倍サイズ、5倍サイズです。

<div class="fa fa-camera-retro fa-lg"></div>
<div class="fa fa-camera-retro fa-2x"></div>
<div class="fa fa-camera-retro fa-3x"></div>
<div class="fa fa-camera-retro fa-4x"></div>
<div class="fa fa-camera-retro fa-5x"></div>

Unify Icons

アイコン表示のサイズを統一します。アイコンのサイズは種類によりそれぞれ違います。そのため、異なる種類のアイコンを使用してリストを作るときにはガタガタになってしまいます。それを回避するため各種アイコンのサイズを揃えます。

また、アイコンを2倍サイズや3倍サイズなどにすると隣り合った要素との幅が狭くなってしまいます。そんなときは、この「fa-fw」を適用すると上手く表示されます。ですのでこの記事では常に「fa-fw」を適用してアイコンを表示しています。（HTMLコードを記載するときはわかりにくいので記載していません）

ホーム
スケジュール
Github
設定

<i class="fa fa-home fa-fw"></i>ホーム
<i class="fa fa-calendar fa-fw"></i>スケジュール
<i class="fa fa-github fa-fw"></i>Github
<i class="fa fa-cogs fa-fw"></i>設定

Color Icons

アイコンの色を制御します。これはHTMLの中に「css」を埋め込んでいるだけです。

<i class="fa fa-android" style="color:#A4C639;"></i>

Animated Icons

アイコンを動かします。待機中（Loading）などに便利です。「fa-spin」だと滑らかに回転、「fa-pulse」だとカクカクに回転します。

<div class="fa fa-spinner fa-spin"></div>
<div class="fa fa-circle-o-notch fa-spin"></div>
<div class="fa fa-refresh fa-spin"></div>
<div class="fa fa-cog fa-spin"></div>
<div class="fa fa-refresh fa-pulse"></div>
<div class="fa fa-spinner fa-pulse"></div>

Rotated & Flipped Icons

アイコンが傾きます。それぞれ90度傾き、180度傾き、270度傾き、傾きなし、ひっくり返しです。

<div class="fa fa-shield"></i>
<div class="fa fa-shield fa-rotate-90"></div>
<div class="fa fa-shield fa-rotate-180"></div>
<div class="fa fa-shield fa-rotate-270"></div>
<div class="fa fa-shield fa-flip-horizontal"></div>
<div class="fa fa-shield fa-flip-vertical"></div>

以上、5種類のアイコン制御方法の紹介でした。次のサイトFont Awesome Iconsでアイコン制御方法をWEB上にアップしてくれています。記事で取り上げたアイコン制御の他にもたくさんの制御方法があります。気になる方はサイトの Example タブから確認してみてください。
fontawesome.com

テキスト領域からはみ出すときに、末尾省略符号（三点リーダー...）で残りを表示させない方法

末尾省略記号の表示のさせ方

今回の記事では、領域が足りないときに三点リーダーで表示する方法をご紹介します。

テキストが領域からはみ出すときに、「...」と表示させて残りを表示させていないWebページをよく見かけますよね。あれです。画像で見るとこんな感じになります。

私はこの表示方法の仕方を覚えては忘れてを繰り返していました。何度同じこと調べるんだと自分でも思ったので記事にしました。これで私自身の調べる手間も省けます。それでは実際の手順を記載していきます。

手順

１．HTMLで次のように記載

<div class="three-point-test">
三点リーダーのテストをしています。これで指定した横幅以上になれば...で表示されるはずです。この書き方は複数行では対応していません。
</div>

２．cssで次のように記載

.three-point-test {
    width: 300px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

以上です。これで、指定した横幅以上の文字は省略されて「...」で表示されます。それでは仕組みを詳しく見ていきましょう。

仕組み

実際に三点リーダーを設定しているのは「text-overflow」です。

text-overflow: ellipsis;

この「text-overflow」を機能させるに、次の３つの設定をする必要があります。

１．横幅の指定

width: 300px;

横幅を指定します。

２．はみ出た部分を表示しない

overflow: hidden;

ボックスの範囲内に内容が入りきらない場合に、はみ出た部分は表示しない。

３．改行禁止

white-space: nowrap;

改行を禁止します。

あまり使わないので忘れがちですが、忘れたときにはまたこのページを見ると良いかと。

SQL Server 2014 サービス起動の仕方（on Windows10）

SQL Serverサービス起動の方法

Windows10 での SQL Server 2014 サービス起動の仕方をご紹介します。

今回の記事は備忘録に近いです。

手順

今回は画面（GUI）操作でサービス起動していきます。このほかの手順としてはコマンドで起動する方法もあります。

Windowsボタンから「全てのアプリ」

「Microsoft SQL Server 2014」

「SQL Server 2014構成マネージャ」

SQL Server 2014を実行状態にする。

以上でサービスを起動することが出来ます。

サービスを起動しないと SQL Server を使用（接続）することは出来ません。ですので、サービス起動は必須の手順になります。

「自動で起動」する設定にも出来ますが、使用しないときにも起動状態になるためCPU・メモリともに無駄遣いすることになります。ですので、オススメは「自動起動」にせずに使うたびにサービスを起動する方法です。

SQL Server 2014 のインストール方法はこちらをどうぞ。
somegoro.hatenablog.com

Microsoft EdgeでInternet Explorer（IE）を開く方法

Windows10ではデフォルトブラウザとして「Microsoft Edge」が採用されています。しかし、この「Edge」にまだ対応していないWebページは結構あります。ですのでWebページを「IE」で開くことも必要になります。

「Edge」で「IE」を開く方法

今回の記事では、上記のような課題を解決するために「Microsoft Edge」で「Internet Explorer」を開く方法をご紹介します。

「Edgeで開けないWebページ」の例として、次のオラクルのページを題材として扱っていきます。（2016年7月6日時点で次のページはMicrosoft Edgeに対応していないことを確認しています。）

ORACLE - Javaのバージョンの確認

このオラクルのページは、自分のPCにインストールされているJavaのバージョンを確認するWebページです。

「Edge」で「IE」を開く手順

実際の手順をご紹介していきます。

「Microsoft Edge」で開いたとき

「Microsoft Edge」で表示すると次のような表示になり、Javaのバージョン確認をすることが出来ません。いわゆる Edge で開けない状態です。

大きくすると次のような記載になっています。なんだかよくわからない日本語ですが、要は Edge じゃ開けないよと言っています。

ChromeブラウザではNPAPIプラグインがサポートされないため、すべてのJavaコンテンツが実行されません。Javaプラグインを実行するには、別のブラウザ(Firefox、Internet ExplorerまたはMac上のSafari)に切り替えます。詳細

引用：https://java.com/ja/download/installed8.jsp

「Edge」から「IE」起動

EdgeからIEを起動して、このページを確認することができるようにします。

「Microsoft Edge」の右上の三点リーダー（…）をクリックしてください。

すると、次のような画面が表示されます。そこで「Internet Explorerで開く」を選択します。

すると上手く表示されました。「同意して続行」ボタンで確認してみましょう。

「Internet Explorer」で確認する

Javaのバージョン確認をすることが出来ました。

このようにして、「Microsoft Edge」にまだ対応していないWebページでも開くことは出来ます。ですので必要以上にWindows10に怖がらなくて大丈夫ですよ。

CSSを使ってアイコンを表示させる方法。時計・家・カメラなど

今日（2016年7月4日）は大雨でしたね。久しぶりに嵐のようでした。台風が来ているようなので引き続き警戒していきましょう。

さて今回の記事では、スタイルシート（css）を使ってアイコン表示をする方法をご紹介します。

以前の記事で、HTMLのみでアイコンを使う方法をご紹介しました。今回はその応用編です。
somegoro.hatenablog.com

スタイルシート（css）を用いてアイコンを自由に使えることが出来れば、より便利にアイコンを使用することが出来ます。とりわけ、アイコン設置後に修正するなどの管理が楽です。

アイコンを表示する方法

この方法では３ステップで済みますのでとても簡単です。

簡単３ステップ
１．HTMLファイル先頭にリンクを書く
２．HTMLのタグに任意のクラス属性を追加する
３．スタイルシート（css）で疑似要素を記載する

それでは具体的な方法を記載していきます。

１．HTMLファイル先頭にリンクを書く

まずはHTMLファイルの先頭に次のように記載します。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

これは何をしているかというと、Webにアクセスしてファイルを読み込んでいます。はてなブログではヘッダのタイトル下（HTMLを記述できます）の部分に記載しておくと良いかと思います。

２．HTMLのタグに任意のクラス属性を追加する

アイコンを表示したいタグに次のように任意のクラス（hoge）を書きます。

<div class="hoge">アイコン表示のテスト</div>

３．スタイルシート（css）で疑似要素を記載する

上記手順で追加した任意のクラス属性に疑似要素（content）を書きます。具体的な書き方として６種類とりあげます。

カメラアイコン

css で次のように書くとアイコンが表示されます。

.hoge:before {
  font-family: 'FontAwesome';
  content: "\f083";
}

こんな感じに表示されます。

アイコン表示のテスト

チェック

css で次のように書くとアイコンが表示されます。

.hoge:before {
  font-family: 'FontAwesome';
  content: "\f046";
}

時計

css で次のように書くとアイコンが表示されます。

.hoge:before {
  font-family: 'FontAwesome';
  content: "\f017";
}

家

css で次のように書くとアイコンが表示されます。

.hoge:before {
  font-family: 'FontAwesome';
  content: "\f015";
}

上へ

css で次のように書くとアイコンが表示されます。

.hoge:before {
  font-family: 'FontAwesome';
  content: "\f106";
}

上へ（丸囲み）

css で次のように書くとアイコンが表示されます。

.hoge:before {
  font-family: 'FontAwesome';
  content: "\f139";
}

アイコンを表示する方法は思いのほか簡単でしたね。「スタイルシート（css）を使ってアイコン表示をする方法」は急な修正に対応が効きやすいのでオススメです。

疑似要素（content）について詳しく知りたい方はこちらをどうぞ。
somegoro.hatenablog.com

スタイルシート（css）上で計算して値を設定する方法

スタイルシート（css）上で計算して値を設定する方法をご紹介します。

スタイルシート（css）の値を記載するところに、calc(計算式)といった具合に記載します。

例：

/* 横幅を設定 */
width: calc(100% - 8px);

上記の例では計算して値を算出、算出した値を横幅に設定しています。

これで簡単に計算した値を設定することが出来ます。

プロとして恥ずかしくない　新・CSSデザインの大原則

お問い合わせフォーム作ってみた。Googleフォームをはてなブログに適用

お問い合わせフォームを作ってみました。今回はGoogleフォームというWebサービスを使用しました。このサービスはかなり秀逸で上手くはてなブログに溶け込ませることが出来たと思います。

実物はこちら
somegoro.hatenablog.com

作り方

とても簡単に作れて便利なのでご紹介します。このGoogleフォームは無料で利用することが出来ます。必要なのはGoogleアカウントのみです。

１．Googleのサイトにアクセスする。
２．お問い合わせフォームを新規作成する。
３．必要事項を書き込んでいく。
４．回答先を設定する。
５．はてなブログに貼り付ける。

１．Googleのサイトにアクセスする。

Googleフォーム - 無料サービス こちらのサイトにアクセスして「Googleフォームを使う」ボタンをクリックします。

２．お問い合わせフォームを新規作成する。

右下の「」ボタンをクリックしてフォームを新規作成します。

３．必要事項を書き込んでいく。

回答してほしい事項を記載していきます。

ここでは私がお問い合わせフォームを作成したときの方法の一部を紹介します。

・「無題のフォーム」に「お問い合わせフォーム」と記載
・「無題の質問」に「お名前」と記載
・「ラジオボタン」を「記述式」に変更
・回答を必須にしたいので「必須 」をクリックして「必須 」に変更

もっと回答項目を増やしたい場合は、フォーム右横にある「」をクリックして質問項目を追加します。そして、上記手順で質問内容を書き込んでいきます。

４．回答先を設定する。

フォーム上部にある「回答」タブをクリックします。そして、フォーム右側にある「」みたいなボタンをクリックして「回答先を選択」から回答先を指定します。スプレッドシートとかよくわからない状態なら、デフォルトで指定されているとおり新規作成で進んでください。進んでいくうちにわかってきます。

問い合わせがあったときにメール通知が欲しい場合には、先ほど選択した「回答先を選択」の上にある「新しい回答についてメール通知を受け取る」にチェックを入れておきましょう。

５．はてなブログに貼り付ける。

右上の「送信」ボタンをクリックすると画面がポップアップされます。その画面で マークをクリックしてください。すると次の画面になります。

そこで表示されているHTMLタグをコピーします。コピーしたタグをはてなブログの記事に書き込めば今まで登録してきたお問い合わせフォームを使用することができるようになります。

以上でお問い合わせフォームの出来上がりです。この方法で設置したお問い合わせフォームでお問い合わせいただいた内容は、「４．回答を設定する。」で設定したスプレッドシートに表示されます。

私の場合は次のように表示されます。

自作するよりも簡単に作成することが出来ましたね。ただデザインが派手なので浮いてしまうこともあるかもしれません。その場合はGoogleフォームの旧バージョンを使用するとシンプルなデザインを使用することが出来ます。私はシンプルなデザインが好きなので旧バージョンを少々カスタマイズして使用しています。

旧バージョンと言いましたが、グーグルフォームはわりと最近のうちに新しいバージョンに更新されたようです。多くのブログで旧バージョンの説明がされていて、まだ新バージョンの説明が少ない状況です。正確にいつバージョン更新がなされたのかは調査していませんが、上記のような状況から割と最近のことなのでしょう。

新バージョンから旧バージョンへの変更方法や、デザインカスタマイズの方法は後日投稿いたします。

引用ルール知ってる？引用方法を引用して説明します。

ブログを書くにあたって、引用についての法律が気になったので調べてみました。

結論として、要件を満たしていれば了解なしで引用することができます。

法律の詳細

引用に関する法律の説明をしてくれているサイトはとても多いです。ですが、難解な言葉を多用しているものも多かったです。そんな中でも、次のサイトでの説明は非常に簡潔で明るい内容となっています。

[1]引用する資料等は既に公表されているものであること、[2]「公正な慣行」に合致すること、[3]報道、批評、研究などのための「正当な範囲内」であること、[4]引用部分とそれ以外の部分の「主従関係」が明確であること、[5]カギ括弧などにより「引用部分」が明確になっていること、[6]引用を行う必然性があること、[7]出所の明示が必要なこと

引用：http://chosakuken.bunka.go.jp/naruhodo/answer.asp?Q_ID=0000581

記述を整えるとこのとおりです。

１．引用する資料等は既に公表されているものであること

２．「公正な慣行」に合致すること

３．報道、批評、研究などのための「正当な範囲内」であること

４．引用部分とそれ以外の部分の「主従関係」が明確であること

５．カギ括弧などにより「引用部分」が明確になっていること

６．引用を行う必然性があること

７．出所の明示が必要なこと

要は、引用ってわかるようにすること。必要なときだけ引用すること。ってことですね。

Twitter社では

さらに、ツイッターにいたっては積極的に引用を薦めている記述がありました。

8. コンテンツおよび本サービスの利用に対する制限
Twitterサービスにおける禁止事項をより良く理解するために、「Twitterルール」(本規約の一部を構成しています) をご覧ください。当社は、いかなるときも、ユーザーに対して責任を負うことなく、本サービス上のコンテンツを削除しまたは配布を拒否し、利用者の利用停止または削除を行い、利用者名の返還を要求する権利を留保します (ただし、これは義務ではありません)。当社はさらに、(i) 適用あるすべての法令や規則、法的手続や政府の要請へ対応し、(ii) 本規約を実施し (規約違反の疑いがある場合にその調査を含みます)、(iii) 不正利用、セキュリティもしくは技術的な問題を検知、防止もしくはその対処をし、(iv) 利用者からのサポート要請へ対応し、または (v) Twitterやその利用者および社会全体の権利、財産もしくは安全を保護するために、当社が必要と合理的に判断するすべての情報について、アクセス、閲覧、保存、および公開する権利を留保します。

ヒント: Twitterは、当社のプライバシーポリシーの定めによる場合を除き、個人を特定するような情報を第三者に開示することはありません。

TwitterサービスまたはTwitterサービス上のコンテンツの複製、修正、これに基づいた二次的著作物の作成、配布、販売、移転、公表、実演、送信、または他の形での使用を望む場合には、Twitterサービス、本規約またはdev.twitter.comの定めにより認められる場合を除いて、Twitter APIを使用しなければなりません。

ヒント: 当社では、Twitterサービス上のコンテンツの幅広い再使用を奨励および容認しており、Twitter APIはこのために提供しています。

引用：Twitter サービス利用規約

Twitterは引用するためのAPIも用意してくれていますもんね。最近ではTwitterに画像をアップロードする方も多いですから、芸能記事なんか書くときにはツイッターを利用して書くのが良いですね。

まとめ

引用ルールに関する規制は意外と緩いものでした。知らないと引用記事ひとつ書くのも不安ですが、もうそのような心配はいりませんね。なお、私の書いた記事もどんどん引用していただいて構いませんのでルールに則ってどうぞ。

HTMLのみでアイコンを表示させる方法。時計・家・カメラなど

今回の記事では、次のようなアイコンを使う方法をご紹介します。

アイコンを自由に使えることが出来れば表現の幅が大きく広がることでしょう。上記アイコン以外にも沢山の種類のアイコンが使用できます。それらの方法をまとめてご紹介します。ですので、きっとご自分の好きなものも見つかると思いますよ。

アイコンを表示する方法

アイコンを表示する方法はいくつかあります。この記事では「HTMLのみを使用して表示する」方法を記載します。この方法では次の２ステップで済みますのでとても簡単です。

簡単２ステップ
１．HTMLファイル先頭にリンクを書く
２．アイコンを表示したい場所にタグを書く

それでは具体的な方法を記載していきます。

１．HTMLファイル先頭にリンクを書く

まずはHTMLファイルの先頭に次のように記載します。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

これは何をしているかというと、Webにアクセスしてファイルを読み込んでいます。はてなブログではヘッダのタイトル下（HTMLを記述できます）の部分に記載しておくと良いかと思います。

２．アイコンを表示したい場所にタグを書く

アイコンを表示したい場所に次のようにタグを書きます。具体的な書き方として６種類とりあげます。

カメラアイコン

HTML で次のように書くとアイコンが表示されます。

<i class="fa fa-camera-retro"></i>

チェック

HTML で次のように書くとアイコンが表示されます。

<i class="fa fa-check-square-o"></i>

時計

HTML で次のように書くとアイコンが表示されます。

<i class="fa fa-clock-o"></i>

家

HTML で次のように書くとアイコンが表示されます。

<i class="fa fa-home"></i>

上へ

HTML で次のように書くとアイコンが表示されます。

<i class="fa fa-angle-up"></i>

上へ（丸囲み）

HTML で次のように書くとアイコンが表示されます。

<i class="fa fa-chevron-circle-up"></i>

アイコンを表示する方法は思いのほか簡単でしたね。次のサイトFont Awesome IconsでアイコンをWEB上にアップしてくれています。記事で取り上げたアイコンの他にもたくさんのアイコンがあります。気になる方はサイトの icons タブから確認してみてください。
fontawesome.io

CSSでアイコン表示したい方はこちらへどうぞ。
somegoro.hatenablog.com

うまくアイコン表示されない方へ

上記の方法でやってみて、望むアイコンが表示されずに□で表示されてしまった方はいますかね。私自身が最初にやったときにそのようになりました。これは手順「１．HTMLファイル先頭にリンクを書く」が上手くできていないことが原因です。ですので、もう一度その部分を確認してみてください。

デザイン編集は時間がかかりますよね。それはアイコンを取り入れて表現の幅を広げるとさらに助長されます。そして、編集してたらいつのまにか夜中なんてことが多々あることでしょう。色々なことが絡み合い時間のかかる原因になっていると思いますが、その内の一つとして「デザインルールが決まっていないから」ということはないでしょうか。

伝わるデザインの基本 よい資料を作るためのレイアウトのルール

どちらのキャリアを望むのか考える「フリーランスSE」「紹介予定派遣」

フリーランスSEになるにあたって、エージェント企業を調べてみました。

フリーランスSEになることを決めた経緯はこちらから
http://somegoro.hatenablog.com/entry/2016/06/28/202126somegoro.hatenablog.com

どのエージェント企業が良いのか

フリーランスSEのエージェント業界は参入障壁が低いためか、多くの新規企業があります。どの企業が良いのかは正直わかりません。ですのでWeb上で評判をざっくり見て、スピード感重視で体当たりしてみようと思います。

Web上で見る限り、親切な対応をしてくれそうな３社をピックアップしました。

フリーランスのエージェント企業
・geechs job
・ITプロパートナーズ
・レバテック

上記の企業に連絡することを決めて、同棲している彼女にフリーランスとして働こうと思っている旨を報告をしました。

すると、彼女は「派遣でも良いんじゃないの？特に紹介予定派遣とか良いじゃん。」と。よくよく話してみると、彼女はどこの馬の骨ともわからないエージェントに中間マージンを払って高給を得ることよりも、給料が安くとも私の好きな航空宇宙業界に貢献した方が幸せなのではないかということでした。

派遣の方が良いかもしれない

確かに、派遣でも今の課題として抱えている次の２点を解決することが出来そうではあります。

・稼げる金額がちょこちょこ過ぎる。
・転職活動が上手くいかない。

しかも、紹介予定派遣でも派遣先企業が合わないと感じたなら正社員契約しなくても良い。中間に企業が入らないので安心感が増す。派遣として働く場合、給料は安いがその分が航空宇宙の発展に使われるのであれば嬉しい。など良いことは割りとありそうです。

ということで、派遣のエージェント企業を調べてみました。もしかしたら派遣の方が良いのかもしれません。

紹介予定派遣
・インテリジェンスの人材派遣
・マイナビ派遣
・リクナビ派遣
・エン派遣

まとめ

女性は危険や安全を察知する能力が、男性より優れていると脳科学の本で見たことがあります。大昔の名残だそうです。確かに、知り合いから私は「前向き」「挑戦」などという言葉を使って表現されることが多いです。これは逆に危険察知能力が低いために出来る行動から、そう表されるのかもしれません。

今回の選択では全く考えていなかった「派遣」という選択肢を与えてくれたことは非常に有りがたいことでした。引き続き情報収集し、自分の望むことが出来る選択を考えていきます。

スタイルシート（css）の「 content 」について

今回は、スタイルシート（css）の「 content 」についてご紹介します。

何に適用できるのか

contentは、疑似要素の「before」「after」のみに適用することが出来ます。

何が出来るのか

「content」には文字列や画像を指定することが出来ます。疑似要素「before」「after」は指定した要素前後に挿入する要素でした。

ですので、「before」「after」「content」を合わせて使用することで要素の前後に文字列や画像を挿入することが出来ます。

実際に使用している例は次の記事になります。
somegoro.hatenablog.com

「content」に指定できるもの

「content」に指定できるのは文字列や画像だけではありません。次のものを指定することが出来ます。

・文字列
・URI（URL）
・カウンタ
・属性
・引用符

詳しく見ていきましょう。

・文字列

先ほど取り上げた記事中で紹介したとおりの文字列です。

例：content:"うん、";

・URI（URL）

ファイルの場所を指定して、画像や音声を指定することが出来ます。

例：content: url("../2016-test_icon.gif");

・カウンタ

自動で連番を割り当てることが出来ます。

例：content: counter();

・属性

attr()で属性の名前を指定することが出来ます。attr(alt)とすると、alt属性で指定となります。

例：content: attr(alt);

・引用符

開始引用符（open-quote）と終了引用符（close-quote）をそれぞれ指定することが出来ます。

例：content: open-quote;

以上、「 content 」についてご紹介でした。疑似要素を使用できるようになると表現方法が飛躍的に向上するので便利ですよ。より詳しくスタイルシート(css)を学びたい方はこちらをどうぞ。

HTML5&CSS3レッスンブック

flexbox でレスポンシブデザインを作る方法（その２）横幅が足りなくなったら複数行にする

今回は「flexboxプロパティ」を使用して、横幅が足りなくなったら複数行にするデザインを作っていきます。

まずは完成図です。

１．横幅が足りるときはこのとおり。

子２は固定幅で 300px とします。

２．そして横幅が足りなくなると、複数行で表示されます。縦に表示するってことですね。

このとき、子１の最小幅は 300px とします。

それでは実際の設定の仕方を見ていきましょう。

親要素に指定するスタイルシート

display: flex;
display: -webkit-flex;/* safari用 */
flex-wrap: wrap;
-webkit-flex-wrap: wrap;/* safari用 */

子１要素に指定するスタイルシート

flex: 1
min-width : 300px;

子２要素に指定するスタイルシート

width : 300px;

これだけです。簡単に横幅可変長かつ、横幅が足りなくなったら複数行にすることが出来ましたね。

CSS3デザインブック 仕事で絶対に使うプロのテクニック

この記事からの応用でした。
somegoro.hatenablog.com

（追記）この記事がかなり参考になりました。
floatより辛くない「flexbox」でざっくりレイアウト - Qiita

flexbox でレスポンシブデザインを作る方法（その１）横幅を伸ばす

レスポンシブデザインを作るにあたって、flexbox は非常に有用です。今回はその「flexboxプロパティ」を使用して横幅が可変なデザインを作っていきます。

まずは完成図です。

指定した要素を伸ばすことで可変長のデザインを実現しています。このようにすれば、ちまちまとピクセル指定しなくても横幅ピッタリのデザインが作成できますね。

それでは実際の設定の仕方を見ていきましょう。

親要素に指定するスタイルシート

display: flex;
display: -webkit-flex;/* safari用 */

子１要素に指定するスタイルシート

flex: 1

子２要素に指定するスタイルシート

width : 300px;

これだけです。簡単に可変長に設定することが出来ましたね。

CSS3デザインブック 仕事で絶対に使うプロのテクニック

CSS擬似要素 ::before ::after の使い方

擬似要素 ::before ::after の使い方 をご紹介します。

「擬似要素 ::before ::after」は指定した要素の前後に挿入されます。

例を出して、実際に確かめてみましょう。

スタイルシート(css)

p::before {content:"まぁ、";}
p::after {content:"うん、たぶん。";}
strong::before {content:"！";}
strong::after {content:"！";}

※content についての説明はこちらをどうぞ→「 content 」について - 生活情報オンライン

HTML

<p>ブログは毎日書いた方が良い。</p>
<p>それはまさに<strong>真理</strong>です。</p>
<p>あの<strong>Google先生</strong>もそうおっしゃっていました。</p>

普通ならこう表示されます。

ブログは毎日書いた方が良い。

それはまさに真理です。

あのGoogle先生もそうおっしゃっていました。

疑似要素 ::before ::after のスタイルシート(css)を読み込むとこう表示されます。

まぁ、ブログは毎日書いた方が良い。うん、たぶん。

まぁ、それはまさに！真理！です。うん、たぶん。

まぁ、あの！Google先生！もそうおっしゃっていました。うん、たぶん。

この疑似要素の他用途としては、「影付き図」や「float解除」などに応用が効きます。

疑似要素は古くから存在していましたが、css3になって微妙に書き方が変化しています。今回の記事に記載したのはいずれもcss3に対応した書き方です（::before ::after）。詳細はこちらへどうぞ。

CSS3デザインブック 仕事で絶対に使うプロのテクニック

後書き：
最高に思われた::before ::after ですが、画像サイズの調整が出来ないようですね。
height width が効かないようです。background で画像表示するとサイズ指定は出来るのですが画像が全体表示されなくなってしまいます。
この辺りの解決方法を探しています。transform:scale()で良い調整の方法ないかなぁ。。

アソシエイト規約？記載必要なし→Amazon.co.jpを宣伝しリンク～

Amazonアソシエイトの規約についてのお話しです。

こうやって↓のように記載しないとダメですよと紹介しているブログは非常に多いです。

当ブログは、Amazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、Amazonアソシエイト・プログラムの参加者です。

しかし、コレ。書く必要ないんです。

サイト上のどこかに「Amazon.co.jpアソシエイト」と記載すればいいのです。

規約を読んでみましょう。

10. 乙がアソシエイトであることの表示

乙は、本規約、乙による甲のコンテンツの使用、または本プログラムへの乙の参加に関して、いかなるプレスリリースの発行も、その他の発表・広告もしないものとします。乙は、本規約により明示的に許可される以外には、甲と乙との関係につき不実表明や誇張（甲が慈善活動やその他の運動を支援、後援、支持または貢献しているという表明または暗示を含む。）をせず、甲と乙の間、またはその他のいかなる個人もしくは企業との間の関係または提携を表明したり暗示したりしないものとします。乙のサイト上のどこかに「Amazon.co.jpアソシエイト」、または「[乙の名称を挿入]は、Amazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、Amazonアソシエイト・プログラムの参加者です。」の文言を表示しなければなりません。甲は、この文言あるいはグラフィックロゴを適時変更することがあります。

引用：アソシエイト・セントラル - Amazonアソシエイト・プログラム運営規約

確認できたでしょうか。「または」ですからね。どちらかで良いのですね。

[asin:B006DTPMIM:detail]