WEBサイト制作の勉強

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

スプリットレイアウト(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…

resizeに対応したイベント設定

レスポンシブサイトでは、読み込み時だけで無く、ブラウザーをリサイズした時にもイベントを指定する必要があります。 例えばPC時では通常のナビゲーションボタンでスマホ時にはハンバーガーメニューの時などです。PC時ではナビゲーションボタンはもちろん表…

高機能なフィルタリングjQueryプラグイン 「Shuffle.js」

vestride.github.io デモページ http://yachin29.com/school/shuffle/ jQuery $(function() { $('#btn li').on('click', function() { var $this = $(this), $grid = $('#animationList'); $('#btn .active').removeClass('active'); $this.addClass('active…

jQueryでクリックする度にテキストを切り替える

ボタンを押すたびに「もっと見る」と「閉じる」が切り替わるようにjqueryを設定します。 ボタンを押すたびにON・OFFを切り替えるスイッチ的な物は以前であれば「Toggle」を使って簡単に出来ましたが、jQuery1.9以降で廃止されたので、代わりに「flg」を使っ…

Googleフォームに自動返信機能を付ける

Googleフォームに自動返信機能を付ける 作ったフォームをカスタマイズして、フォームを記入してくれた人に自動でメール返信が出来る機能を追加します。 自動返信機能を付ける事でフォームを利用したユーザーにタスクの進行状況を伝える事が出来るので、結果…

CSS3 filterでの画像加工

今までPhotoshopで行っていた、ぼかしやグレースケールなどの加工がcssだけで可能になりました。 それにより、フェルタ毎に複数の画像を用意する必要がなくなります。 cssのfilterプロパティで出来る事 grayscale(グレースケール) saturate(彩度) sepia…

CODEPENを使ってコードを掲載させる

codepen.io CODEPENとは? 「CODEPEN」とは、HTML・CSS・JSなどのソースコードを保存・公開・共有できるWEBサービスです。他の人が作ったソースをその場で編集できたり、プレビューで確認出来、動作確認などにも使えて非常に便利です。ソースをブログやWEBサ…

web制作に関して読んでおくべきブログまとめ

coliss.com stocker.jp photoshopvip.net liginc.co.jp ics.media on-ze.com weboook.blog22.fc2.com www.webopixel.net www.wan55.co.jp blogs.adobe.com

タッチアイコンの設定方法

スマートフォンの場合、PCのようにブラウザーから検索してWebサイトに行くよりも、ホーム画面に登録してあるアプリからワンタッチでWebサイトなりWebサービスを利用するケースがほとんどです。 なので、スマートフォンサイトを制作する場合には必ずスマート…

Faviconの設定

favicon(ファビコン)は、ウェブサイトのシンボルマーク・イメージとして、ウェブサイト運営者がウェブサイトやウェブページに配置するアイコンの俗称である。favorite icon(フェイバリット・アイコン:お気に入りアイコン)という英語の語句を縮約したも…

Traversingメソッドを使ったタブパネル

Traversingメソッドを利用 Traversingのメリット トラバースを利用することで、イベントが発生した要素に関連した要素を操作する事ができます。ボタンが複数ある場合などは「this」を使う事になりますが、このトラバースを使えば操作したい要素を「this」か…

求職者支援訓練 webサイト制作科 2018年2月開講クラス募集中

東京池袋のフェリカテクニカルアカデミーでは、只今平成30年2月20日より 開講する「Webサイト制作科」の受講生を募集しています。 600時間を超える講座を無料で受講出来、プロになるために必要なスキルを身につける事が出来ます。また、職業訓練受講給付金と…

jQuery animateメソッドを使ったスムーススクロール

サイトのトップに戻すだけであれば、以下のようにシンプルな記述で大丈夫です。 $(function() { $("#to_top").on('click', function () { $('html,body').animate({ scrollTop: 0 }, 'swing'); return false; }); }); 複数の場所にスムーススクロールで移動…

jQueryの「animate」メソッドを使ったアニメーション

animateメソッドとは? jQueryのanimateメソッドを使うと簡単にアニメーション(値を変化)させることが出来ます。 animateメソッドは値で指定出来る物(margin、color、widthなど)に対し有効です。 $('#box').animate({ 'left': '500px', 'top': '300px' });…

レスポンシブロゴ

レスポンシブロゴ(Responsive Logos)とはサイト全体のレイアウトをデバイス毎に変えていく、レスポンシブ デザインは近年、非常に多くのサイトに採用され、今ではwebサイトデザインのスタンダードな考え方になっています。 レスポンシブロゴ(Responsive L…

clickイベントとtransform

最近のWebアニメーションはスマホで表示する事も考慮し、動きの軽いアニメーションが求められています。その為には単一のスクリプトではなく複数のスクリプトを合わせる必要があります。 jQueryの特徴の1つであるアニメーション機能を使うと、手軽にアニメー…

jQueryとは

jQuery(ジェイクエリー)とは、ウェブブラウザー用のJavaScriptコードをより容易に記述できるようにするために設計された軽量なJavaScriptライブラリである。ジョン・レシグが、2006年1月にリリースした。様々な場面で活用されており、JavaScriptライブラリ…

Webサイトの構成表の作成

Webサイトの構成を明確にする為に必ず、Webサイト構成表を作成しましょう。 「サイト全体で何ページになるか?」「どのページにどんな内容のコンテツを入れるか?」「どういう順番でコンテンツを並べたら、ユーザーが見やすい・解りやすいか?」 などは、必…

11種類のWebサイトのレイアウト

1. シングルカラム2. 画面分割 3. 非対称レイアウト4. カードグリッド5. マガジン6. ボックス7. 固定サイドバー8. 看板画像9. F型レイアウト10. Z型レイアウト11. 大きな背景写真 blogs.adobe.com

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

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

レスポンシブに対応した定義型リストの制作

使用するサンプルテキスト <div class="inner news-box"> <div class="news"> <h2>ニュースリリース</h2> <dl> <dt>2018年1月4日</dt> <dd>EC限定“バレンタイン用ギフトセット”「GRAND KIRIN GRAND GIFT(グランドキリン グランドギフト)」をAmazon.co.jpおよびLOHACOにて数量限定で先行発売</dd> <dt>2017年12月27日</dt> <dd>紅茶飲料のNo.1ブランド「</dd></dl></div></div>…