WEBサイト制作の勉強

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

cssでの色々な指定方法

授業ではjqueryを使ってハンバーガーメニューを作成しましたが、jqueryを使わずにcssのみでも作成出来ます。ただ要素の使い方が非常に癖があり、これはこれで解り辛さがあります。 また、細かい要素の指定方法が必要になるので、 「~」で同じ階層の後ろに並…

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

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

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

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

今回トレースするサイトは非常にシンプルで今時な感じがする全画面を使ったグリッドデザインで出来たサイトです。 今の段階で細かい部分の作りをするのは少し難しいので、まずはワイヤーフレームのようにレイアウトのみにしぼって作っていきましょう。www.bl…

jQueryとCSS3を使ったアニメーション

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

既存サイトのトレース

index.html <html lang="ja"> <head> <meta charset="utf-8"> <title>既存サイトのトレース</title> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="css/style.css"> </head> <body> <header> <h1>ロゴ</h1> <nav class="g-nav"> <ul> <li><a href="#">ボタン1</a></li> <li></li></ul></nav></header></body></html>

photoshopの描画モードを使う

描画モードを上手に使う事で、様々な合成が出来るようになります。 各描画モードの特性を覚えて目的にあった描画モードを使い、円滑に合成などの処理を行えるようになりましょう。 焼き印のようなロゴを作る 白い台紙とロゴ画像を1つのレイヤーに結合する 結…

モーダルウィンドウ

モーダルウィンドウ(英: Modal window)は、何らかのウィンドウの子ウィンドウとして生成され、ユーザーがそれに対して適切に応答しない限り、制御を親ウィンドウに戻さないユーザインタフェース設計になっているもの。モーダルウィンドウはGUIシステムで、…

スマートフォンでのナビメニュー

ナビゲーションメニューの押し易さ(使い易さ)というのはページ全体の使い易さに繋がる為、非常に大切です。 PCレイアウトの場合は、ある程度大きい面積の中でホバーアクションと組み合わせる事で、ある程度の解り易さは確保出来ます。 スマホでは制限され…

nth-child()とnth-of-type()を使い分ける

これまでの授業でもCSS3の疑似クラス「:nth-child(odd)」「:nth-child(even)」や「:nth-child(3)」は使って来ましたが、()の内に数式を入れる事で非常に便利になります。「:nth-child(2n+1)」= 「:nth-child(odd)」(奇数のみ指定)計算式 n=0: 2*0+1= 1 =…

この10年間でwebサイトがどのように変化したか

この10年でwebサイトがどの様に変わったか、が一目でわかる非常に興味深いサイトです。 10年前というとスマートフォンの普及も一般的では無く、多くのwebサイトはPCをターゲットにしていました。 なので、リンクの多くはテキストリンクだったり、リンク同士…

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

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

Faviconの設定

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

モバイルファーストでのレスポンシブサイト

SP PC https://school.yachin29.com/no-sticky/ <html lang="ja"> <head> <meta charset="utf-8"> <title>モバイルファースト</title> <meta name="viewport" content="width=device-width"> <link href="https://fonts.googleapis.com/css?family=Josefin+Slab:400,700" rel="stylesheet"> </link></meta></meta></head></html>

バナーの制作

Webデザイナーとして任される最初の仕事として代表的なものがバナー広告の制作です。 バナーのサイズ 広告の場合、ある程度はサイズに規定があります。仕事の場合大抵クライアントの方から指定があります。1種類のバナーに対し様々なサイズを用意する場合も…

レスポンシブデザイン基礎

レスポンシブWebデザイン(RWD)の制作 レスポンシブWebデザインでは、あらゆるデバイスに対して単一のWebページ(HTML)を使い、スクリーンサイズ(画面幅)を基準にCSSだけを切り替えてレイアウトを調整します。小さいスクリーンに対しては小さいスクリー…

解像度とピクセルの関係

ピクセル(英: pixel、px) ピクセル(英: pixel)、または画素とは、コンピュータで画像を扱うときの単位。640×480ピクセルの画像は、横640個、縦480個の点を並べて表現されていることを示す。ディスプレイなどのデバイスにおいては、ピクセルを単位として…

レスポンシブデザイン概論

レスポンシブデザインとは? レスポンシブWebデザイン(Responsive Web Design)とは、PC、タブレット、スマートフォンなど、あらゆるデバイスに最適化したWebサイトを、単一のHTMLで実現する制作手法です。ブラウザーのスクリーンサイズを基準にCSSでレイア…

東池袋のそば屋 生蕎麦あさひ本店

東池袋のそば屋「生蕎麦あさひ本店」は、東京メトロ有楽町線東池袋駅から徒歩1分のところにあるそば屋です。 東池袋にあるあさひ本店は大正13年創業で美味しいそばを作っております。 日替わりランチ、多くの種類のお酒、肴もございます。宴会や出前の予約も…

画像の作成

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

Photoshopでのマスク処理

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

Photoshop 基礎

Photoshopの基本的な使い方 Photoshopで行う作業は大きく別けると以下の3つ 画像を作る。 画像を補正する。 画像を加工する。 ・Photoshopの初期化 目的は、無駄に消費されているメモリの記憶をリセットすること。 アイコンをダブルクリック等で起動。 この…

東久留米市のトリミングハウストパーズ

東京都東久留米市の犬の美容室トリミングハウストパーズです。わんちゃんのトリミングはぜひ当店へお任せください。 trimtopaz.html.xdomain.jp

横浜のおいしいパン屋、日々ブロート

横浜のおいしいパン屋、日々ブロート ブロートとはドイツ語でパンの意。日々のパンを素材から見極めより自然体で味わえる。そんなパンを焼かせて頂いています。 hibibrot.starfree.jp

webライティングについて

webライティング Webライティング11のルール from Tsutomu Sogitani www.slideshare.net 今回のテーマは webの利便性と危険性 以下の記事を読み、今後のwebがどうなるか、自らの考えを述べよ。 死にゆくウェブ、犯人はアプリ-便利さの裏で消える開放性 jp.w…

第6回実技試験|レスポンシブサイトの制作

モバイルファーストでレスポンシブサイトにする事(ブレイクポイントは自由) ロゴはsvg形式にする事 flexboxを1箇所以上で使用する事 .containerの幅には最大値を指定する事 img要素をフルード化する事 画像のホバーアニメーションにcssのfilter機能を使う…

CSS3 filterでの画像加工

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

モバイルファーストでのコーディング

<html lang="ja"> <head> <meta charset="utf-8"> <title>北欧家具のECサイトをモバイルファーストでトレース</title> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="css/style.css"> </head> <body> <header> <div class="header-inner"> <h1><img src="img/logo.svg" alt="ロゴ"></h1> </div></header></body></html>

高機能なフィルタリング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…

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

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