2015-08-01から1ヶ月間の記事一覧
CSSレイアウト テキストP.092〜095 基本は、floatを使ったレイアウト floatプロパティを使ったレイアウト 通常ならHTMLの順序通り縦に並んでしまうコンテンツを横に並べることが可能になります floatは浮き上がっている状態 floatを使ったレイアウトは、HTML…
レスポンシブWebデザインとは ワンソースによるマルチデバイス対応（スマートフォンに対応） 更新が簡単 URLを一元化できる デメリット PCサイトに切り替えられない IE8以前の古いブラウザをサポートできない レスポンシブWebデザイン化に必要となる記述 HTM…
リセットと基準値を記述 リセットを記述（使用している要素のみ） 《style.css》 @charset "utf-8"; /* reset */ html, body, div, h1, h2, h3, h4, p, small { margin: 0; padding: 0; line-height: 1.0; font-family: "Hiragino Kaku Gothic ProN", Meiryo…
カンプ画像の解析 実寸のカンプがある場合、そこから算出します カンプ画像が実寸ではない場合（今回のブログ画像） 基準を決める 本文の大きさを決める CSSを適用しない場合の幅を算出 各ブラウザが表示するp要素の標準サイズ「16px」を基準に算出する Fire…
マルチデバイスに対応するときの指標 2007年にiPhoneが登場して以来、デバイスの多様化が進む中「どうやって小さい画面に対応するのか」が課題となってきました Google モバイルガイド マルチデバイス対応において求められる考え方や技術的な手法がまとめら…
i-modeのロゴを描く （1）楕円ツールで、楕円をひとつ描きます （2）移動パレットで数値を指定しながら、移動コピーをしていきます （3）楕円の左ポイントを押したまま移動コピーをします ※上下の円が重なっているところにくると、マウスポインターが 白い矢…
イラストをトレースする準備 （1）新規ドキュメント作成 （2）［ファイル］メニュー → ［配置］ （3）「イラスト」→「かに下絵.tif」を選択する ※オプションは「テンプレート」のみ、チェックする。 （4）「レイヤー１」が選択されていることを確認して描き…
初学者のCSS CSSを理解しようとして、いまネット上にあるプロの解釈を読むと、頭が混乱すると思います。 日本語ですら、まともに作文を書くことができるようになるまで何年もかかりました。まだ勉強を初めて１周間です 原理原則、現在の傾向といろいろあるWe…
リンクの色（擬似クラス：Pseudo-classes） 要素の性質スタイルを適用させたい場合に使います 主に「a要素」のリンク時のカーソルの表示状態を設定します 疑似クラスには次の6種類があります。 lang 指定された言語のスタイル link 通常リンク（未アクセス）…
テキストのスタイル テキストの色を指定する (color) フォントサイズを指定する (font-size) 太字を指定する (font-weight) 行揃えを指定する (text-align) <html lang="ja"> <head> <meta charset="UTF-8"> <title>CSSのお勉強</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>大見出し</h1> <p>こんにちは！こんにちは！こんにちは！こんにちは！こんにちは！こん</p></body></html>…
第3回就業支援イベント あなたのための就職相談会！ 第3回就業支援イベント あなたのための就職相談会！ 締切り：8/27（金）17:00 ※応募者多数の場合は日程を分ける場合がございます ※キャンセルの場合は8/25（火）までにご連絡をお願いします - ★内容 - こ…
コーナーを描く
長方形だけでロゴを描いてみる：IT 下絵を「テンプレート」で配置する 塗りなしの長方形で基準となる形を描く（ユニット） その長方形を複製して規則性をつくる キーオブジェクトを利用して基準の辺に整列させる レイヤーパレットの下絵のアイコンをOFFにし…
描画（描く） いわゆる「鉛筆」などのメタファーではなく、力学の理論構造で線が描画されます。 ドラッグをして描く 長方形も楕円形も手の軌跡は同じです。 クリックして描く ドラッグしたときと同様、基準点から右下方向に形ができる。 描いたものをすべて…
多すぎる情報に惑わされない 基本を理解することを優先する プロの方法を真似しない（プロの方法は、プロになってから！） CSSとは Cascading Style Sheets HTMLの要素をどのように修飾（表示）するかを指示する つまり、どう表示したいかというイメージに向…
ボックスを構成する要素 ボックス幅は、コンテント領域幅 ＋ パディング ＋ ボーダーの太さ ＋ マージンです。 コンテント領域がボックス幅ではないので、注意が必要です。 ※コンテント：widthとheightプロパティで規定される長方形 パディング：padding ボ…
セレクタの種類 タイプセレクタ IDセレクタ classセレクタ 子孫（descendant）セレクタ 属性（attribute）セレクタ ユニバーサルセレクタ などがあります。 タイプセレクタ 要素に対してスタイル指定する div: division em：emphasis h1 { color: #00CC00; } <h1></h1>…
勉強のステップ Webサイトを見る デフォルトCSSが適用されたページを見る HTMLのソースコードを見る CSSのソースコードを見る ギャラリーサイトの活用 ギャラリーサイトを閲覧する 気になったサイトを分類しながらブックマークする ブックマークを管理する C…
Shape Type, the letter shaping game WHAT THE HEX? Whatpx HTML Tutorial CSS Tutorial typewar フォント検定 KERNTYPE a kerning game
Illustratorの役割 コンピュータを扱う仕事の中では、コンピュータの特徴である「複製」を利用することが鍵です 「デザイン」的な視点でいえば、「対称（シンメトリー）」を利用して「画面上の安定」をつくります 周りにあるモノの中にある「シンメトリー」…
Illustratorを起動 ベクター（Vector）データを作るアプリケーション ベクターイメージ（Vector image） コンピュータグラフィックスにおける図形・画像の形式のひとつ 内部表現をベクタ形式とし、アプリケーションによっては「ベクターグラフィック」、ドロ…
実習 テキストP.020〜033 以下のテキストを利用し、正しいツリー構造になるようマークアップの練習を行います 最初からテキストを真似るのではなく、自分なりの考え方マークアップをし、検証（バリデート）しながら修正をしていきます ★うちのにゃんこ★ 我が…
要素の入れ子（ネスト）と子孫関係 HTML文書全体が、html要素を最上位（ルート）の先祖要素とする入れ子によるツリー構造になっています このとき注意が必要なのは「div要素」は、レイアウト指定のためのグループに利用するだけでツリー構造には、まった影響…
相対パスと絶対パス 相対パス（relative path） ハードディスクなどでファイルやフォルダの所在を示す文字列(パス)の表記法の一つで、起点となる現在位置から、目的のファイルやフォルダまでの道筋を記述する方式。 起点となるフォルダを「.」で、上位フォル…
検証 綴りミスと文書構造のミスをチェックする タイポ（タイプミス） typographical error タイポとは、英単語のタイプミス(ミススペリング)の通称 ※タイプミスは、自分で検証することが基本です。 検証サイト W3C Markup Validation Service 検証ツール ブ…
