読者です 読者をやめる 読者になる 読者になる

最後: スマホ対策とオリジナルサイト

今日やること モバイルでも閲覧できるWebサイトをつくる 学ぶこと 「レスポンシブwebデザイン」 今日のステップ 過去に課題提出したフォルダを開く(なければ「pinterest」フォルダで) index.htmlに「ビューポート」を追加 cssに「メディアクエリ」を追加 デ…

画像をクリックしたら大きくなるようにする & Javascriptの簡単な理解

今日やること 画像をクリックしたら大きくなるように Javascriptのライブラリを自分のサイトに入れてみる 準備するもの 前回使った「pinterest」というフォルダを今回も使います。 また、後半では年末に課題として提出してもらった作品に前回、今回会得した…

Pinterestみたいなボックスをつくる

概要 Pinterestみたいな、互い違いのレイアウトをつくってカッコイイサイトを目指します。 このようなレイアウトがつくれることによって単純に見てる人は「すごい」って思います。 完成形 準備物 通常通りのHTMLフォルダ(思い出しましょう) 通常通りのHTMLフ…

スマホ対応を考える

概要 スマホでサイトが見れなければ意味が無い・・・と言ってもいいくらい、スマホからサイトを見ることは重要です。 これまでの知識を活かし、スマホでも見れるようにサイトを改造してみましょう。 アジェンダ スマホで見た時にも崩れないような画面をつく…

FC2ホームページを使ってWebサイトを一般公開する

最終課題 FC2ホームページに自分のサイトをアップロードし、そのURLを僕あてに送信 送信先メールアドレス -> sy_tanaka@vivivit.co.jp 本文にURLのみ記載し、特別な理由がなければ本文・件名ともになくて大丈夫です。 http://sniresnriesa.web.fc2.com/index…

オリジナルサイトをつくる

概要 今日から、本格的にオリジナルのサイトを作っていきます。 流れ PhotoshopやIllustratorを用いてサイトのデザインをつくります。 どうやってHTML/CSSを組んだらいいかを考えます。 実際にフォルダをつくって、作業を開始します。 まずはグラフィックソ…

既存のサイトを真似てみる(Webデザインスケッチ)

一旦復習 テキストや画像を並べるには? 並べたい要素すべてに対して、cssでfloat: left;を指定してあげる。並べたい要素の親要素には、必ず.cfクラスを付けてあげる 例えばどうやるの? こないだのメニュー↓みたいなのをやろうとしたとします。 これは本当に…

HTMLとCSSをもっと深く知る

概要 これまではHTML/CSSの入門編。ここからは「これ知ってたらとりあえず現場出れる」の知識。 最初に用意するもの いつも通り「161108」という名前でフォルダをつくる 中身はいつもどおりこんな感じ 161108(フォルダ) index.html(ファイル) assets(フォル…

もっとおしゃれなギャラリーサイトをつくる

概要 HTML, CSSを用いておしゃれなギャラリーサイトをつくります。 HTMLデバッグの方法も学びます。 要件 世界観が伝わりやすいように、イラストで画面が埋まるように キャッチコピーをつける イラストを数点タイルさせる 完成図イメージ ステップ プロジェ…

プロフィールページをつくろう2

ステップ まず画像を用意(アイコン1枚と、同じサイズにトリミングされた作品4点) プロジェクトフォルダ「profile」を作成する profile内にindex.htmlを作成する index.htmlを編集 app.cssを編集 ブラウザで確認 完成! 必要なAtomの設定 cmd + ,で設定画面を…

プロフィールページをつくろう

ポートフォリオサイトを今日はつくります。 こんな感じです。 本当はさっそくこれやりたいんですけど、CSSでもうちょっとやらなければいけないことがあるので、そこだけやっときましょう。 前回の続きです。 前回はボタンつくりましたね。 CSSを分割する さ…

CSS入門続き

アジェンダ 復習(HTMLとフォルダのつくり方) CSS入門リベンジ 復習 やること HTMLのフォルダを作って、画像を表示するところまで 復習できること フォルダについて リンクについて Atomについて 演習 次のスクリーンショットのようなフォルダを作成し、画像…

CSS入門

今日のアジェンダ CSSとは ファイルを分割する 「パス」とは まず復習 HTMLとCSSとは、 HTMLが文字を書くためのプログラム、 CSSがHTMLで書いた文字をデザインするためのプログラム。 HTMLのお約束事 HTMLにはいくつかのお約束があります。 たとえば、日本語…

HTMLとCSS入門

HTMLとCSSを用いて、ブラウザに文字を表示する アジェンダ 開発環境の確認 絶対パスと相対パス 練習 目的 突貫工事でポートフォリオサイトがつくれるようになるための知識を身につけるため、HTML/CSSの文法よりも、つくりながら覚えていく方法をとる。なので…

はじめに見るページと自己紹介

今日のアジェンダ 9/16のテキスト code-il2.hatenablog.com 1. 自己紹介 2. この講座の意味 生きていくための武器を増やす イラストレーターを取り巻く環境 参考リンク: 日本のコアコンテンツであるマンガは、思いのほか岐路に立っている|WIRED.jp 参考リン…

最終課題提出メールアドレス

課題提出先↓ sy_tanaka@vivivit.co.jp

オリジナルのWebサイトをつくろう

概要 今日から、本格的にオリジナルのサイトを作っていきます。 宿題で出していたデザインを、HTML, CSSを用いてコーディングしていきましょう。 まだ用意してない場合 ポートフォリオサイトをつくりましょう。 自分なりにポートフォリオサイトを検索し、Pho…

デザインスケッチをしながら、もう一度丁寧にHTMLとCSSの勉強

概要 色々なHTMLを組んでみた今、あらためて基本から学び直す。 2回に分けて行います。 今日の流れ 題材を元にコーディング。 今日の題材はインスタグラム。 ※(宣伝)ビビビクリエイターズとして、ユーザーの作品を公開中ですので、ぜひフォローしてみてくだ…

もっとデザインの優れたプロフィールサイトをつくる

ゴール ステップ プロジェクトフォルダprofile3を作成する profile3内にindex.html、assetsフォルダを作成する assetsフォルダをつくる assetsフォルダの中にcssフォルダとimagesフォルダをつくる 必要な画像をimagesフォルダに入れる index.htmlを編集 app.…

おしゃれなギャラリーサイトをつくってみる

概要 HTML, CSSを用いておしゃれなギャラリーサイトをつくります。 HTMLデバッグの方法も学びます。 要件 世界観が伝わりやすいように、イラストで画面が埋まるように キャッチコピーをつける イラストを数点タイルさせる 完成図イメージ ステップ プロジェ…

プロフィールページをつくってみよう

概要 HTML, CSSを利用して、最初のプロフィールページをつくってみます。 プロフィールページの要件は次の通り。 アイコン(顔写真でも、イラストでも大丈夫です。) 表示名 自己紹介文 これまでのプロジェクトの画像を何枚か 完成図イメージ ステップ プロジ…