2014-10-11から1日間の記事一覧
2014-09-18 ポラロイド風写真を作る Photoshop Photoshopで簡単ポラロイド風イメージ 写真から作るのではなく、土台から作ることがコツ （1）新規ファイルの「背景」に色を塗る （2）レイヤーパレットの「新規レイヤーを作成」をクリックして 「レイヤー1」…
2014-09-17 擬似クラスを使ったレイアウト CSS <htmllang="ja"> <head> <metacharset="utf-8"> <title>ホーム | cafe</title> <style> /* reset */ html, body, div, h1, ul, li { margin: 0; padding: 0; line-height: 1.0; } ul { list-style: none; } img { border: none; vertical-align: bottom; } a { text-decoration…</metacharset="utf-8"></head></htmllang="ja">
2014-09-16 選択範囲 Photoshop Photoshopで選択範囲 選択範囲を決める （1）「練習_1」の中の「face.psd」を開く。 ※または［ファイル］→［開く］。【Ctrl＋O】open：開く （2）「長方形選択ツール」で画面上ドラッグしてみる。 （3）「楕円形選択ツール」…
2014-09-15 目的とパレットの使い方 Photoshop Photoshopの目的 初心者がPhotoshopの勉強をするときのポイントは以下の３点です。 選択範囲を決める。（どこをという最初の部分。または主語にあたります。） 補正する。（写真をキレイにします。目的にあった…
2014-09-14 文書構造とCSS 宿題 宿題 結果の記述を真似るのではなく、どうすればそうなるのか考えること 画像処理と準備が必要なものは、割愛しました 手順 HTML基本構造の入力 body内にテキストをペーストしマークアップする 基本は、見出しと本文の関係 必…
2014-09-13 新Jimdoの使い方とWebマスターツール CMS 新Jimdo 最近、Jimdoが新しいデザインになりました 以前とはかなり使い勝手が変わったような気がします 登録 テンプレートの選択 詳細の編集 自分なりに工夫をしながら作り込む 受講生課題：JImdoでの「…
2014-09-12 復習 ナビゲーション CSS 手順のチェック 以下の手順は、必ず実行しましょう。 DTD（HTML5）の入力 HTMLの基本構造の入力 meta（文字コード）の入力 title要素の入力 文書構造の設定（見出し+本文） ブラウザでプレビュー HTML文法チェック←W3C公…
2014-09-11 リストをナビゲーション CSS ナビゲーションブロック カテゴリ間を移動するためのインタラクション機能 タブ（ボタン）型で横並びのデザイン ナビゲーションブロックの構成 ナビゲーションは、各ページへのリンクをまとめたものでありリンク集の…
2014-09-10 擬似クラスとリセットCSS CSS リンクの色（擬似クラス：Pseudo-classes） 要素の性質スタイルを適用させたい場合に使います 主に「a要素」のリンク時のカーソルの表示状態を設定します 疑似クラスには次の6種類があります。 lang 指定された言語…
2014-09-09 基本操作と考え方 Flash 描画のポイント 鉛筆ツールのオプション ストレート スムーズ インク というオプションがあります ストレートやインクで線を描くと、描き方によっては少しガタガタした線になってしまうことがあり、ガイドレイヤーの線と…
2014-09-08 動くことへの渇望 Flash アニメーション 「アニメーション」とは、生命や魂を意味するラテン語の「ANIMA」を語源とする言葉 一般的に、本来静止している絵を生きてるかのように動かす技術 歴史的には、1830年代プラトーの作ったフェナキスティス…
2014-09-07 floatを使ったレイアウト CSS CSSレイアウト 基本は、floatを使ったレイアウト floatプロパティを使ったレイアウト 通常ならHTMLの順序通り縦に並んでしまうコンテンツを横に並べることが可能になります floatは浮き上がっている状態 floatを使っ…
2014-09-06 CSSレイアウト基礎演習（２） CSS A 以下のように表示するよう記述しなさい（値は適宜） 宮沢賢治作品 いてふの実 そらのてっぺんなんか冷たくて冷たくてまるでカチカチの灼きをかけた鋼です。 そして星が一杯です。けれども東の空はもう優しい桔…
2014-09-05 CSSレイアウト基礎演習（１） CSS header01 <htmllang="ja"> <head> <metacharset="UTF-8"> <title>【演習】header01</title> <style> #header h1 { margin: ; font-size: ; font-family: ; } #header p { margin: ; margin-top: ; font-size: ; } </style> </head> <body> <divid="header"> <h1>Homepage Title…</h1></divid="header"></body></htmllang="ja">
2014-09-04 CSSによるページデザイン CSS 初学者のCSS CSSを理解しようとして、いまネット上にあるプロの解釈を読むと、頭が混乱すると思います。 日本語ですら、まともに作文を書くことができるようになるまで何年もかかりました。まだ勉強を初めて１周間で…
2014-09-03 楕円形だけでロゴを描く Illustrator i-modeのロゴを描く （1）楕円ツールで、楕円をひとつ描きます （2）移動パレットで数値を指定しながら、移動コピーをしていきます （3）楕円の左ポイントを押したまま移動コピーをします ※上下の円が重なっ…
2014-09-02 長方形だけでロゴを描く Illustrator 長方形だけでロゴを描いてみる：IT 下絵を「テンプレート」で配置する 塗りなしの長方形で基準となる形を描く（ユニット） その長方形を複製して規則性をつくる キーオブジェクトを利用して基準の辺に整列さ…
2014-09-01 Dreamweaver DW Dreameaverとは マクロメディアによって開発された高機能なWebオーサリングツール 現在は、Adobe製品 何をするためのツールなのか 初心者にとっては、HTMLの入力を助けてくれるツール（ただし、勝手に何かをしてくれるわけではあ…
2014-08-31 CSSの基礎：演習 CSS 基礎演習 style要素をエンベッドして、以下の問いに答えなさい 色の指定は、Firefoxプラグイン「colorzilla」を利用します CSS01 h1要素「CSSの使い方」を記述し、赤色に表示されるよう設定しなさい CSS02 CSS01の記述を、背…
2014-08-30 CSSの基礎：まとめ CSS CSSのコーディング規約（Google） 「Google HTML/CSS Style Guide」を適当に和訳してみた Google HTML/CSS Style Guide CSSはどこに書くか？ 外部ファイルにCSSを書く方法 styleタグを使ったCSSを書く方法 HTML要素にCSSを…
2014-08-29 ボックスモデル CSS ボックスを構成する要素 ボックス幅は、コンテント領域幅 ＋ パディング ＋ ボーダーの太さ ＋ マージンです。 コンテント領域がボックス幅ではないので、注意が必要です。 ※コンテント：widthとheightプロパティで規定される…
2014-08-28 セレクタの種類 CSS セレクタの種類 タイプセレクタ IDセレクタ classセレクタ 子孫セレクタ 属性セレクタ ユニバーサルセレクタ などがあります。 タイプセレクタ 要素に対してスタイル指定する div: division em：emphasis h1 { color: #00CC00…
2014-08-27 CSSからWebデザインを習得 CSS CSS（Cascading Style Sheets） 文書構造と体裁を分離させるという理念を実現する為に提唱されたスタイルシートの、具体的な仕様の一つ。 CSS Zengarden メリット サイトの重さ軽減（SEO対策にも効果あり） 自由な…
2014-08-26 HTMLの基礎：まとめ HTML HTMLの特徴と役割 HTMLはWebページを制作するために開発された言語です その後、実際の利用状況に応じて改良が加えられるとともに、役割も変化してきています HTMLの特徴 テキストベース（ほぼ環境に依存しない） 他のHT…
2014-08-25 Jimdoで好きなサイト100選を作る CMS Jimdo 「好きなサイト100選」を作る 「無料ホームページを登録」 Jimdo-WEB学習鑑賞ポートフォリオ Jimdo-Love Website 100 Jimdo-Web design memo Jimdo-WEBLOG Jimdo-素敵なサイト100 Jimdo-Webページ100＜…
2014-08-24 はてなダイアリー ブログ はてなダイアリー 新ブログではなく「はてなダイアリー」を作成 シンタックス・ハイライターが使いやすい はてな記法で見出しとリストが作りやすい 「はてなダイアリー」と検索 「ユーザー登録（無料）」ボタンを押す 「…
2014-08-23 かにをトレース Illustrator イラストをトレースする準備 （1）新規ドキュメント作成 （2）［ファイル］メニュー → ［配置］ （3）「イラスト」→「かに下絵.tif」を選択する ※オプションは「テンプレート」のみ、チェックする。 （4）「レイヤー…
2014-08-22 コーナーの練習 Illustrator コーナーを描く
2014-08-21 曲線の練習 Illustrator 曲線を描く S字曲線を描く 連続した曲線を描く 連続した直線・曲線を描く
2014-08-20 直線の練習 Illustrator 直線の修正 右クリック（コンテクストメニュー）で画像を保存 新規ドキュメントに「テンプレート」のみにチェックをして配置 トレース（描き終わる） 点線の位置までアンカーポイントを移動修正 クローズドパス 水平・垂…
