2013-10-01から1ヶ月間の記事一覧
文字に影をつけるCSSはよく使うので、とくに使用頻度の高い3パターンのコードをまとめておきます。 「text-shadow」プロパティの使い方 【 3パターン 】 文字(テキスト)に影をつけるには、「text-shadow」プロパティを使います。 記述のしかたは以下のような…
「 秋の味覚 」バナーの制作。
ここに挙げた3記事だけでも、色々なデザイン レイアウトに使えそう。 ワンポイントに使えるCSS3マウスオーバーアニメーション5種 | webOpixel 5種類だけだけど、どれも汎用性が高い <a href="http://www.webopixel.net/html-css/831.html…
要素の透明度を指定する際には、「opacity」プロパティを使用する。 透明度は、0.0（完全に透明）～1.0（完全に不透明）の数値で指定していく。 ただ、「opacity」を使った場合は、重なっている文字や子要素まで一緒に(オブジェクト全体が)透過されてしまう…
1 画面左側のツールアイコンの選択範囲ツールの中にある、「長方形選択ツール」を選ぶ。 2 対象となる画像を選択するか、角丸の形で切り抜きたい部分を選択。 3 画面上側の「選択範囲」から「選択範囲を変更」→「滑らかに」を選ぶ。 「半径」の数値を入力す…
切り抜きの方法は色々ある中で、ＣＳ５から追加された「境界線を調整」という機能を使うと、切り抜きたい部分の境界線が複雑なものでもかなり正確に切り抜くことができます。 手順としては、切り抜きたい対象物を選択して「境界線を調整」という機能で微調整…
フォトショップで、画像を配置して、それを修正して保存して、また配置して…と繰り返すと、その画像は劣化するのか？？という疑問があったので、検証してみました。 結論、 「 補正内容によっては劣化する。」 例えば、 1. 色を変える 形を変える → 劣化する…
イラストレータで、スウォッチのデータをカスタマイズしてオリジナルのカラーバリエーションを作った時、それを別のイラレファイルでも使えるようにするための方法です。 1 イラレファイルの画面上側にある｢ ウインドウ ｣をクリック 2 ｢ スウォッチライブラ…
***** リフレクトツールの使い方 ***** Dの地図をトレースする際は、"リフレクトツール"を使う。 対象とするオブジェクトを選んだら "リフレクトツール"に持ち替える。 基準となる点を目分量の所で "Alt"キーを押しながらクリックすると、 そこを基点にして…
***** 回転ツールの使い方 応用編 ***** 回転ツールを使って缶詰めをAからBに移動させる
***** 演習課題-13***** 《html》<html><head><meta charset="utf-8"><title>課題-13</title><link rel="stylesheet" href="kadai-13.css" madia="all"></head> <body> <div id="container"> <div id="content"> <div id="nav"> <ul> <li id="Information"><a href="#"><span>Information</span></a></li> </ul></div></div></div></body></html>
***** 演習課題-12 ***** 《html》<html><head><meta charset="utf-8"><title>課題-12</title><link rel="stylesheet" href="kadai-12.css" madia="all"></head> <body> <div id="container"> <div id="header"> <img src="images-12/logo.gif" alt="サンプルスタイルシートカンパニー"> </div> <div id="nav"> <ul> <li id="top"></li></ul></div></div></body></html>
***** 演習課題-11 ***** 《html》 <html><head><meta charset="utf-8"><title>課題-11</title><link rel="stylesheet" href="kadai-11.css" madia="all"></head> <body> <div id="container"> <div id="header"> <h1>Cafe de la plante</h1> <h2>サブタイトルサブタイトルサブタイトル</h2> </div></div></body></html>
***** 演習課題-10 ***** 《html》 <html><head><meta charset="utf-8"><title>課題-10</title><link rel="stylesheet" href="kadai-10.css" madia="all"></head> <body> <div id="container"> <div id="header"> <h1>Typograpy.71</h1> </div> <div id="nav"> <ul> <li><a href="#">HOME</a></li> <li><a href="#">…</a></li></ul></div></div></body></html>
***** 演習課題-9 ***** 《html》<html><head><meta charset="utf-8"><title>課題-9</title><link rel="stylesheet" href="kadai-9.css" madia="all"></head> <body> <div id="container"> <div id="header"> <div id="sub-header-1"> <h1>Computer Technology Groups</h1> </div></div></div></body></html>
***** 演習課題-8 ***** 《html》 <html><head><meta charset="utf-8"><title>課題-8</title><link rel="stylesheet" href="kadai-8.css" madia="all"></head> <body> <div id="container"> <div id="header"> <img src="images-8/p_mystery.jpg" alt="メインロゴ" width="195" height="102"> <div id="main-title"> <h1>…</h1></div></div></div></body></html>
***** 演習課題-7 ***** 《html》 <html><head><meta charset="utf-8"><title>課題-7</title><link rel="stylesheet" href="kadai-7.css"></head> <body> <div id="container"> <div id="content"> <h1>薬玉文様（くすだまもんよう）</h1> <p>薬玉とは、薬・香料を玉にして錦の袋に入れ、造花や蓬・菖蒲などを飾り、五色の糸を長く垂らしたもの。古代中国で端午の節句に薬玉を柱などに掛け、邪気払いや長寿を祈願する風…</p></div></div></body></html>
***** 演習課題-6 ***** 《html》 <html lang="ja"><head><meta charset="utf-8"><title>初心者課題-6</title><link rel="stylesheet" href="kadai-6.css"></head> <body> <div id="container"> <div id="header"> <h1>フンデルトヴァッサー・ハウス</h1> <p id="sub-title">ウィーンの市営住宅はこんなに元気だ！</p> </div> <div id="content"> </div></div></body></html>
***** 演習課題-5 ***** 《html》 <html lang="ja"><head><meta charset="utf-8"><title>初心者課題-5</title><link rel="stylesheet" href="kadai-5.css"></head> <body> <div id="container"> <div id="header"> <h1>provence</h1> </div> <div id="wrapper"> </div></div></body></html>
***** 演習課題-4 ***** 《html》 <html lang="ja"><head><meta charset="utf-8"><title>初心者課題-4</title><link rel="stylesheet" href="kadai-4.css"></head> <body> <div id="container"> <div id="sidebar"> <p id="main-logo"><img src="images-4/logo.gif" alt="メインロゴ"></p> <p></p> <p> <ul> <li></li></ul></p></div></div></body></html>
***** 演習課題-3 *****
*****演習課題-2*****
***** 演習課題-1 ***** index-1 《html》 index-1 見出しと段落のレイアウト同じ内容の文章であっても、その表現の仕方によって読者に与える印象は大きく変化します。文章のレイアウトを考えることはより正確に、より効果的に情報を伝えるためにとても重要…
