2022-06-01から1ヶ月間の記事一覧
元画像 Photoshopの加工で一番大事なのはレイヤー構造です。レイヤー構造を理解する事で幅の広い加工が出来るようになり、バナー作成などにも役に立つので、様々な加工方法を覚える事がPhotoshop上達の一番の近道です。まずはレイアー構造をしっかりと把握し…
「 new Date()」を使う事で、現在の時間を取得することが出来ます。 <script> var date = new Date(); document.write(date); </script> 実際に表示してみると「 new Date()」には日時についての様々なデータが収納されているのが解ります。このままでは使いづらいので「 new …
JavaScript JavaScriptとは、米Netscape Communicationsによって開発されたスクリプト言語です。JavaScriptは主にWebブラウザ上で動作します。クリックすると画像が変わったり、要素が消えたり、現れたりというHTMLやCSSでは出来ない、いわゆるサイトの動的…
プログラムとは？ いよいよJavaScriptの授業が始まります。人によっては今回のJavaScriptがプログラムに触れる初めての機会になる場合もあります。プログラムという物を触った事が無い人はまず、「プログラム」という物がどういう物なのか、という事を理解し…
SVGとCSSを使ったアニメーション css3 tympanus.net gardenstudio.com.br jakearchibald.com SVGとは？ SVG【 Scalable Vector Graphics 】とは、XMLベースの2Dベクター画像記述言語。2001年9月にW3C勧告として公開された。ベクター画像は画像をビットマップ…
index.html <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>レスポンシブ演習</title> <link rel="preconnect" href="https://fonts.googleapis.com"> </link></meta></meta></meta></head></html>
PCレイアウト SPレイアウト 767px以下になったらspレイアウトに 使用するテキスト Cafe de Felicaは食とアートと音楽が交差する空間を創造します。 シェフ・矢島が提供するのは、イタリア料理に「東京」のエッセンスを取り入れたモダンイタリアン。 店内は、…
スプリットスクリーンとは、ひとつの画面がふたつに分けられたレイアウトのWebデザインです。画面内にふたつのパネルが配置され、それぞれにメインメッセージや写真、文字などが表示されます。カード型レイアウトに着想を得て発明されたといわれていますが、…
スマートフォンの場合、PCのようにブラウザーから検索してWebサイトに行くよりも、ホーム画面に登録してあるアプリからワンタッチでWebサイトなりWebサービスを利用するケースがほとんどです。なので、スマートフォンサイトを制作する場合には必ずスマートフ…
今までの内容を踏まえて実際にレスポンシブサイトを制作していきましょう。まずはシンプルな2カラムレイアウトをレスポンシブ化してみましょう。 今回のブレイクポイントは PCサイズ 960px以上 タブレットサイズ 641px～959px スマートフォンサイズ 640px以…
Retinaディスプレイ Retinaディスプレイの特徴は画面解像度の高さにある。iPhone 4の画面サイズは前モデルのiPhone 3GSと同じ3.5インチのままであるが、Retinaディスプレイの搭載によって解像度は320×480ピクセルから640×960ピクセルに、つまり倍になってい…
マルチデバイス対応にする必要性 この数年でスマートフォンからのネット利用者数、接続時間ともにものすごい勢いで増加しています。それに比べPCからの利用者は減少しています。国内の主要サイトもスマホからの利用者数の方がPCからの利用者より多くなってい…
最近ではシングルページのサイトもよく見かけますが、ほとんどのサイトは複数ページをリンクさせていくという形でこちらの方が一般的です。複数ページでサイトを作る際に気をつけないといけないのがフォルダー構成です。 URLの正規化 例えば、キリンのwebサ…
制作したデータをインターネット上で表示させるためには作ったデータをサーバーにアップロードする必要があります。サーバーには無料のものと有料のものがありますが、授業では無料サーバーを使用していきます。webサイト制作においてサーバーは必須のもので…
リセットcssには色々な方法があり、どれが1番優れているかは難しいので、自身の必要な用途に合わせて使い分けましょう。 html{box-sizing:border-box;-webkit-text-size-adjust:100%}*,:after,:before{background-repeat:no-repeat;box-sizing:inherit}:afte…
使用するテキスト Net Smart よりスマートなインターネットライフを HOME CONCEPT SERVICE ACCESS 必要なものは、 ビジネスの価値を届けるデザインの力。 Net Smartは、ビジネスとユーザーを理解し、 関係性を構築するためのストーリーの設計とUXデザインを…
Webデザイナーとして任される最初の仕事として代表的なものがバナー広告の制作です。 www.uniad.co.jp バナーのサイズ 広告の場合、ある程度はサイズに規定があります。仕事の場合大抵クライアントの方から指定があります。１種類のバナーに対し様々なサイズ…
演習１ <body> style要素 style element HTML文書内にまとめて設定します。 </body> 演習２ <style> html,body,h1,h2,p{ margin: 0; padding: 0; } div{ width: 600px; background-color: mediumseagreen; padding: 10px; } h1{ color: #FFF; padding: 20px 0; } h2{ background-…
www.ditjapan.com まずはhtmnl5のvideoタグのプロパティを覚えましょう src="" (URL)ファイルのURLheight="" 数値 要素の高さwidth="" 数値 要素の幅autoplay="" autoplay 自動的に再生を行います。controls="" controls 動画再生をコントロールするUIを表示…
演習１<body> style要素 style element HTML文書内にまとめて設定します。 </body> 演習２<body> About wine Chianti Classico Riserva 1435年創業の由緒あるワイン醸造メーカーの名家マッツェイが所有するぶどう園は、いたるところにローマ時代の遺跡が残る小さな集落にありま</body>…
カラムレイアウトwww.weblab.co.jpdivタグ ・・ひとかたまりの範囲として定義するdivタグはそれ自身は特に意味を持っていませんが、divで囲んだ範囲をひとかたまりとして、スタイルシートを適用するのに用います。今回はh1やpをdivの中に入れ、カラムレイア…
