2014-06-24

CSS3 演習問題

授業 CSS3

CSS3 演習問題　の解答

【問１】CSS3で影をつける場合の、プロパティ名を２つ書きなさい

【答１】box-shadow　text-shadow

※ 答えをクリックすると詳しい内容がわかります。

【問２】CSS3で影をつける場合、プロパティに設定する4つのパラメータ

のうち、1つ目のパラメータは何を設定するか書きなさい

【答２】X軸方向（横方向）のずれの距離

※　参照サイトへ

【問３】CSS3で角を丸くする場合の、プロパティ名を書きなさい

【答３】border-radius

※　参考ページ

【問４】CSS3で角を丸くする場合の、値は何を設定しているかを書きなさい

【答４】角を丸くする円の半径

※　参考ページ

【問５】Chromeとサファリのベンダープレフィックスを書きなさい

【答５】-webkit-

※ -webkit-には、Operaも含まれる。

※ -moz- は Firefox

※ -ms- は Internet Explorer

こちらを参照

【問６】CSS3で直線的なグラデーションをつける場合の、プロパティを

書きなさい（ベンダープレフィックスは、記述しない）

【答６】background-image: linear-gradient(　)

※　参考ページ

【問７】半透明の表現をするには、対象の要素に対してどの関数を設定すれば

よいか書きなさい

【答７】rgba( )

※ a はアルファの意

※　参考ページ

【問８】CSS3で要素を回転したり、拡大縮小したり、歪曲させること設定する

プロパティは何か書きなさい

【答８】transform

※　参考ページ

【問９】Webの通常フォント以外のフォントを使用したい場合、どの

ディレクティブで使用するフォントを定義する必要があるか書きなさい

【答９】@font-face

【問10 】次のスタイルは、どのような設定か説明しなさい

td:nth-child(n+2) { text-align: right; }

【答10】最初の td をのぞく2番目以降の td のセル内容を右寄せに設定

※　参考ページ

【問11 】次のスタイルは、どのような設定か説明しなさい

tr:nth-of-type(even) { background-color: #F3F3F3; }

【答11】偶数番目のtrの行の背景色をカラーコード#F3F3F3に設定

※ even　は偶数の意

※　参考ページ

【問12 】CSS3で要素を回転して表示する設定を書きなさい

　（ベンダープレフィックスは、記述しない）

【答12】transform: rotate( )

※　参考ページ

【問13 】:first-childセレクタは、どのようにスタイルを設定しているか

書きなさい

【答13】:first-childは最初の子要素のスタイルを指定します

※　参考ページ

2014-06-24

目標達成！！

日記

今日、いいなと思ったWebサイトのピックアップが100件達成しました！

引き続き紹介は続けて行く予定です！

2014-06-21

6/20(金) 授業

授業

今日の授業は、書籍チラシを制作しました。

先生から提供されたチラシのデータをもとにIllustratorを使ってコピー作品を制作しました。３時間で完成出来なかったのでへこみましたよ。。。

2014-06-21

カフェのフライヤーを作成（120mm x 120mm）

授業 Illustrator

授業でカフェのフライヤー（CDジャケットサイズ）を作成しました。

白黒.ver

f:id:suge1040:20140621004913p:plain

カラー.ver

f:id:suge1040:20140621004602p:plain

カラー.verは、フライヤーではなくチラシになってしまいました。。。

失敗です。。。

先生のアドバイスは、

①フライヤーとはチラシとは違う

②手にとってもらえるデザインにする事

③不明確（情報はたくさんないほうがいい）が必要で興味を持たせる（どんなお店なんだろうと興味を持たせる）

でした。

そういえば、CDショップにあるフライヤーってそうだよな！って思いました。

2014-06-20

Sublimetext2を導入してみた

SublimeText 2 を導入しましたので、導入方法を紹介します。

SublimeText 2 をダウンロードする。

公式のサイト（http://www.sublimetext.com/2）から、自分の環境にあったファイルをダウンロードしてきてください。

※OSは、Windows,Mac,Linux に対応しています。

初期設定

アプリを立ち上げて、Sublime text2 → Preference → Settings Userを開く。

ショートカットキーは、 command + , です。

「Preferences.sublime_settings」のタブが立ち上がります。

私は下記の設定を記述しました。

他にもいろいろ設定出来るみたいなので検索していろいろ設定してみて下さい。

設定を保存して再起動をします。

{

//フォントサイズ

"font_size": 12,

//行間

"line_padding_top": 5,

//タブサイズ

"tab_size": 4,

//タブやスペースなどの不過視文字を表示

"draw_white_space": "all",

//現在の選択行をハイライト表示

"highlight_line":true,

//自動改行

"word_wrap": true

}

作業がしやすい環境にするためPackageをインストール

Packageとは、作業がしやすくするための拡張機能のことです。

Packageをインストール出来るように準備をする

Packageをインストールするためには、「Package Control」が必要になるのでインストールします。

View → Show Console を選択すると、画面の一番下に枠が表示されカーソルが点滅されています。この枠の中に、下記のコードを記述します。

import urllib2,os,hashlib; h = '7183a2d3e96f11eeadd761d777e62404' + 'e330c659d4bb41d3bdf022e94cab3cd0'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); os.makedirs( ipp ) if not os.path.exists(ipp) else None; urllib2.install_opener( urllib2.build_opener( urllib2.ProxyHandler()) ); by = urllib2.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); open( os.path.join( ipp, pf), 'wb' ).write(by) if dh == h else None; print('Error validating download (got %s instead of %s), please try manual install' % (dh, h) if dh != h else 'Please restart Sublime Text to finish installation')

記述したら Enter を押し実行して SublimeText 2 を再起動（ SublimeText 2 を終了して起動）します。

SublimeText 2 → Preferences → Pacage Control が表示されたらOKです。

これで、 Package をインストールする準備が整いました。

※記述したコードはこちら（ https://sublime.wbond.net/installation#st2 )を参考にしました。

Packageをインストール

まず、インストールの方法を教えます。

①Ctrl+Shift+P を押すと画面が出てきますので、install と入力し検索すると「Package Control:Install Package」が表示されるのでクリックします。

②新たに違う画面が出てきますので、インストールしたいPackage名を入力して検索してインストールしたいPackageクリックします。

クリックするだけでインストールされます。

ファイルをダウロードして設定する

ダウンロードしないとインストールできないPackagを紹介します。

全角スペースをハイライト表示

全角スペースを明確に表示(ハイライト)するPackageです。

下記ファイルをダウンロードし、解凍(展開)します。

ZenkakuSpacet.zip ←クリック

解凍したら「FullPitchWhiteSpaceHighlight 」フォルダを「コピー」します。

SublimeText2 → Preferences → Browse Package･･･ を選択する。

「Packages」フォルダの中に「FullPitchWhiteSpaceHighlight 」フォルダを貼付け貼付けます。

メニューを日本語化

メニューや右クリックした時のコンテキストメニューが日本語表示になるPackageです。

下記のリンクファイルをダウンロードします。

メニューバー( Main.sublime-menu : 50,537 Byte)

https://docs.google.com/open?id=0B_dAu5x064QTWW5TQ2p0NzRPZTQ

コンテキストメニュー( Context.sublime-menu : 688 Byte)

https://docs.google.com/open?id=0B_dAu5x064QTZ1lZaXpmS3ZMQ0U

リンクをクリックすると、ダウンロードボタンが出てくるのでダウンロードボタンを押してダウンロードして下さい。

ダウンロードした2ファイルを「コピー」し、SublimeText2 → Preferences → Browse Package･･･ を選択する。

「Packages」フォルダの中の「Default」フォルダの中にコピーしたファイルを貼り付け(上書きとなります)ます。

画面の色変更

「現在行のハイライト表示」・「選択部分の色」を、初期のカラースキーマ「Monokai」を一部変更した「Monokai Kai」ファイルです。

下記ファイルをダウンロードし、解凍(展開)します。

ColorChange.zip

解凍したら「Color Scheme - User 」フォルダを「コピー」します。

SublimeText2 → Preferences → Browse Package･･･ を選択する。

「Packages」フォルダの中に「Color Scheme - User 」フォルダを貼付け貼付けます。

SublimeText2 → Preferences → Color Scheme → Color Scheme - User → Monokai Kai を選択します。

覚えておきたいメニュー・ショートカット等

メニュー

View → Side Bar → Show･･･ / Hide･･･：画面左側に出るファイル名等のサイドバーを表示/非表示。

View → Hide Minimap / Show Minimap：画面右側に出るコードの全体表示ミニマップを表示/非表示。

：画面を指定した数に分割。左画面でhtml、右画面でcssといった事ができる。

Single：1画面　Columns：列＜垂直方向の並び＞　Rows：行＜水平方向の並び＞

View → Word Wrap：コードを画面右端で自動折り返しにする/しない。

ショートカット

Ctrl + S：上書き保存

Ctrl + /：コメントアウト(複数行も可)

Ctrl + +：文字サイズを大きく

Ctrl + -：文字サイズを小さく

他

[Esc]キー：PacageControlボックスや検索ボックス等の、ボックスを閉じる。

html + [Tab]キー：htmlの雛形コード入力(htmlのタグ等他にもたくさんあります)。

htmlファイルの編集画面上で右クリック→[Open in Browser]：htmlファイルをブラウザで表示。

参考にしたサイト

Sublime Text 2 Download

Installation - Sabulime Package Control

SublimeText2の初心者インストール・設定方法

mnemoniqs Web Designer Blog

ゆーがいぶろぐ

株式会社ソニックムーブのスタッフブログ

SublimeTextの教科書で紹介されてるプラグインまとめ - Qiita

コードで一言

2014-06-19

6/18(木)授業メモ

授業

今日は、SublimeText3をインストールし日本語化、ビオレパッケージデザイン（花王社製品）。

①SublimeText3をインストールし日本語化。

インストールは出来ましたが、日本語で表示させることが出来ませんでした。。。

メニューバーまでは出来ましたがね。

②ビオレパッケージデザイン

オリジナルでデザインするのではなく既製の物をトレースしました。

ロゴは簡単に出来ましたが、文字のトレースは苦労しました。。。

でも、イラストレーターは使い慣れているので苦ではなかったです。

細かい作業とか、ペンツールを使うのは得意なので楽しかったです。

- 余談 -

息抜きは重要。

最近、授業について行けていない！全然理解できてなかった！って思い知らされて、最近ネガティブな生活を送っていましたので何もかもやる気が出ませんでした。。。

今日は、カフェでリフレッシュしてみました。

学校が終わってすぐ帰宅してずっと部屋に引きこもりで、勉強しなきゃ！とか、復習しなきゃ！と思うけど、全然手つかずで１日が終了でした。。。

これは悪循環です！

「今日はカフェに行こう！」ってふと思ったので実行しました。

みなさんもぜひ！

2014-06-18

6/18(水)授業メモ

授業 CSS3

今日は、CSS3を使ってグラデーションの設定を学びました。

学校ブログ 7/29を参照

★mozilla系のブラウザ用の命令

記述例）background:-moz-linear-gradient(top, #990, #066);

解説 ) background:-moz-linear-gradient (方向, 開始色, 終了色);

　方向の種類

top：上から下
left：左から右
left top：左上から右上

※　mozilla系のブラウザ　には、 Mozilla Fierfox　が含まれる。

★webkit系のブラウザ用の命令

記述例）background: -webkit-gradient(linear, left top, left bottom, from(#990), to(#066));

解説 ) background: -webkit-gradient(直線的, 開始位置, 終了位置, 開始色, 終了色）

※　webkit系のブラウザ　とは、KHTML系レンダリングエンジン

※　webkit系のブラウザ　には、GoogleChrome・ Opera・ Safari　が含まれます。

例）

<!DOCTYE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS3 グラデーション</title>
<style>
#grad1, #grad2, #grad3, #grad4, #grad5 {
width: 300px;
height: 200px;
margin: 30px 50px;
}
#grad1 {
background: -moz-linear-gradient(top, #990, #066);
background: -webkit-gradient(linear, left top, left bottom, from(#990), to(#066));
}
#grad2 {
background: -moz-linear-gradient(left, #990, #066);
background: -webkit-gradient(linear, left top, right bottom, from(#990), to(#066));
}
#grad3 {
background: -moz-linear-gradient(left top, #990, #f60 50%, #066);
background: -webkit-gradient(linear, left top, right bottom, from(#990), color-stop(0.5, #f60), to(#066));
}
#grad4 {
background: -moz-linear-gradient(left top, #990, #c36 30%, #f60 50%, #000 70%, #066);
background: -webkit-gradient(linear, left top, right bottom, from(#990), color-stop(0.3, #c36), color-stop(0.5, #f60), color-stop(0.7, #000), to(#066));
}
#grad5 {
background: -moz-linear-gradient(top, rgba(60,100,50,0.5), #066);
background: -webkit-gradient(linear, left top, left bottom, from(rgba(60,100,50,0.5)), to(#066));
}
</style>
</head>
<body>
<div id="grad1"></div>
<div id="grad2"></div>
<div id="grad3"></div>
<div id="grad4"></div>
<div id="grad5"></div>
</body>
</html>

Webデザイナーへの道しるべ | suge1040's diary

Webデザイナーになる事を目指しフェリカテクニカルアカデミーで勉強していましたsuge1040によるブログです。

CSS3 演習問題

目標達成！！

6/20(金) 授業

カフェのフライヤーを作成（120mm x 120mm）

Sublimetext2を導入してみた

SublimeText 2 をダウンロードする。

初期設定

作業がしやすい環境にするためPackageをインストール

Packageをインストール出来るように準備をする

Packageをインストール

おすすめPackage

ファイルをダウロードして設定する

全角スペースをハイライト表示

メニューを日本語化

画面の色変更

覚えておきたいメニュー・ショートカット等

6/18(木)授業メモ

6/18(水)授業メモ