2015-09-01から1ヶ月間の記事一覧
Photoshopの目的 初心者がPhotoshopの勉強をするときのポイントは以下の３点です。 選択範囲を決める。（どこをという最初の部分。または主語にあたります。） 補正する。（写真をキレイにします。目的にあった画像にします。） 加工する。（マスクや合成を…
HTML5フォームの新属性 HTML5で追加されたフォーム関連の機能 フォームコントロール これまでのHTMLにあったテキストボックスやラジオボタンなどの入力フォーム要素に、電話番号やメールアドレスなどに特化した属性が追加されました その他、数値や日付など…
フォームとは ブラウザの操作画面で、利用者からの入力を受け付ける要素(の集合)のこと 目的は、利用者からの情報収集のため action action="#"は、CGIまたはPHPが入りますが、現時点では「NULLリンク」にしておきます。 お問い合せフォーム <html lang="ja"> <head> <meta charset="UTF-8"> <title>お問い合わせ</title></meta></head></html>…
positionを使ったレイアウト 例１ ブラウザの天地左右の中央に表示されるよう記述しなさい 薬玉文様（くすだまもんよう） 薬玉とは、薬・香料を玉にして錦の袋に入れ、造花や蓬・菖蒲などを飾り、五色の糸を長く垂らしたもの。古代中国で端午の節句に薬玉を…
必須 #container：幅 840px・上の空き無し・左右は自動空き #header：高さ100px #nav：幅160px・高さ50pxのナビゲーションボタンが５個（nav1〜nav5）区切り線は適宜 #content：幅500px・高さ300px #footer：下余白50px 背景色は、見本を参考に適宜 擬似クラ…
リストをナビゲーションに（横） <body> <ul class="nav"> <li id="new"><a href="#">新着情報</a></li> <li id="info"><a href="#">お知らせ</a></li> <li id="item"><a href="#">製品情報</a></li> <li id="shop"><a href="#">店舗案内</a></li> <li id="company"><a href="#">会社案内</a></li> </ul> </body> CSSの記述 borderを指定した場合 《例１》 /* reset */ html, …
ナビゲーション マウスクリック（ホバー）により、次の情報に遷移可能であることを認知させる仕組み 文字以外の領域面ををクリック可能にするためには「display: block」が必須 縦ナビゲーション 文字が並ぶだけの場合、「li」に文字サイズとリスト間の空き…
例題２ 画像をデバイスに最適化する フルードイメージ Fluid Image ブラウザのウィンドウ幅に合わせて画像のサイズをフィットさせる方法 ウィンドウサイズより大きい画像でも、ウィンドウサイズ（または親要素の幅）に応じて、縦横比を保持したまま自動的に…
《style.css》 @charset "UTF-8"; /* reset */ html, body, div, h1, h2, h3, p, ul, li { margin: 0; padding: 0; line-height: 1.0; font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; } ul { list-style: none; } a { text-decoration: non…
１カラムレイアウト応用 画像のaltは空に ボタンは、画像を横に並べること 手順 HTML基本構造の入力 body内にテキストをペーストしマークアップする 基本は、見出しと本文の関係 必然性があれば、div要素でグループ化する head内にstyle要素を記述する 使用…
Photoshopで簡単ポラロイド風イメージ 写真から作るのではなく、土台から作ることがコツ （1）新規ファイルの「背景」に色を塗る （2）レイヤーパレットの「新規レイヤーを作成」をクリックして 「レイヤー1」を作成する （3）ポラロイド風画像の土台の選択…
スポット修復ブラシツール 「修復ブラシツール」が「コピースタンプツール」と異なる点は、移植先の輝度情報まで計算して最適化すること 「スポット修復ブラシツール」でドラッグする 微調整は「コピースタンプツール」で行います 赤目修正ツール 赤目の部分…
特定の色のみ選択 「選択範囲」→「色域指定」 「画像を表示」を選択して、スポイトで選択したいエリアをクリックします 次に「選択範囲」を選択して、スポイト(＋)で選択したいエリアをクリックして拡張します 「階調の反転」にチェックを入れて「OK」を押し…
明るさ・コントラスト コントラストの弱い画像を補正する 「ヒストグラム」パネルで確認すると、コントラストの弱い画像はシャドウからハイライトまでの全体に色の粒子が分布していないことがわかります つまり、ホワイトとブラックが存在しないので、画像の…
レベル補正の使い方 画像レイヤーを「スマートオブジェクトに変換」 「シャドウ・ハイライト」で暗い部分を明るくする 「レベル補正」を実行 「新規調整レイヤー」→「レベル補正」 演習
レベル補正 コンパクト・デジタルカメラの特徴である「暗く移る」を、補正します。 新規調整レイヤー 以下の３ポイントを調整する ハイライトポイント グレーポイント シャドウポイント この方法で、ハイライトが白く飛びすぎたりしてしまう場合には、別の方…
トーンカーブの使い方 トーンカーブの機能は、「画像の元の明るさ」と「補正後の明るさ」を調整するだけの単純なものです 濃度を調整するということは、色調・彩度・コントラスト・階調といった画像のほぼすべての要素をコントロールすることと同じです シャ…
境界線を調整（複雑な選択範囲） （1）選択しやすい色をクリックし選択範囲を作成 （2）選択範囲を反転し、必要な部分を選択している状態にする （3）選択範囲ツールのオプションバー「境界線を調整」をクリック （4）「エッジの抽出」を調整 （5）「エッジ…
Photoshopで選択範囲 素材 選択範囲を決める （1）「練習_1」の中の「face.psd」を開く。 ※または［ファイル］→［開く］。【Ctrl＋O】open：開く （2）「長方形選択ツール」で画面上ドラッグしてみる。 （3）「楕円形選択ツール」に切り替えて画面上ドラッグ…
Photoshopの目的 初心者がPhotoshopの勉強をするときのポイントは以下の３点です。 選択範囲を決める。（どこをという最初の部分。または主語にあたります。） 補正する。（写真をキレイにします。目的にあった画像にします。） 加工する。（マスクや合成を…
Adobe Brakets Bracketsは、HTML／CSS／JavaScriptで開発されている、HTML／CSS／JavaScript用の新しいオープンソースコードエディターです CSSの内容に入る時点で導入します（Webページ作成時点でDreamweaverに入ります） GIFアニメデモ インストール後の画…
卵料理カフェ Cockeyolly 卵料理カフェ Cockeyolly Home ニュース メニュー 今月のおすすめ オリジナル雑貨 マップ メール 今月のおすすめ きのこのオムライス ふんわりアツアツのオムライスを、きのこたっぷりのドミグラソースでどうぞ。オムレツには新鮮な…
２カラムレイアウト基本 画像は適宜選択する 素材 Homepage Title サブタイトルサブタイトルサブタイトル コンテンツのタイトル コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します…
