WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

フェリカテクニカルアカデミー

レスポンシブ レイアウトの作成

ポイント レスポンシブサイトに必要なmetaの設定 cssは外部参照で記述し、適切なリセットをかける事 960pxまではPC、959~768pxまではタブレット、767px以下はモバイルレイアウトになるようにメディアクエリーを設定する flexプロパティを使ってコンテンツを…

cssプラグインを使ってハンバーガーメニューを作る

前回の授業では擬似要素(before・after)を使ってハンバーガーメニューの3本線を作りましたが、スニペットを使う事で簡単に作る事が出来ます。 jonsuh.com アイコンの切り替えはjQueryでclass「is-active」をトグルさせるだけで良いので自身で記述してしま…

Webサイトを見る、知る、そして作る

Webサイトを見る Webの勉強を始めるうえで大事な事はまず数多くのWebサイトを見る事です。 もちろん見ているだけで作れるようにはなりませんが、画家を志している人が名画を見るように、建築家を志している人が建築物を見るように、音楽家を志している人が音…

JavaScriptとは

JavaScriptとは、米Netscape Communicationsによって開発されたスクリプト言語です。JavaScriptは主にWebブラウザ上で動作します。クリックすると画像が変わったり、要素が消えたり、現れたりというHTMLやCSSでは出来ない、いわゆるサイトの動的な部分を担当…

CSS transitionを使ったホバーアクション

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でのマスク処理

画像のマスク処理 マスク処理とは、特定の部分のみを表示し、それ以外の部分を表示しないようにする画像処理のことをいいます。 Photoshopには、クリッピングマスクとレイヤーマスクという2つの「マスク機能」があります。この2つのマスク機能を使い分ける…

CSS基礎

CSS(Cascading Style Sheets) CSSとは、HTMLの要素をどのように修飾(表示)するかを指示する、W3Cによる仕様の一つ。HTMLによる文書構造と体裁を分離させるという理念を実現する為に提唱されたスタイルシートの具体的な仕様の一つ。 h1やpなどの意味付け…

コーポレートサイトの制作

Net Smart よりスマートなインターネットライフを HOME CONCEPT SERVICE ACCESS 必要なものは、ビジネスの価値を届けるデザインの力。 Net Smartは、ビジネスとユーザーを理解し、<br>関係性を構築するためのストーリーの設計とUXデザインをご提供し、よりスマー…

新しいスキルを身に着ける

未経験から就職する為に必要なスキルは授業内でやっている事で充分ですが、さらにその先を見据えた場合、学ぶべきスキルはまだまだあります。仕事を始めると日々の仕事に追われ、なかなか新しいスキルを勉強する機会が持てないので、今の内に興味ある事の勉…

ヒーローヘッダーを使ったサイト制作

最近、よく見かける「1枚画像」を画面全体に表示させているようなフルスクリーンレイアウト。 「ヒーローヘッダー」と呼ばれています。 ヒーローヘッダー(Hero Header)とは、ウェブサイトのファーストビューに全画面の画像を使用するなど、巨大なイメージ…

positionの使い方

positionとは要素の位置を自由に動かす事の出来るプロパティで、positionを使用する事でより自由なレイアウトが作れるようになります。 さらに、「z-index」を指定する事で要素の重なり順を変える事が出来ます。 とても便利なプロパティですが、その分制約も…

フリー素材を編集してロゴ画像を作成する

ベクター形式のロゴデータであれば、文字などを自由に編集できるので、場合によってはフリー素材などを使って編集してみましょう。 photoshopvip.net

ブランチモデル

Git

masterブランチ メインブランチ。基本的には現在サーバーで運用されているデータ。このブランチに直接コミットはせずに下のdevelopブランチをマージするだけ。 developブランチ 開発用メインブランチ。細かい修正がコミットされる featureブランチ 機能追加…

Gitのインストールとvs-codeを使ってgithubに自身のリポジトリーを作成

Git

まずは自身の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>

ビジネスに役立つ上手な文章の書き方

就職活動が本格的に始まると、ポートフォリオ以外にも履歴書、職務経歴書など文章を書く機会が増えてきます。もちろん仕事のついたら、どの職種であっても文章で他人とコミュニケーションを取る必要があるので、文章力は社会人の最重要スキルといって過言で…

CodyHouse Framework を使って簡単にタイムラインを作成する

年表や沿革などで使うタイムラインを作ってみましょう。cssのみで作れるシンプルな物のありますが、今回は「CodyHouse Framework」というフレームワークを使ったアニメーションタイムラインを作成してみます。 Vertical Timeline codyhouse.co使用するファイ…

css-spriteの作成

作成した画像 本日のコード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>

フィルタリングやソートが出来る高機能プラグイン「muuri.js」

フィルター機能、ソート機能が付いて可変グリッドレイアウトも実現出来さらにレスポンシブにも対応した、無料で商用利用も可能な Javascriptプラグインの「muuri.js」 haltu.github.io 付いている機能 フィルター機能 ソート機能 検索機能 Masonryレイアウト…

sassの便利な機能を使う

入れ子(ネスト)にできる 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を使った動的配信

「.htaccessファイル」を使った動的配信 動的な配信 | Google 検索デベロッパー ガイド | Google Developers スマートフォン利用者を自動的に「スマートフォン版サイト」へ誘導できるよう、「アクセス者の端末に応じて自動でアクセス先を振り分ける機能」を…

スマホでよくある横スクロールのUIを実装

最近はスマホ時のUIで横スクロールのを採用するアプリやWebサイトをよく見かけます。ある程度のコンテンツ数がある場合に横スクロールを採用する事でスマホの様な小さい画面でも1つ1つの画像をある程度大きく見せる事が出来るというメリットがあります。また…

divの使い方と1カラムレイアウト

divタグ ・・ひとかたまりの範囲として定義する divタグはそれ自身は特に意味を持っていませんが、divで囲んだ範囲をひとかたまりとして、スタイルシートを適用するのに用います。 今回はh1やpをdivの中に入れ、カラムレイアウトを作っていきます。 カラムと…

アウトライン構造について

HTMLで1番大事なのは正しい文章構造にマークアップ出来るか、です。 まずは文章をしっかりと読み、理解してからマークアップをし始めましょう。 アウトライン構造 アウトラインとは階層構造のことで、HTMLでのマークアップでは、このアウトラインを意識する…