WEBサイト制作の勉強

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

Webデザイン

色の組み合わせを人工知能が選んでくれる!

複数の色を組み合わせる場合、バランスが非常に難しく苦戦する人も多いと思います。このツールを使えば、カラーセオリーに基づいた学習型のAIが色の組み合わせをゼロから組み合わせてくれます。また指定色がある場合、その指定色に合った組み合わせを作成す…

アニメーションを使ったナビボタン

<body> <header> <h1>ナビボタン</h1> <p class="btn"><span class="icon"></span></p> </header> <nav id="menu"> <ul> <li><a href="#">ホーム</a></li> <li><a href="#">メニュー</a></li> <li><a href="#">お店について</a></li> <li><a href="#">アクセス</a></li> </ul> </nav> </body>

webサイト制作(午後科)が7月10日より開講します

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

Googleとアドビ、オープンソースフォント「Noto Serif CJK(源ノ明朝)」をオープンソース化

Googleとアドビシステムズ株式会社は4日、日本語では明朝体にあたる新たなセリフ書体を発表した。Googleは「Noto Serif CJK」、アドビは「源ノ明朝」の名称でオープンソースフォントとして無償で提供する。 Noto Serif CJKは、2014年にリリースされたゴシッ…

今のトレンドを知る

物を作る上で、必ずしもその時々のトレンドを盲目的に取り入れれば万事OKという訳でないですが、選択肢の1つとして知っておく事はとても大事です。 特にポートフォリオなどに「ツカミ」として、最新のトレンドを取り入れる事で、面接などでアピール出来るの…

スマートフォンサイトの特性を知る

スマートフォンサイトの特徴 カラムのリキッドデザインが基本 縦位置と横位置の両方を考慮する 画面サイズとページ容量を考慮する 情報量、ページの長さ、遷移のバランスを考慮する HTML5+CSS3で制作する Flashは使用しない スマートフォンサイト制作 よくあ…

各OSベンダーのデザインガイドライン

各OSベンダーのデザインガイドラインを知る webサイトを「ユーザーが使う製品」として考えるならば、その製品に伴うデザインやカラースキームは個人の思いつきや突然のヒラメキで作るものでは無く、ある種のガイドラインに沿った物であるべき、という考え方…

JPEG, GIF, PNG画像をSVGに変換する無料のオンラインサービス -PicSVG

ベクター形式であるSVG画像は拡大・縮小が可能で、非常に使い勝手が良いのですが、元データがビットマップ画像(JPEG, GIF, PNG)などの場合、ペンツール等でパスに変更する必要があります。 ペンツールに慣れていない人にとって、この作業は意外と大変です…

最新のwebトレンドを知る 2016年上半期

もちろん、常に最新のトレンドを入れなければいけない訳では無いですが、やはり見る事、知る事は非常に大事です。下記のブログでは、最新のトレンドとして主に5点のポイントを上げています。1. ブラウザいっぱいに表示して、スクロール無し 2. 固定表示は見…

Webサイト制作の勉強

Webサイトを制作するうえで、実際に今のwebサイトにはどういう見せ方・動きがあるのかを知る、という事はとても大事です。PCサイトのUIデザインにおける12のトレンド | sogilog サイト制作の勉強をする際にインターネット上から情報を得る、という事も非常に…

Webサイトを見る、知る

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

ピクセル(pixel)と解像度

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

グラデーションツールでボタン作成

グラデーションツールを使う前に、なぜわざわざグラデーションツールを使って色を塗るのかを理解しましょう。 グラデーション=光と影 ディスプレイという平面の世界に、立体感や質感を出すために光の当たっている部分とそうでない部分(影の部分)をグラデ…

丸と縦

www.configuratuvw.mx vlog.it www.fieldcorp.jp Clippy — CSS clip-path maker www.miyama-sansou.com 81-web.com tategaki.github.io

配色の基本

webサイトはおおまかに別けるとテキスト・画像・色の3つの情報から成り立っています。 3つの中でも色はユーザーに最初に伝わる情報なので、配色次第でサイトの第一印象が決まってしまいます。 初心者にとって配色は難しい部分ですが、まずは既存のサイトやサ…

マウスホバーした進入方向からオーバーレイ要素がスライドしてくるjQuery

http://yachin29.html.xdomain.jp/sample2.html 参考サイト wiseyeti.co.ukwiseyeti.co.uk index.html <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <title>無題ドキュメント</title> </meta></meta></head></html>

グリッドシステム計算ツール「Gridpx」

グリッドデザインを作る際の面倒な計算がとっても簡単に出来てしまう、便利なグリッドシステム計算ツール「Gridpx」 Gridpx:グリッドシステム計算ツール | Webデザイン便利ツールwww.kenjisugimoto.com

フッターのデザイン

最近のWebサイトはヘッダー部分やコンテント部分には大きな画像やjQueryなどの動きを付けて、ボリュームある作りにするのが非常に一般的で、サイトを制作する際にもページ上部にばかり意識が行き、フッター(ページ下部)は非常にシンプルで場合によってはコ…

Firefox 38.0をリリース ルビに対応

日本時間の2015年5月12日(火)から「Firefox 38」の正式日本語版がダウンロード可能となっています。デスクトップ版では多くの日本ユーザーからの要望を受けてテキストのルビ表示がサポートされたほか、AdobeのDRM技術である「Adobe Content Decryption Modul…

世界各国のブラウザシェアトップが一目で解る地図

世界各国のブラウザシェアトップが一目で解る地図

レスポンシブデザイン

RWD / Responsive Web Design Webデザインの手法の一つで、様々な種類の機器や画面サイズに単一のファイルで対応すること。表示された機器の種類やサイズに応じて表示内容が最適な状態に変化するよう設定された単一のファイルを制作し、すべての機器に同じよ…

Webフォント

Webフォントとは? 元来、Webブラウザは端末にインストールされているフォントを呼び出し文字を表示する。端末のフォント如何では、Webデザイナーが意図しないWeb表示がなされてしまい、またフォントに関するWebデザインに制約が生じてしまう。フォントを画…

サイト制作のための勉強

PCサイトのUIデザインにおける12のトレンド | sogilog PCサイトのUIデザインにおける12のトレンド | sogilog