JavaScript基礎 JavaScriptによる文字操作 console.logを使うことで、JavaScriptの変数が正しく入力できているか確認（＝デバッグ）することができる。 ミスをしない、のではなく ミスの見つけ方を覚える。 ★メモ：代入のイコール JavaScriptの＝ひとつは、…

JavaScript基礎 プログラミング言語のひとつの、スクリプト言語。 通常プログラミング言語は翻訳（コンパイル）する動作をしないと、記述しただけでは動作しないが、 JavaScriptは記述しただけで動作する簡易版のプログラミング言語。 この、コンパイル不要…

％指定でのレイアウト フルードグリッド ■フルードグリッド フルードグリッドは、Webページの要素を罫線や升目に沿って配置する「グリッドデザイン（Grid Design）」と、ブラウザーの横幅が変わってもレイアウトを維持したまま要素のサイズを調整する「フル…

レスポンシブデザイン基礎 ■レスポンシブデザインとは PC、スマートフォン、タブレット等様々なデバイスに最適化したウェブサイトを、共通のHTMLでデザインする手法。 HTMLをデバイスごとに作り変えるのではなく、HTMLはひとつで、CSSでレイアウトを調整する…

復習ポイント ■opacityとrgbaの違いとアニメーション opacity→すべての要素が透明になる rgba →背景色だけが透明になる 例えば、hoverして透明にしたい場合は、hover前の背景色もrgbaで指定しないといけない。 transition: 〇s; →〇秒かけて変化する 例）hov…

CSS3 変形アニメーション ■transform(変形) 二次元での移動、拡大縮小、回転 ・translate:二次元での移動 transform: translate(x軸方向の移動距離,ｙ軸方向の移動距離) ※間のカンマ忘れず！ .one { background: pink; transform: translate(300px,0) } ・sc…

アイコンをwebフォントで表示する方法 ■fontawesomeが便利 webサイト制作の際、アイコンもGoogleフォントのようにウェブ上にあるほしいフォントを指定してCSSに読み込ませることができる。 http://fortawesome.github.io 特にFacebookやインスタなどのSNSア…

ツリー構造の理解 HTMLを構成するツリー構造を理解する 要素を図に書くなどして、整理すること。 どことどこが対等で、どことどこが上下になっているか整理すること。 divが入れ子になって増えてくると、今自分がどこにいて、どこに何をしたいのか構造を理解…

無印良品のカレー カレーが大好きなので検索していたら発見。 無印良品のカレーは有名ですが、カレー特設サイトがあるとは思っていませんでした。www.muji.com 直感的な感想 カレー！！！！カレーのサイトってことがすぐわかる。こういうわかりやすいデザイ…

猿田彦珈琲 言わずと知れた、恵比寿のおしゃれコーヒーショップ。 よく出勤前にコーヒー買っていました。 直感的な感想 コーヒー屋さんなのに和風！（猿田彦だから和風なのかな 神様の名前だっけ・・？） 外国人観光客にもウケそうな、おしゃれなNIPPONって…

一般財団法人ユナイテッド・スポーツ・ファウンデーション スポーツを通じて社会貢献、地域活性化、地域とのかかわりを作ることを目的とした一般財団法人のホームページ。 グリッドレイアウトで作られているホームページを探していて発見。 明るくて楽しそう…

近畿大学 近畿大学のホームページ。近大マグロなどで有名な、「何か他とは違うことをやっていそう」な面白そうな大学。ホームページもやっぱり面白い！ www.kindai.ac.jp 直観的な感想 大学のホームページ（なんだか臭いイメージ）っぽくなくてすっきりして…

お盆の宿題の解説 １カラムの復習その２ ★ポイント★ ■まずはレイアウトを見て、構造を理解しよう ■なるべく共通部分を見つけてcssの記述を減らすこと ■ロゴ画像はh2でimgタグで直接入れてok 画像だけど文字と同じように text-align: center;で真ん中 <h2><img src="img/logo.gif"alt="ロゴ画像"></h2> h2 { b…

クロノバデザイン株式会社 店舗デザインをしている企業のHP。 www.chronoba.com 好きな点 ただの企業HPではなく、メディアとしても楽しめるようになっている ブログや、実績紹介なども読みやすく書かれてる 写真が多くてぱっと見で明るい印象 ポートフォリオ…

illustratorを使って作るもの 1．デザインカンプ ・四角が書ける ・移動コピーができる 2．地図 3．ロゴ トレースするときのメモ ・新規ファイルの上に、ファイル＞配置＞テンプレートにチェックして配置 ・アウトラインはCtrl Yで切り替えする ・ダイレクト…

ヒーローヘッダーを使ったレイアウト ヒーローヘッダーとは？ 一枚画像がフルで表示されている最近よくあるヘッダー。 画像が大きい＝データが大きいので、読み込みに時間がかかる場合もある。 パッと見でおしゃれな印象でとにかく今これが多い。 後でチェッ…

無印良品 いわずと知れた無印のサイト。 www.muji.net 好きな点 シンプルで無駄がなくて、でもちょっとおしゃれで遊び心があって、一目で「無印」とわかる！ 商品紹介がトピックスっぽく記事っぽくなっててメディアっぽい。 アイコンも画像になっていて見や…

why-juice? コールドプレスジュースのサイト。 www.why-juice.me 直感的な感想 とくかくおしゃれ！ 写真がたくさんあって、重なって表示させたりしていて、とにかく豪華。今っぽい。 写真を見れば何を伝えたいか一発でわかる。 考察 ジュースの写真とその素…

大きく考えることの魔術 出来ない理由ややらない理由を探すより、出来るための方法を探す。物事はすべて大きく、何のためにあるか考え、前向きであれ的な本。 大きく考えることの魔術―あなたには無限の可能性がある 作者: ダビッド・J.シュワルツ,David J. S…

FIND/47 日本の美しい写真の無料素材サイト。 find47.jp 好きな点 全体的にシンプルなデザインでスタイリッシュで見やすい。 ヘッダー部分に写真を大きく使って動かしていて、目を引く。 機能的にも探しやすく見やすい。 写真が引き立つように、配色が極力シ…

東京メトロ 『すすメトロ！』 東京メトロのリニューアルや新車両導入、安全への取り組みなどの情報公開サイト。 www.tokyometro.jp 好きな点 進化するイメージがドラえもんと合っていて、可愛いタッチが目を引く。 雲アイコンや虫眼鏡アイコンをクリックする…

SVGとは？ Scalable Vector Graphics JPEGやPNGのようなビットマップデータではなく、illustratorで使われているベクターデータ式の画像記述言語。 画像を線や面などの図形の集合体として扱う。 テキストベースのため、CSSやプログラムで動かすことができ、…

ブログはじめました。 2017年7月～半年間、学校でweb制作の勉強をしています。あとで自分で見返したりできるよう、ブログに残していこうと思います。 書こうと思っていること 授業のメモ 好きなサイト集め 読んだ本の感想 日々やるべき勉強ややることリスト …

web制作勉強のために自分がやることのリスト 毎日やること Googleデジタルワークショップ 1日最低3コマ ブログに授業のメモあげる コードドリル10分 イータイピング10分 月水金やること illustratorペンツール30分 バナー1個作る 火木土やること 好きなサイ…