2016-02-01から1ヶ月間の記事一覧
今日の授業ではロフトのサイト画面をスライスする為に、ガイド線を引くところまでしました。 元画像 ↓ ＊photoshop ＊画像のスライス①サイトをコピーし、photoshopの新規作成でクリップボード→ペーストする。 ②環境設定で単位・定規をピクセルに、ガイドグリ…
＊週末課題の内容確認 参照先：http://yachin29.hatenablog.com/entry/2016/02/29/155025 ＊サーバーへのアップロード 使用するツール（この他にもありますが授業で紹介した主なものは以下３つ） ↓ ①windows用→＊FFFTPのダウンロード先：https://osdn.jp/pro…
＊HTML5でアウトライン構造を理解する <html lang="ja"> <head> <meta charset="utf-8"> <title>HTML5でのアウトライン構造を理解する</title> </head> <body> <header> <h1>HTMLについて</h1> <p>HTML（HyperText Markup Language）とは、ウェブ上の文書を記述するためのマークアップ言語である。</p> </header> <section class="aaa"> <h1>HTML5</h1> <p>HTML5は、HTML4に代わる次世代…</p></section></body></html>
＊ログインするときはセキュリティ確保のためにGoogleではシークレットモード（ctrl + shift + N）で表示してからログインする。 ＊HTML5でアウトライン構造を理解する。参照記事：yachin29.hatenablog.com＊入力後はHTML5 outlinerで構成をcheckすること ＊…
２月２５日 下記無料レンタルサーバーを自宅で登録する。３つとも登録しても大丈夫。https://www.xdomain.ne.jp/login/member.phphttp://www.ninja.co.jp/hp/http://www.webcrow.jp/ 有料https://lolipop.jp/?gclid=Cj0KEQiAxrW2BRCFidKbqKyq1YEBEiQAnMDWxjh…
参照記事：複数ページの制作 yachin29.hatenablog.com 実際のサイトと同じようにリンク先のサイトも制作しました。 リンクに設定している画像は元はphotoshopで正方形にしてHTMLに入れましたが、CSSでborder-radius:50%;と幅、高さ同じ（正方形）にして真円…
・CSSで描画したものはイラストレーター、フォトショップで作成するものよりも表示がきれい。（今日の項目でCSSを使ったグラデーションの仕方を紹介します。） ・Ｐ２６１ベンダープレフィックス（表２２）・・・絶対覚える記述順（Ｐ２６２のベンダープレフ…
*Photoshop(影は左上（１３５°)からさしている) *文字にドロップシャドウ（上からの光をつける作業）をつける。 ①200pxの四文字熟語を書く（上下２文字 文字はＢ 文字色：白で）。 ②文字間の調整をaltを押した状態で十字キーで調整する。 ③レイヤーのｆｘで…
今日のgoogle top画面 三浦環 https://ja.wikipedia.org/wiki/%E4%B8%89%E6%B5%A6%E7%92%B0 ミカド（オペレッタ）https://ja.wikipedia.org/wiki/%E3%83%9F%E3%82%AB%E3%83%89_(%E3%82%AA%E3%83%9A%E3%83%AC%E3%83%83%E3%82%BF) パリ万博 https://ja.wikiped…
＊記載内容はフォームの作成とphotoshopでの画像加工についてです。 d.hatena.ne.jp d.hatena.ne.jp <html lang="ja"><head><meta charset="utf-8"><title>フォームの練習</title><style> table{widht:300px;border:1px solid #aaa;border-collapse:collapse;} th,td{padding:5px;border:1px solid #aaa;} label{cursor:pointer;}</meta></head></html>…
＊iモードマークの作成 ①楕円形ツールで幅５０mm、高さ18ｍｍの楕円を描き、下方向に１８ｍｍずらして４つコピーする。（ダイレクト選択ツールを使う）そのうちの上から２つめは消す。 ②上方向に９mmずらしてコピーし、それを右方向に矢印で1pxずつ調整して…
＊HTML５では従来ではダメだった下記のような記述が可能。 よって、リンクに指定できる箇所が多くなることによりユーザービリティが向上しました。 ＊SVGとはScalable Vector Graphics（スケーラブル・ベクター・グラフィックス)の略で、JPEGやPNGのような画…
①ウインドー→グラデーションを選択。 ②種類の左のグラデーションをクリックすると下のようにグラデーションスライダーが出てくるのでまず明るい色を選択する左側のスライダーをクリックする。 ③カラーパネルが表示されるので右上のメニューからRGBもしくはCM…
昨日作成したcafemenuを今日はほとんどposition設定で作ってみました。 参考したのはこちら： yachin29.hatenablog.com <html lang="ja"><head><meta charset="utf-8"><link rel="stylesheet" href="cafemenu(all_position_layout).css"><title>patisserie camelia</title></head> <body><div id="container"> <div id="header"> <h1>Patisserie…</h1></div></div></body></html>
・snowbord.psd 背景レイヤーをコピー→フィルター→描画→逆光→消しゴムでレイヤー部分を消して光の調整する。 ・窓.psdと風景.psd 選択範囲→選択範囲を読み込む（今回は窓枠の部分が選択される）→海の写真をctrl + A→ctrl + c →編集→特殊ペースト ・ブッシュ.…
今日は、授業でPositionについて勉強しました。 参照先： yachin29.hatenablog.com yachin29.hatenablog.com 本：P１４６〜P１５５ ＊子要素の基準点を決める時は親要素にposition:relative;を入れる。 ＊z-indexは重なっている要素の上下の順番を変えること…
it 関係のニュース ・http://itpro.nikkeibp.co.jp/news/?rt=nocnt ・http://www.itmedia.co.jp/news/ 復習 HTML＝Hyper Text Markup languageCSS=Cascading Style SheetDTD=Document Type Definition 文書型定義（文書宣言のこと） ex： 擬似リンクの種類（…
参照：http://d.hatena.ne.jp/web-0818/20160306/p1 完成図 昨日の授業で製作した背景画像の作り方をまとめます。基本的には上記参照記事と内容は同じです。 途中で切れている連続するイメージはその先を想像できるので１つの大きな表示より良い。 （ゲシュ…
①#headerで全体に背景色の設定 全体に#containerをかけない。 #headerには幅の設定はしない。 #header内のタグに幅を設定する。 幅をつけたタグにmargin:0 auto;を設定する。 #headerに背景色を設定する。 ②ナビゲーションの横に設定する方法 ulタグに幅を設…
ちょっと複雑なカラムを作ってみました。 ① <html lang="ja"><head><meta charset="UTF-8"><link rel="stylesheet" href="float2.css"><title>フロート練習２</title></head> <body><div id="container"><div id="wrapper"><div id="a">A</div><div id="b">B</div><div id="c">C</div><div id="d">D</div><div id="e">E</div></div></div></body></html>
①dreamweaver ・うちのにゃんこの作成 CSSレイアウト 解答例 d.hatena.ne.jp ＊マークアップとはidやclass名をつけないh1,ｐなどの基本タグの入力のことをさす。 ＊ページ構成はＨＴＭＬ ５outlinerで入力項目をいれて確かめることができる。 https://gsnedd…
今日は祝日なので昨日勉強した１つwrapperの中にあるdiv要素をどのようにすれば一度のfloat:left;の設定で全てきれいに間隔を保ちながら綺麗に整列できるかを考えてみました。 完成図写真 以下、入力内容参照 HTML <html lang="ja"><head><meta charset="UTF-8"><link rel="stylesheet" href="float.css"><title>floatの練習</title></head> <body><div id="container"><div id="wrapper"><div id="a">…</div></div></div></body></html>
＊metaのkey word は入れないこと ＊metaのdescriptionは必須 ＊１つのwrapperの中で全てのdiv(ABC)にfloatをかける方法＊ 黄緑の正方形：container 水色の正方形：wrapper 黄色の長方形：main 赤の正方形：second オレンジの正方形：third 説明 ＊まず注意…
イラストレーター ・線色の変更・・・対象物を選択し、選択→共通→カラー（線）をクリックし線色を選択する。 ・小さい四角形を三角にする。ダイレクト選択ツールで上２点を選択し、オブジェクト→パス→平均→２軸ともにクリック ナビゲーションの個別指定 d.ha…
こんにちは。 今日は授業の中で特に難しかった、イラストレーターの操作から説明していきます。 d.hatena.ne.jp この次にはイラストレーター機能の説明と横ナビゲーション記入例があります。 作るものは下のメニューバー（幅８００px、高さ６０px、横のバー…
色について ・基調色（ベースカラー） ・強調色（アクセントカラー） ＊補色はそんなに大きくなくても大丈夫 ・なじませ色（アソートカラー） 子セレクター・・・子セレクタ（子共セレクタ）は、親要素の直接の子要素に適用されるセレクタです。このため、孫…
おはようございます。 今日も毎度のことながら授業内容をまとめていきたいと思います。 ２月４日は１時間目に急遽手代木先生によるWeb関係の就職先、そして就職活動するにあたりどのような心構えで臨むのが良いかというお話がありました。 私は知識的にはま…
２月３日 ＊隠し文字 http://yachin29.hatenablog.com/entry/2016/02/03/132626 右にずらす方法 white-space:nowrap; text-indent:100%; overflow:hidden; 矢島先生のブログ（カラムレイアウトのHTML&CSS記入例） yachin29.hatenablog.com ・１カラムレイア…
画像の挿入 http://d.hatena.ne.jp/web-0818/20160213/p1 リストの表現 http://d.hatena.ne.jp/web-0818/20160214/p1 ＊上下のマージンは相殺されるので注意 ＊displayの欄にinlineの設定する場合は文字の幅での表示のみ。（もともとインライン） なので幅、…
http://d.hatena.ne.jp/web-0818/20160211/p1 1px=コンピュータで表示できる最小単位 ・字体＝ビットマップ（デバイスフォント）・・・表示が速い 機種：windws ex,osaka,msゴシックなど ・書体＝PostScript,アウトラインデータ（ベクター）・・・イラストレ…
