2022-02-01から1ヶ月間の記事一覧
headers.netlify.app www.sidethree.co.jp <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>navgationの作成その1</title> </meta></meta></meta></head></html>
ページネーション（pagination）とは、日本語でページ割りという意味で、Web制作においては、検索結果一覧など、内容の多いページを複数のWebページに分割し、各ページへのリンクを並べてアクセスしやすくするために設置します。 github.com html <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> </meta></meta></head></html>
参考資料
www.kunkalabs.com github.com saruwakakun.com
Photoshopには非常に多くの機能があるので目的から逆算して学習した方がとても効率的です。自身で以下の機能が使えるか確認してみましょう。 上記のリストが大丈夫であれば次に、 レイヤーマスクの仕組みが理解出来ているか クリッピングマスクの仕組みが理…
index.html （furniture-store） <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>furniture-store</title> <link rel="stylesheet" href="css/style.css"> </link></meta></meta></meta></head></html>
jQuery github.com if($.cookie('access')){ //既にアクセス済みの場合はカーテンを非表示 $('#svg-wrapper').hide(); }else{ //初アクセスの場合はカーテンをfadeOutさせる $('#svg-wrapper').delay(4000).fadeOut(400); } //ファイルがロードされたら $(wi…
svgをcss3のアニメーションで動かす場合、下記のようにsvgファイルのコードをインラインでbody内に入れる必要があります。 <body> <svg class="likeButton" width="500px" height="500px" viewBox="0 0 500 500"> <circle class="explosion" r="150" cx="250" cy="250"></circle> <g class="particleLayer"> <circle fill="#8CE8C3" cx="130" cy="126.5" r="12.5"/> </circle></g></svg></body>
スマートフォンの場合、PCのようにブラウザーから検索してWebサイトに行くよりも、ホーム画面に登録してあるアプリからワンタッチでWebサイトなりWebサービスを利用するケースがほとんどです。なので、スマートフォンサイトを制作する場合には必ずスマートフ…
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>furniture-store</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <header> <…</header></body></html>
webデザイン マイクロインタラクション マイクロインタラクションとは、単一のシナリオに基づいてひとつの作業だけをこなす最小単位のインタラクションのことです。 goworkship.com webdesign-trends.net ドローイングアニメーション www.adobe.com Adobe Ca…
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>furniture-store</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <header> <…</header></body></html>
webサイト制作 JavaScript フッター要素などにあるコピーライトの記述。サイトによって色々な書き方がありどう書いて良いか迷う所ですが、そもそもコピーライトの記述は絶対に必要なものでは無く、記述しようがしまいが、日本では著作物は法律でちゃんと守ら…
WordPressとは wordpressとはヒューストンに住んでいた若者とイギリスに住んでいた若者がインターネットを通じてコラボレーションで開発を進めたオープンソースのプロジェクトです。2003年にリリース。 WordPressとは、オープンソースのブログソフトウェアで…
drive.google.com shibaco.wp.xdomain.jp
webサイト制作 SEOとは、”Search Engine Optimization” の略であり、検索エンジン最適化を意味する言葉です。検索結果でWebサイトがより多く露出されるために行う一連の取り組みのことを指します。 オーガニック検索 オーガニック検索（自然検索 / Organic S…
<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>furniture-store</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <header> <h1>furnitur…</h1></header></body></html>
カンプとは、広告やwebサイトなどの制作において、制作物の仕上がりを具体的に示すために作られる見本のことである。 「カンプ」の名称は英語名の「comprehensive layout」が省略されたもので、「comprehensive」には「包括的な」「総合的な」といった意味が…
webデザイン webサイトはおおまかに別けるとテキスト・画像・色の3つの情報から成り立っています。3つの中でも色はユーザーに最初に伝わる情報なので、配色次第でサイトの第一印象が決まってしまいます。初心者にとって配色は難しい部分ですが、まずは既存の…
webサイト制作 webデザイン 画像編 burst.shopify.com girlydrop.com stock.adobe.com o-dan.net イラスト編 illust-navi.com www.linustock.com tyoudoii-illust.com loosedrawing.com isometric.online enpitsu-sozai.com https://www.pexels.com/ja-jp/ s…
webサイト制作 webデザイン ワイヤーフレームとは「サイトの設計図」です。サイトを作成する前に「何を・どこに・どのように」画面に配置するかを明らかにする事で、実際の作成作業をスムーズに進める事が出来ます。また複数人で作業する場合やクライアント…
要件定義とは、Web サイトやアプリケーションなどの開発初期段階において、発注者と受注者の情報共有のために、実装すべき機能や満たずべき性能を第３者でも分かるように明確化しておく作業のことです。 要件定義は、Web サイトやアプリ開発において非常に重…
<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="stylesheet" href="css/style.css"> </head> <body> <h1>アコーディオンパネルの作成</h1> </body></html>
jQuery jQueryはライブラリーという性質上、どうしても動作が重くなってしまいます。PCではあまり気にならなくても、パフォーマンスの低いスマートフォンでは読み込み速度が遅くなる、という事が良くあります。jQueryを適切に記述する事である程度の改善は出…
jQuery bxslider.com bxsliderではデフォルトでは「touchEnabled」イベントがonになっていて、スマホ時でもスライド画像をスワイプで切り替える事が出来ます。しかし、これがonになっているとスライド画像を縦にスワイプしても画面がスクロールされないので…
webサイト制作 Webサイトの構成を明確にする為に必ず、Webサイト構成表を作成しましょう。「サイト全体で何ページになるか？」「どのページにどんな内容のコンテツを入れるか？」「どういう順番でコンテンツを並べたら、ユーザーが見やすい・解りやすいか？…
jQuery アニメーション スクロールに合わせて「Fade」「Flip」「slide」「Zoom」の4種類のアニメーションを簡単に実装出来、「duration」などの細かい設定も行えるスクロールアニメーションのプラグインAOSを実装してみましょう。 michalsnik.github.io inde…
webサイト制作 Webサイト上で新着情報や更新頻度の高い情報を表示させたい時には、TwitterやFacebookなど既存のSNSのプラグインを使うのが非常に便利です。 SNSのプラグインを使用すれば、わざわざHTML内のデータを触る事無く、SNSに記事を投稿するだけでWeb…
Illustrator ベクター形式のロゴデータであれば、文字などを自由に編集できるので、場合によってはフリー素材などを使って編集してみましょう。 photoshopvip.net blog.spoongraphics.co.uk
webサイト制作におけるワークフローの一例 ヒアリング クライアントとのヒアリングの時点で、方向性やサイトの目的、そしてサイトに盛り込むコンテンツなどを明確にします。また、その事をクライアントとしっかりと共有する事が大事です。その為にはしっかり…
