WEBサイト制作の勉強

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

BIM講座 | フェリカテクニカルアカデミーがおすすめする 基礎から始めるBIM講座

フェリカテクニカルアカデミーのBIM講座|池袋 BIM講座が開講します。フェリカテクニカルアカデミーがおすすめする 基礎から始めるBIM講座 。BIM講座は、池袋で長年にわたり建築分野の講座を実施してきたフェリカテクニカルアカデミーの講師陣が、基本操作か…

2カラムレイアウトの演習

演習1 使用するテキスト 卵料理カフェ Cockeyolly Home ニュース メニュー 今月のおすすめ オリジナル雑貨 マップ メール 今月のおすすめ きのこのオムライス ふんわりアツアツのオムライスを、きのこたっぷりのドミグラソースでどうぞ。オムレツには新鮮な…

画像の作成

header画像の作成 photoshopのフィルター機能やレイヤースタイルなどを使い、header画像を作成しましょう。 使用するテキストCafé Italia Melbourne; Café Italia, Carlton; Get Menu, Reviews, Contact, Location, Phone Number, Maps and more for Café It…

floatと2カラムレイアウト

divなどのブロックレベル要素は通常ソースで書かれた順番に上から下に縦に並びます。 しかしfloatを使う事で要素を浮かす事が出来、さらに左右どちらかの方向を指定する事で横に並べる事が出来ます。 floatを使う事でHTML内の文章構造を変える事なく比較的自…

Photoshopでのマスク処理

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

CSS基礎

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

Instagram API を使ってインスタグラムの画像をサイトに表示させる

最近はwebサイト上にインスタグラムに投稿した画像を表示しているサイトも珍しくなくなってきました。 ここではInstagram API を使ってインスタグラムのデータをhtmlファイルに埋め込む方法を説明していきます。 Instagram APIを使って出来る事・出来ない事 …

児童発達支援・放課後等デイサービス あいる

児童発達支援・放課後等デイサービスあいるは、東京都東久留米市にある1歳半から学齢期のお子さまを対象にした児童教室です。経験豊富なスタッフが、一人一人の特性や発達段階等に合わせて、それぞれにあった指導方法、専門的な学習、コミュニケーション指導…

Automatorを使ってフォルダに画像の自動圧縮機能をつける

授業でも幾度となく出てきた「TinyPng」 画像のデータ量を半分以上軽くしてくれ、なおかつ画像の質もそこそこ保ってくれる、という便利なサービスで、画像を高解像度に対応させるためにはもはや必須と言っても良いくらいです。 このTinyPNG、実は中で動いて…

スマホアプリの種類

そもそもアプリとは? そもそもアプリとは「アプリケーションソフトウェア」の略で、ソフトウェアの分類のうち、特定の作業を行うために使用されるソフトウェアの総称である。 例としては、文書を作成するためのワープロソフト、表を作成するための表計算ソ…

広告関係4団体が「広告制作取引『受発注』ガイドライン」を策定

広告関係4団体「新しい働き方」円卓会議、広告制作取引「受発注」ガイドラインを策定。 広告業務に携わる関係者全員がこれまでの働き方を見直し、長時間労働を抑制するための取り組みとして、公益社団法人日本アドバタイザーズ協会、一般社団法人日本広告業…

Fetch API を使ってみる

var box = document.getElementById("box") fetch("logo2.svg") .then(function(response) { return response.text(); }).then(function(svg) { box.innerHTML = svg })

css3を使ったドロップダウンメニュー

css3のアニメーションでフェードインなどを表現する場合、「display:none」から「display:block」ではアニメーションを効かせる事が出来ないので、代わりに「visibility:hidden;」と「visibility: visible;」を使用します。 ただ、visibilityの指定のみだと…

ポートフォリオ制作に必要な「ツカミ」

ポートフォリオを制作する際に、もちろん中身の作品の質も大事ですが、ポートフォリオ自体の見た目も非常に大事です。特に面接などではポートフォリオの中身をじっくり見る時間が無く、トップページのパッと見の印象で評価されてしまうケースも珍しくありま…

ハンバーガーメニュー

<html lang="ja"> <head> <meta charset="utf-8"> <title>RWD-ハンバーガーメニュー</title> <meta name="viewport" content="width=device-width"> <style> html,body,p,ul,li,a{ margin: 0; padding: 0; line-height: 1.0; } ul{ list-style: none; } a{ text-decoration: none; } /*PCレイアウト*/ P{ display: none; } nav { width: 10…</meta></meta></head></html>

モバイル・ファースト・インデックス、始めました!

3月27日、Googleが検索結果に使用するインデックスを今までのデスクトップ版のコンテンツから、モバイル版のページを使用する方法に切り替えました。 これまで、Google のクロール、インデックス、ランキング システムでは、主にデスクトップ版のコンテンツ…

フレームワークとは?

フレームワークとは、アプリケーションソフトを開発する際によく必要をされる汎用的な機能をまとめて提供し、アプリケーションの土台として機能するソフトウェアのことです。元々は枠組み、下部構想、構造、組織という意味の英単語です。アプリケーションの…

コーディングルールの設定

複数人でコーディング作業を進める場合、共通のルールや約束事を「コーディング規約」として事前に決めておきます。例えば担当者が独自の勝手なルールでコーディング作業を進めてしまうと、その担当者以外の者がコーディング作業する事が出来なくなってしま…

background-clipとtext-fill-colorを使ってcssを使って文字で画像を切り抜く

以前、Photoshopでクリッピングマスクを使い、文字で画像を切り抜く加工を行いましたが、css3の「background-clip」と「text-fill-color」を使う事で同じような表現が出来るようになります。 background-clip background-clipプロパティは、背景の適用範囲を…

東村山市の工務店 相羽建設のa-plan(エープラン)

相羽建設a-plan 東村山市の工務店の規格住宅(企画住宅)で、自然素材を使ったあたたかい家です。子育て世代のためのOMソーラーやパッシブデザインを用いたシンプルな暮らしを「相羽建設」がご提案します。木造ドミノ住宅やi-works(アイワークス)をベース…

スプリットレイアウト(Split Layout)

スプリットレイアウト(Split Layout)とは スプリットレイアウトとは、中央などの境界線をもとにコンテンツを分割したレイアウトの事です。例えば左右に分割し、画面を大きく使用することで、制約のあるウェブページを有効に使うことができ、また各コンテンツ…

縦書きとrubyタグの使い方

「webは横書きが当たり前」そんな常識は変化しつつあります。 実はwebにおける縦書きの取り組みは、Internet Explorer5.5(2000年)が独自に実装していましたが、他のブラウザーでは実装されていませんでした。CSS3の策定を機会に最新の主要なウェブブラウザは…

Flexboxの使い方

Flexbox(Flexible Box Layout Module)はCSS3の新しいレイアウトモジュールで、複雑なレイアウトを今までより少ないコードでフレキシブルなボックスを組むことが出来ます。以前からあった技術ですが、各ブラウザーによって書き方が違ったり、仕様が変わった…

.htaccessの作成

「.htaccessファイル」を使った自動振り分け スマートフォン利用者を自動的に「スマートフォン版サイト」へ誘導できるよう、「アクセス者の端末に応じて自動でアクセス先を振り分ける機能」を作ってみましょう。この授業では「.htaccessファイル」を使って、…

Search Consoleの設定

サーチコンソールとはGoogle 検索結果でのサイトのパフォーマンスを監視、管理できる Google の無料サービスのことです。自分のサイトが Google 検索結果に表示されるようにするために Search Console に登録する必要はありませんが、登録していただくとサイ…

Illustratorでロゴを作る

Illustratorのアートブラシとアピアランス機能を使ってブラシで描いたイメージのクールなロゴを制作してみましょう。Illustratorのブラシライブラリーにはアーティスティックなものから幾何学模様まで、さまざまな種類のブラシが用意されています。これらを…

jQueryでのcookieの指定

jQueryでのcookieのコントロールにはプラグインを使用するのが便利です。 github.com <script> $(function(){ if($.cookie("access")){ $('.box').css({display:'none'}); } else { $('.box').delay(2000).fadeOut(2000); }; $(window).load(function(){ $.cookie("a</script>…

カラースキーム|色彩計画

色のもつ心理的・生理的・物理的な性質を利用して、まとまりのある雰囲気を作るなど、目的に合った配色を行うための設計。 サイト制作において配色は非常に大事で配色次第で、そのサイトのイメージが決まってしまうと言っても過言ではありません。そのサイト…

SVGを使ったアニメーション

carlphilippebrenner.comtympanus.nethttp://gardenstudio.com.br/gardenstudio.com.brjakearchibald.com SVGとは? SVG【 Scalable Vector Graphics 】とは、XMLベースの2Dベクター画像記述言語。2001年9月にW3C勧告として公開された。 ベクター画像は画像…

スマホで見た時にjQueryを無効・有効にする(ユーザーエージェントで判別する方法)

前回の授業では if($(window).innerWidth() <= 767){ }; のようにwindowの横幅を基準に条件分岐させるパターンをやりました。 今回のやり方はユーザーエージェントでスマホかPCか判別してやる方法です。 ユーザーエージェント ユーザーエージェント(UserAge…