画像の一括ダウンロードにDownThemAll!

さくらブログからWordPressへの引っ越しに関して記事の移動は問題なくてきました。

さくらのブログはMovableTypeなのでインポートエクスポートでMTを選ぶだけです。

 

でも画像のパスがさくらのブログのままなので、どうしたものかと。

とりあえず画像をダウンロードしようとファイルマネージャーに入ってみましたが、画像が保存されているフォルダが見当たらない。

悩んだ結果、さくらのブログのファイルマネージャーからダウンロードすることにしました。

ひとつひとつダウンロードするのは手間なのでFIrefoxのアドオン【DownThemAll!】を使用しました。

DownThemAll!はフィルタ機能もついている一括ダウンローダーです。

 

Firefoxのツールメニューのアドオンを開いて、DownThemAll!を検索します。

インストールしたら、さくらのブログのファイルマネージャーページ上で右クリック!

DownThemAll!というメニューがあるのでそこからダウンロードウインドウを開きます。

ダウンロードするファイルを選択したりフィルタで振り分けたりできます。

 

以上で画像のダウンロードは完了です。

作業時間10分でした。

※ダウンロードした画像はサムネイル画像です。

CSS3勉強会のフォローアップ其の3

またまた勉強会のフォローアップ続きです。

フレキシブルボックスレイアウト

dispaly:flex フレキシブルボックスレイアウト

displayプロパティの値にflexを指定するだけで子要素は横に並びます。

.flex01{
     width:500px;
     display:-webkit-flex;
     display:flex;
     border:1px solid #000;
}
.flex01 > p{
     padding:1em;
}
<div class="flex01">
<p>フレキシブルボックスレイアウトのサンプルテキストです。</p>
<p>フロートやポジションを使用しなくても段組みが作れるようになります。</p>
<p>フレキシブルボックスレイアウトのサンプルテキストです。フロートやポジションを使用しなくても段組みが作れるようになります。</p>
</div>

フレキシブルボックスレイアウトのサンプルテキストです。

フロートやポジションを使用しなくても段組みが作れるようになります。

フレキシブルボックスレイアウトのサンプルテキストです。フロートやポジションを使用しなくても段組みが作れるようになります。

フレキシブルボックスレイアウトはまだ仕様が固まっていないようなので今後に注目しましょう。

その他今すぐ使えるCSS3

box-sizing ボックスサイジング

ボックスモデルの横幅の計算方法が選べます。
box-sizing:content-box css2.1までの計算方法
box-sizing:border-box widthで指定した幅にpaddingとborderのサイズを含める

.boxsizing01{
     width:500px;
     padding:1em;
     border:1px solid #000;
     -webkit-box-sizing:content-box;/*css2.1*/
     -moz-box-sizing:content-box;/*css2.1*/
     box-sizing:content-box;/*css2.1*/
     margin-bottom:1em;
}
.boxsizing02{
     width:500px;
     padding:1em;
     border:1px solid #000;
     -webkit-box-sizing:border-box;/*css3*/
     -moz-box-sizing:border-box;/*css3*/
     box-sizing:border-box;/*css3*/
}
<div class="boxsizing01">
box-sizing:content-box;/*これまで通り*/
</div>
<div class="boxsizing02">
box-sizing:content-box;/*css3*/
</div>
content-box; widthの指定にpaddingやborderは含まない
border-box;  ボーダーまで含めて500px

transform 変形

移動・拡大縮小・回転・歪みなどの変形が指定できます。

.transform00{
     width:200px;
     height:200px;
     line-height:200px;
     text-align:center;
     background-color:#ccc;
     -webkit-transform:translate(0,0);/*移動なし*/
     -moz-transform:translate(0,0);/*移動なし*/
     transform:translate(0,0);/*移動なし*/
     margin-bottom:1em;
}
.transform01{/*移動*/
     width:200px;
     height:200px;
     line-height:200px;
     text-align:center;
     background-color:#ccc;
     -webkit-transform:translate(40px,20px);/*右に40px下に20px移動*/
     -moz-transform:translate(40px,20px);/*右に40px下に20px移動*/
     transform:translate(40px,20px);/*右に40px下に20px移動*/
     margin-bottom:1em;
}
.transform02{/*拡大縮小*/
     width:200px;
     height:200px;
     line-height:200px;
     text-align:center;
     background-color:#ccc;
     -webkit-transform:scale(1.5,0.5);/*幅が1.5倍。高さが0.5倍*/
     -moz-transform:scale(1.5,0.5);/*幅が1.5倍。高さが0.5倍*/
     transform:scale(1.5,0.5);/*幅が1.5倍。高さが0.5倍*/
     margin-bottom:1em;
}
.transform03{/*回転*/
     width:200px;
     height:200px;
     line-height:200px;
     text-align:center;
     background-color:#ccc;
     -webkit-transform:rotate(45deg);/*45度回転*/
     -moz-transform:rotate(45deg);/*45度回転*/
     transform:rotate(45deg);/*45度回転*/
     margin-bottom:1em;
}
.transform04{/*拡大縮小で変形の基準点を変更*/
     width:200px;
     height:200px;
     line-height:200px;
     text-align:center;
     background-color:#ccc;
     -webkit-transform:scale(1.5,0.5);
     -moz-transform:scale(1.5,0.5);
     transform:scale(1.5,0.5);
     -webkit-transform-origin:0 0;/*左上基準(デフォルトは中心50%50%)*/
     -moz-transform-origin:0 0;/*左上基準(デフォルトは中心50%50%)*/
     transform-origin:0 0;/*左上基準(デフォルトは中心50%50%)*/
     margin-bottom:1em;
}
<div class="transform00">
移動なし
</div>
<div class="transform01">
右に40px下に20px移動
</div>
<div class="transform02">
幅が1.5倍。高さが0.5倍
</div>
<div class="transform03">
45度回転
</div>
<div class="transform04">
変形の基準点を変更
</div>
移動なし
右に40px下に20px移動
幅が1.5倍。高さが0.5倍
45度回転
変形の基準点を変更

CSS3勉強会のフォローアップ其の2

勉強会のフォローアップ続きです。

マルチカラムレイアウト

column-width カラム幅

カラムひとつ分の幅を指定します。

.column01{
     width:500px;
     -webkit-column-width:24px;
     -moz-column-width:240px;
     column-width:240px;
     border:1px solid #000;
     color:#666;
}
<div class="column01">
<p>マルチカラムレイアウトのサンプルテキストです。フロートやポジションを使用しなくても段組みが作れるようになります。でもスマホ用サイトって段組みの表現はあまり見ないですよね。マルチカラムレイアウトのサンプルテキストです。フロートやポジションを使用しなくても段組みが作れるようになります。でもスマホ用サイトって段組みの表現はあまり見ないですよね。</p>
</div>

マルチカラムレイアウトのサンプルテキストです。フロートやポジションを使用しなくても段組みが作れるようになります。でもスマホ用サイトって段組みの表現はあまり見ないですよね。マルチカラムレイアウトのサンプルテキストです。フロートやポジションを使用しなくても段組みが作れるようになります。でもスマホ用サイトって段組みの表現はあまり見ないですよね。

column-count カラム数

カラムの数を指定します。
幅は自動的に計算されて表示されます。

.column02{
     width:500px;
     -webkit-column-count:2;
     -moz-column-count:2;
     column-count:2;
     border:1px solid #000;
     color:#666;
}
<div class="column02">
<p>マルチカラムレイアウトのサンプルテキストです。フロートやポジションを使用しなくても段組みが作れるようになります。でもスマホ用サイトって段組みの表現はあまり見ないですよね。マルチカラムレイアウトのサンプルテキストです。フロートやポジションを使用しなくても段組みが作れるようになります。でもスマホ用サイトって段組みの表現はあまり見ないですよね。</p>
</div>

マルチカラムレイアウトのサンプルテキストです。フロートやポジションを使用しなくても段組みが作れるようになります。でもスマホ用サイトって段組みの表現はあまり見ないですよね。マルチカラムレイアウトのサンプルテキストです。フロートやポジションを使用しなくても段組みが作れるようになります。でもスマホ用サイトって段組みの表現はあまり見ないですよね。

column-gap カラム間の幅

カラム間の幅を指定します。

.column03{
     width:500px;
     -webkit-column-count:2;
     -moz-column-count:2;
     column-count:2;
     -webkit-column-gap:100px;
     -moz-column-gap:100px;
     column-gap:100px;
     border:1px solid #000;
     color:#666;
}
<div class="column03">
<p>マルチカラムレイアウトのサンプルテキストです。フロートやポジションを使用しなくても段組みが作れるようになります。でもスマホ用サイトって段組みの表現はあまり見ないですよね。マルチカラムレイアウトのサンプルテキストです。フロートやポジションを使用しなくても段組みが作れるようになります。でもスマホ用サイトって段組みの表現はあまり見ないですよね。</p>
</div>

マルチカラムレイアウトのサンプルテキストです。フロートやポジションを使用しなくても段組みが作れるようになります。でもスマホ用サイトって段組みの表現はあまり見ないですよね。マルチカラムレイアウトのサンプルテキストです。フロートやポジションを使用しなくても段組みが作れるようになります。でもスマホ用サイトって段組みの表現はあまり見ないですよね。

column-rule カラム間の境界線

カラム間の境界線をボーダープロパティと同じように指定できます。

.column04{
     width:500px;
     -webkit-column-count:2;
     -moz-column-count:2;
     column-count:2;
     -webkit-column-gap:100px;
     -moz-column-gap:100px;
     column-gap:100px;
     -webkit-column-rule:#666 solid 1px;
     -moz-column-rule:#666 solid 1px;
     column-rule:#666 solid 1px;
     border:1px solid #000;
     color:#666;
}
<div class="column04">
<p>マルチカラムレイアウトのサンプルテキストです。フロートやポジションを使用しなくても段組みが作れるようになります。でもスマホ用サイトって段組みの表現はあまり見ないですよね。マルチカラムレイアウトのサンプルテキストです。フロートやポジションを使用しなくても段組みが作れるようになります。でもスマホ用サイトって段組みの表現はあまり見ないですよね。</p>
</div>

マルチカラムレイアウトのサンプルテキストです。フロートやポジションを使用しなくても段組みが作れるようになります。でもスマホ用サイトって段組みの表現はあまり見ないですよね。マルチカラムレイアウトのサンプルテキストです。フロートやポジションを使用しなくても段組みが作れるようになります。でもスマホ用サイトって段組みの表現はあまり見ないですよね。

マルチカラムレイアウトまとめ

マルチカラムレイアウトを使った段組みのサンプルです。
2段組み、間隔30px、境界線付き。

.column05{
     width:500px;
     -webkit-column-count:2;
     -moz-column-count:2;
     column-count:2;
     -webkit-column-gap:30px;
     -moz-column-gap:30px;
     column-gap:30px;
     -webkit-column-rule:#666 solid 1px;
     -moz-column-rule:#666 solid 1px;
     column-rule:#666 solid 1px;
     border:1px solid #000;
     padding:1em;
     text-align:justify;
     color:#666;
}
<div class="column05">
<p>マルチカラムレイアウトのサンプルテキストです。フロートやポジションを使用しなくても段組みが作れるようになります。でもスマホ用サイトって段組みの表現はあまり見ないですよね。マルチカラムレイアウトのサンプルテキストです。フロートやポジションを使用しなくても段組みが作れるようになります。でもスマホ用サイトって段組みの表現はあまり見ないですよね。</p>
</div>

マルチカラムレイアウトのサンプルテキストです。フロートやポジションを使用しなくても段組みが作れるようになります。でもスマホ用サイトって段組みの表現はあまり見ないですよね。マルチカラムレイアウトのサンプルテキストです。フロートやポジションを使用しなくても段組みが作れるようになります。でもスマホ用サイトって段組みの表現はあまり見ないですよね。

CSS3勉強会のフォローアップ其の1

昨日はお疲れ様でした。
私自身も非常に勉強になりました。
勉強会中ではソースコードやプレビューなどお見せできませんでしたので、以下でフォローしておきます。

webフォント

  1. グーグルフォントにアクセスします。
  2. 使用したいフォントが決まったら、Quick-useのボタンをクリック。
  3. 3番のフォントを読み込む設定を選びます。
  4. 4番のサンプルのようにフォントを適用したいセレクタにfont-familyを指定します。
.sample{
     font-family: 'Peralta', cursive;
}
<p class="sample">webfont</p>

結果は以下のようになります。
webfont

ドロップシャドウ

box-shadow ボックスシャドウ

ボックスに影をつけます。
値は順番に横移動距離・縦移動距離・ぼかす幅・影の色になります。

.shadow01{
     box-shadow:5px 10px 3px #ccc;
     width:200px;
     height:60px;
     border:1px solid #000;
}
<p class="shadow01">box-shadow</p>

box-shadow

さらに4つ目の数値を入れることができます。
これは広がる幅の指定になります。

.shadow02{
     box-shadow:5px 10px 3px 5px #ccc;
     width:200px;
     height:60px;
     border:1px solid #000;
}
<p class="shadow02">box-shadow</p>

box-shadow

わかりにくいので縦横は移動しないようにします。

.shadow03{
     box-shadow:0 0 3px 5px #ccc;
     width:200px;
     height:60px;
     border:1px solid #000;
}
<p class="shadow03">box-shadow</p>

box-shadow

値の先頭にinsetを指定すると内側に影がつきます。

.shadow04{
     box-shadow:inset 0 0 3px 5px #ccc;
     width:200px;
     height:60px;
     border:1px solid #000;
}
<p class="shadow04">box-shadow</p>

box-shadow

text-shadow テキストシャドウ

ボックスシャドウとほぼ指定の仕方は同じですが、insetの指定はてきません。
カンマで区切って複数の影をつけられます。

.shadow05{
     text-shadow:0 -1px 1px #000,0 1px 1px #fff;
     font-size:2em;
     color:#666;
     background-color:#eee;
     padding:#eee;
}
<p class="shadow05">テキストシャドウ</p>

テキストシャドウ

透明度

opacity オパシティ

ボックス内のものすべての透明度をコントロールします。

.alpha01{
     width:300px;
     background-color:#ccc;
     opacity:0.5;
}
<p class="alpha01">
opacity
<img src="photo.jpg" alt="" />
</p>

opacity
IMG_1599テキストも画像も透明度が50%になりました。

rgba RGBA

colorやbackground-colorプロパティで使用できます。

.alpha02{
     width:300px;
     height:100px;
     background-color:rgba(255,0,0,0.5);
     padding:10px;
}
<p class="alpha02">rgba</p>

rgba
テキストの透明度は変わらず背景だけが透明度50%になりました。

グラデーション

linear-gradient 水平垂直グラデーション

水平や垂直方向のまっすぐなグラデーションです。

.gra01{
     width:300px;
     height:100px;
     background: #87e0fd; /* Old browsers */
     background: -moz-linear-gradient(top, #87e0fd 0%, #05abe0 100%); /* FF3.6+ */
     background: -webkit-linear-gradient(top, #87e0fd 0%,#05abe0 100%); /* Chrome10+,Safari5.1+ */
     background: -o-linear-gradient(top, #87e0fd 0%,#05abe0 100%); /* Opera 11.10+ */
     background: -ms-linear-gradient(top, #87e0fd 0%,#05abe0 100%); /* IE10+ */
     background: linear-gradient(to bottom, #87e0fd 0%,#05abe0 100%); /* W3C */
}
<p class="gra01">linear-gradient</p>

linear-gradient

3色4色のグラデーションにするには、カンマで区切って色と%を指定します。

radial-gradient 放射状グラデーション

放射状に広がる円形グラデーションです。

.gra02{
     width:300px;
     height:100px;
     background: #87e0fd; /* Old browsers */
     background: -moz-radial-gradient(center, ellipse cover, #87e0fd 0%, #05abe0 100%); /* FF3.6+ */
     background: -webkit-radial-gradient(center, ellipse cover, #87e0fd 0%,#05abe0 100%); /* Chrome10+,Safari5.1+ */
     background: -o-radial-gradient(center, ellipse cover, #87e0fd 0%,#05abe0 100%); /* Opera 12+ */
     background: -ms-radial-gradient(center, ellipse cover, #87e0fd 0%,#05abe0 100%); /* IE10+ */
     background: radial-gradient(ellipse at center, #87e0fd 0%,#05abe0 100%); /* W3C */
}
<p class="gra01">radial-gradient</p>

radial-gradient

カッコの中に左から、グラデーションの中心位置・形状・大きさ・開始色位置・終了色位置になります。
形状はcircle(正円)かellipse(楕円)を選択します。
大きさはcontain(全体がおさまるサイズ)やcover(全体をおさめる大きさ)など指定できます。

グラデーションは難しいので個人的にはジェネレーターを使って作ってしまいます。
http://www.colorzilla.com/gradient-editor/

角丸

border-radius 角丸

ボックスの角を丸くできます。

.radius01{
     width:200px;
     height:100px;
     padding:10px;
     background-color:#ccc;
     border-radius:5px 0px 30px 15px;
}
<p class="alpha01">border-radius</p>

border-radius
ボックスの角が丸くなりました。

値は順番に、左上・右上・右下・左下と時計回りに指定します。

.radius02{
     width:200px;
     height:200px;
     background-color:#ccc;
     text-align:center;
     line-height:200px;
     border-radius:50%;
}
<p class="alpha01">正円</p>

正円

長くなりましたので続きはまたあとでアップします。

Illustratorで複合シェイプの解除

デザイナーさんからもらったイラストレーターのデータを編集していたら、グループでもないしマスクでもないし複合パスでもないオブジェクトがありました。

どうしてもそのオブジェクトを編集したかったので、調べてみたら複合シェイプというものだったことが判明。

複合シェイプとは

通常パスファインダパネルを利用してオブジェクトを合体したり型抜きすると、ひとつのオブジェクトに変換されます。

しかし、パスファインダパネルのアイコンをクリックするときにoptionキー(winはAlt)を押しながらクリックすると元のオブジェクトのまま見た目だけひとつのものに変換してくれます。

複合シェイプ

図のピンクのが複合シェイプになっているオブジェクトを選択したときの様子。
下はパスファインダを使用する前の状態。

複合シェイプならば個々のオブジェクトをグループ選択ツールで選んで微調整が可能になります。

今回やりたかったことは、複合シェイプの解除だったので、それはパスファインダパネルのオプションからできました。

 

イラストレーターでは今回の複合シェイプやアピアランス、フォトショップではレイヤースタイル調整レイヤースマートフィルターなど再編集可能な状態でデータを制作できるように進化しているのを感じます。

特に他人にデータを共有する場合は、このような機能を使って制作すると感謝されそうです。

 

 

ドットインストールのTシャツが届きました

お気に入りのウェブサービスのひとつであるドットインストールTシャツが届きました。

ドットインストールとは動画1本が3分のプログラミング学習サイトです。

私もこれまで、HTML,CSS,JavaScript,Twitter Bootstrapなどを見て勉強しています。

1本3分なので本当に気軽に見れるので、ヒューマンの受講生にも必ず紹介しています。

ドットインストールTシャツ

このTシャツの売り上げはサイトの運営に利用されるそうです。

もっともっと充実したサイトになると私もうれしいので応援のために今回購入しました。

おまけでステッカーも付いていて、次に買う予定のMacに貼ろうかな〜と思っています。

来週の講義で着ていこう!

TalkNote第8回に参加してきました

珍しく土曜日の講義が休みだったのでTalkNote(Webのセミナー)に参加してきました。

http://talknote.me/vol8/event/

サイバーエージェントのWebディベロッパーの方々4名を講師に迎えて、主にcss,jQuery,javascript関連の内容でした。

かなり高度な内容で疲れましたが、いい刺激になりました。

 

超!短くまとめるとCSSもjavascriptも【設計】が大事だよねっていう話し。

もうちょっと説明するなら、Webって更新していくものだから保守・再利用・拡張ができるように作るべきだよね。

それにはSAASやBackbone.jsがあるよ。って感じでしょうか。

 

 

個人的には身近な存在のCSSのセッションがおもしろかったです。

スケジュールが合わなくて、なかなか勉強会やセミナーに参加できませんが本当はもっと参加したいと常々思っています。

 

 

2013/6/14追記

描画パフォーマンスの改善について詳しく記述してあるページを見つけました。

http://blog.cacoo.com/ja/2013/06/03/web-paint-performance/

WordPress10周年のTシャツが届いた

2013年5月27日はワードプレス10周年記念日です。

世界中でイベントが開催されるようで、私もいつもお世話になっているお礼にTシャツを購入してみました。

イベント一覧ページ

http://www.meetup.com/WordPress/

10周年記念Tシャツ購入

http://hellomerch.com/collections/wordpress/products/wordpress-10th-anniversary-t-shirt

IMG_1141

価格は10ドルですが、ロサンゼルスから送られてくるため送料が15ドルかかります。色はグレーと黒の2色あります。

静岡でイベントあるかな〜と探したけど、ない!
というか27日は浜松で講義があって無理だった。残念。

でもその日はTシャツを着て出かけようと思っています。

 

今日のノラ猫

IMG_1142

HTML&CSSで一冊辞典を持つなら

HTML&CSSを学習するとき、手元に辞典があると助かります。
ネットで検索して調べてもいいですが、本で持っているのが一番だと思います。

通常、辞典というのは分厚くて重いものです。

でもこれは片手で持てるぐらいコンパクトで分厚くもありません。
オールカラーなのに値段も1380円。

内容は、
HTMLについては「文書を構造化して機械が利用できる状態にする」
CSSは「視覚表現を指定するための技術」と、
単なるタグ・プロパティの辞典ではなく基本から紹介されています。

またHTML5&CSS3はもちろんのこと、リセットCSSとノーマライズCSSについて。
ビューポートの説明、ソーシャルボタンの設置方法、レイアウトサンプルと盛りだくさんです。

これ一冊を読んで理解できればHTML&CSSの基礎に関してはOKだと思います。

わたしは、電車の中で読もうと思い購入しました。
辞典じゃなくて事典なんですね。

IMG_1121

  • HTML&CSS逆引き大事典
  • 出版社: 技術評論社 (2013/5/8)
  • ISBN-10: 4774156329
  • ISBN-13: 978-4774156323
  • 発売日: 2013/5/8

Webデザイン技能検定2級実技のフォーム問題の解き方

Webデザイン技能検定2級の実技試験の最後にフォームを作成する問題があります。

都道府県を選択するセレクトメニューを作る問題です。

北海道から沖縄までのテキストデータが素材として配られます。これを使ってフォームを作ります。
htmlだけで作っても合格できますが、たぶん時間が足りなくなると思いますのでjavascriptで楽した方がいいと思います。

<form method="post" action="">
<script type="text/javascript">

var pref = new Array(
"北海道",
"青森県",
"秋田県","岩手県","山形県","宮城県","福島県",
"茨城県","栃木県","群馬県","埼玉県","神奈川県","千葉県","東京都",
"山梨県","長野県","新潟県","富山県","石川県","福井県","岐阜県","静岡県",
"愛知県","三重県","滋賀県","京都府","大阪府","兵庫県","奈良県","和歌山県",
"鳥取県","島根県","岡山県","広島県","山口県",
"徳島県","香川県","愛媛県","高知県",
"福岡県","佐賀県","長崎県","熊本県","大分県","宮崎県","鹿児島県","沖縄県"
);

document.write('<select name="prefecture">');

for (var i=0 ; i<=46 ; i++){
document.write('<option value="'+pref[i]+'">'+pref[i]+'</option>');
}

document.write('</select>');

</script>
</form>