ポイント レスポンシブサイトに必要なmetaの設定 cssは外部参照で記述し、適切なリセットをかける事 960pxまではPC、959~768pxまではタブレット、767px以下はモバイルレイアウトになるようにメディアクエリーを設定する flexプロパティを使ってコンテンツを…
前回の授業では擬似要素（before・after）を使ってハンバーガーメニューの3本線を作りましたが、スニペットを使う事で簡単に作る事が出来ます。 jonsuh.com アイコンの切り替えはjQueryでclass「is-active」をトグルさせるだけで良いので自身で記述してしま…
Webサイトを見る Webの勉強を始めるうえで大事な事はまず数多くのWebサイトを見る事です。 もちろん見ているだけで作れるようにはなりませんが、画家を志している人が名画を見るように、建築家を志している人が建築物を見るように、音楽家を志している人が音…
JavaScriptとは、米Netscape Communicationsによって開発されたスクリプト言語です。JavaScriptは主にWebブラウザ上で動作します。クリックすると画像が変わったり、要素が消えたり、現れたりというHTMLやCSSでは出来ない、いわゆるサイトの動的な部分を担当…
7月30日の作業データ index.html <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>画像にホバーアクション</title> <style> html,body,p{ margin: 0; padding: 0; } img{ vertical-align: bottom; } .wrapper{ width: 1000px; margin: 100px …</meta></meta></head></html>
developers.google.com レスポンシブWebデザイン（RWD）の制作 レスポンシブWebデザインでは、あらゆるデバイスに対して単一のWebページ（HTML）を使い、スクリーンサイズ（画面幅）を基準にCSSだけを切り替えてレイアウトを調整します。小さいスクリーンに…
以下のコンテンツをマークアップしてみましょう。 HTMLについて HTML（HyperText Markup Language）とは、ウェブ上の文書を記述するためのマークアップ言語である。 HTML5 HTML5は、HTML4に代わる次世代のHTMLとして2008年1月に草案が発表され、2014年10月に…
画像のマスク処理 マスク処理とは、特定の部分のみを表示し、それ以外の部分を表示しないようにする画像処理のことをいいます。 Photoshopには、クリッピングマスクとレイヤーマスクという２つの「マスク機能」があります。この２つのマスク機能を使い分ける…
CSS（Cascading Style Sheets） CSSとは、HTMLの要素をどのように修飾（表示）するかを指示する、W3Cによる仕様の一つ。HTMLによる文書構造と体裁を分離させるという理念を実現する為に提唱されたスタイルシートの具体的な仕様の一つ。 h1やpなどの意味付け…
Net Smart よりスマートなインターネットライフを HOME CONCEPT SERVICE ACCESS 必要なものは、ビジネスの価値を届けるデザインの力。 Net Smartは、ビジネスとユーザーを理解し、<br>関係性を構築するためのストーリーの設計とUXデザインをご提供し、よりスマー…
未経験から就職する為に必要なスキルは授業内でやっている事で充分ですが、さらにその先を見据えた場合、学ぶべきスキルはまだまだあります。仕事を始めると日々の仕事に追われ、なかなか新しいスキルを勉強する機会が持てないので、今の内に興味ある事の勉…
最近、よく見かける「１枚画像」を画面全体に表示させているようなフルスクリーンレイアウト。 「ヒーローヘッダー」と呼ばれています。 ヒーローヘッダー（Hero Header）とは、ウェブサイトのファーストビューに全画面の画像を使用するなど、巨大なイメージ…
positionとは要素の位置を自由に動かす事の出来るプロパティで、positionを使用する事でより自由なレイアウトが作れるようになります。 さらに、「z-index」を指定する事で要素の重なり順を変える事が出来ます。 とても便利なプロパティですが、その分制約も…
ベクター形式のロゴデータであれば、文字などを自由に編集できるので、場合によってはフリー素材などを使って編集してみましょう。 photoshopvip.net
masterブランチ メインブランチ。基本的には現在サーバーで運用されているデータ。このブランチに直接コミットはせずに下のdevelopブランチをマージするだけ。 developブランチ 開発用メインブランチ。細かい修正がコミットされる featureブランチ 機能追加…
まずは自身のPCに入っているgitのバージョンを確認してみましょう。 コマンド画面で簡単に確認出来るので、コマンド画面で以下のコマンドを入力しましょう。 gitのバージョン確認 $ git --version macは最初からgitがインストールされていますが、windowsは…
最近ではシングルページのサイトもよく見かけますが、ほとんどのサイトは複数ページをリンクさせていくという形でこちらの方が一般的です。 複数ページでサイトを作る際に気をつけないといけないのがフォルダー構成です。 URLの正規化 例えば、キリンのwebサ…
今回使用したプラグイン fancyapps.com 作成 http://felica29.starfree.jp/portfolio/ トップページ <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>ポートフォリオ</title> <link rel="stylesheet" href="css/style.css"> </link></meta></meta></head></html>
就職活動が本格的に始まると、ポートフォリオ以外にも履歴書、職務経歴書など文章を書く機会が増えてきます。もちろん仕事のついたら、どの職種であっても文章で他人とコミュニケーションを取る必要があるので、文章力は社会人の最重要スキルといって過言で…
年表や沿革などで使うタイムラインを作ってみましょう。cssのみで作れるシンプルな物のありますが、今回は「CodyHouse Framework」というフレームワークを使ったアニメーションタイムラインを作成してみます。 Vertical Timeline codyhouse.co使用するファイ…
作成した画像 本日のコードindex.html <html lang="ja"> <head> <meta charset="UTF-8"> <title>css-sprite</title> <style> html,body,ul,li{ margin: 0; padding: 0; } ul{ list-style: none; } a{ text-decoration: none; } .g-nav{ width: 800px; height: 50px; margin: 50px auto 0;/*上、左右、下*/ } .g-nav>ul{ displ…</meta></head></html>
フィルター機能、ソート機能が付いて可変グリッドレイアウトも実現出来さらにレスポンシブにも対応した、無料で商用利用も可能な Javascriptプラグインの「muuri.js」 haltu.github.io 付いている機能 フィルター機能 ソート機能 検索機能 Masonryレイアウト…
入れ子（ネスト）にできる style.scss header { width: 100%; height: 100px; background: #B6E3F4; h1 { text-align: center; } } style.css header { width: 100%; height: 100px; background: #B6E3F4; } header h1 { text-align: center; } メデイアクエ…
https://www.ditjapan.com/ sankoudesign.com html5ではvideoタグを使うことで簡単にページに動画データを埋め込む事が出来ますが、スマートフォンで見た場合にはiOSとandroidで対応している物、していない物が違うので注意が必要です。場合によっては以前の…
スマートフォンやタブレットでウェブサイトを見ている時にボタンをタップすると通話発信ができるようにするためには電話番号用のtelリンクを設定する必要がありますが、一部のスマートフォンではtelリンクを設定していない、電話番号で無いただの文字列もリ…
header画像の作成 photoshopのフィルター機能やレイヤースタイルなどを使い、header画像を作成しましょう。 使用するテキストCafé Italia Melbourne; Café Italia, Carlton; Get Menu, Reviews, Contact, Location, Phone Number, Maps and more for Café It…
「.htaccessファイル」を使った動的配信 動的な配信 | Google 検索デベロッパー ガイド | Google Developers スマートフォン利用者を自動的に「スマートフォン版サイト」へ誘導できるよう、「アクセス者の端末に応じて自動でアクセス先を振り分ける機能」を…
最近はスマホ時のUIで横スクロールのを採用するアプリやWebサイトをよく見かけます。ある程度のコンテンツ数がある場合に横スクロールを採用する事でスマホの様な小さい画面でも1つ1つの画像をある程度大きく見せる事が出来るというメリットがあります。また…
divタグ ・・ひとかたまりの範囲として定義する divタグはそれ自身は特に意味を持っていませんが、divで囲んだ範囲をひとかたまりとして、スタイルシートを適用するのに用います。 今回はh1やpをdivの中に入れ、カラムレイアウトを作っていきます。 カラムと…
HTMLで１番大事なのは正しい文章構造にマークアップ出来るか、です。 まずは文章をしっかりと読み、理解してからマークアップをし始めましょう。 アウトライン構造 アウトラインとは階層構造のことで、HTMLでのマークアップでは、このアウトラインを意識する…