バナー広告とはディスプレイ広告の1つです。 広告代理店によってバナー広告のサイズは細かく決まっています。ここではGoogleのディスプレイ広告のガイドラインに沿って、モバイル用のバナーを作成してみましょう。 バナー広告の種類 モバイル用のバナーはPC…
<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> <header> <h1>ロゴ</h1> <…</header></body></html>
入れ子（ネスト）にできる style.scss header { width: 100%; height: 100px; background: #B6E3F4; h1 { text-align: center; } } style.css header { width: 100%; height: 100px; background: #B6E3F4; } header h1 { text-align: center; } メデイアクエ…
Homebrewとは？ 最近では、ソフトウエアや拡張機能のインストールをする際に個別にインストールやアップデートをするのでは無く、パッケージマネージャを利用して一元的に行うことが一般的になってきています。HomebrewはMacOS環境におけるいわゆるデファク…
スマートフォンの場合、PCのようにブラウザーから検索してWebサイトに行くよりも、ホーム画面に登録してあるアプリからワンタッチでWebサイトなりWebサービスを利用するケースがほとんどです。 なので、スマートフォンサイトを制作する場合には必ずスマート…
iOSでsummary要素の黒い三角形を消すには以下のコードを使っていましたが、それでは消えない場合があるので、下のコードに差し替えて下さい。 誤 summary::-webkit-details-marker{ list-style: none; } 正 details summary::-webkit-details-marker, detail…
PC時は通常のナビゲーションでSP時はハンバーガーメニューの時のjQuery $(function(){ let windowWidth = $(window).innerWidth(); //windowをリサイズした時 $(window).on('load resize',function(){ //resize毎に画面の幅を取得 let currentWidth = $(wind…
PC時は通常のナビゲーションでSP時はハンバーガーメニューの時のjQuery <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>pc時は横並びでsp時にハンバーガーメニュー</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <header> <h1>Lorem, ipsum</h1></header></body></html>
index.html <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>レストランサイトの作成</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>…</link></link></meta></meta></head></html>
HTML5 × CSS3 × jQueryのハイブリッドアニメーション 最近のWebアニメーションはスマホで表示する事も考慮し、動きの軽いアニメーションが求められています。その為には単一のスクリプトではなく複数のスクリプトを合わせる必要があります。 jQueryの特徴の1…
tomoyukiarasuna.com webdesigner-go.com note.com drive.google.com
2022年にInternet Explorerのサポートが完全終了し、IE対応する必要が無くなったので積極的にCSSの新しい機能が使えるようになりました。 2023年のHTMLとCSS speakerdeck.com backdrop-filterのデモ See the Pen backdrop-filterを使ったグラスモーフィズム …
レイアウトを考える時に常に独創的でユニークなレイアウトである必要はありません。それどころか訪問者の多いサイトを見れば、多くのサイトで似たようなレイアウトが採用されています。それは偶然でも手抜きでもありません。そこには次のような利点があるの…
フッター要素などにあるコピーライトの記述。サイトによって色々な書き方がありどう書いて良いか迷う所ですが、そもそもコピーライトの記述は絶対に必要なものでは無く、記述しようがしまいが、日本では著作物は法律でちゃんと守られます。それでも何となく…
index.html <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>高解像度ディスプレイに対応した画像設定</title> <style> *{ margin: 0; padding: 0; } p{ width: 320px; margin: 20px auto; } .photo{ width: 300px; margin: 40px auto; } img…</meta></meta></head></html>
index.html <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>レスポンシブ基礎3|フルードレイアウト</title> <style> *{ margin: 0; padding: 0; box-sizing: border-box; } .wrapper{ max-width: 1080px; display: flex; gap: 40px; margi…</meta></meta></head></html>
提出フォーム docs.google.com 作例 使用するテキスト Net Smart よりスマートなインターネットライフを 必要なものは、 ビジネスの価値を届けるデザインの力。 Net Smartは、ビジネスとユーザーを理解し、関係性を構築するためのストーリーの設計とUXデザイ…
作例 使用するテキスト Lorem ipsum Lorem ipsum dolor sit amet consectetur. HOME CONCEPT SERVICE ACCESS Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quae itaque quasi facere. Lorem ipsum dolor sit, amet consectetur adipisicing e…
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="stylesheet" href="css/style.css"> </head> <body> <h1>画像を使っ…</h1></body></html>
作業効率を上げる為にはショートカットキーを覚える事が非常に大事です。 ただ、よく使うショートカットキーは自然と覚えるものの、普段余り使わない物は忘れがちです。その都度調べていてはそれこそ時間のムダになってしまうので、こういった早見表をPCの隣…
CSS（Cascading Style Sheets） CSSとは、HTMLの要素をどのように修飾（表示）するかを指示する、W3Cによる仕様の一つ。HTMLによる文書構造と体裁を分離させるという理念を実現する為に提唱されたスタイルシートの具体的な仕様の一つ。 h1やpなどの意味付け…
webliker.info
Photoshopの基本的な使い方 Photoshopで行う作業は大きく別けると以下の３つ 画像を作る。 画像を補正する。 画像を加工する。 ・Photoshopの初期化 目的は、無駄に消費されているメモリの記憶をリセットすること。 アイコンをダブルクリック等で起動。 この…
HTMLとは、Hyper Text Markup Language（ハイパーテキスト・マークアップ・ランゲージ）の略で、Webページを作るための最も基本的なマークアップ言語のひとつです。 普段、私たちがブラウザで観ているWebページのほとんどが、HTMLで作られています。 もちろ…
画像のマスク処理 マスク処理とは、特定の部分のみを表示し、それ以外の部分を表示しないようにする画像処理のことをいいます。 Photoshopには、クリッピングマスクとレイヤーマスクという２つの「マスク機能」があります。この２つのマスク機能を使い分ける…
web制作会社の実績紹介ページはポートフォリオを作る上で非常に参考になるので、必ず目を通しておきましょう。 www.concentinc.jp designstudio-l.jp coosy.co.jp www.climarks.com depart-inc.com necco.inc spicato.com
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>Fresco Italiano｜トップページ</title> <link rel="preconnect" href="https://fonts.googleapis.com"> </link></meta></meta></meta></head></html>
非常に便利なGoogle Formですが、デフォルトの状態だと「送信ボタン」をクリックした後の動きが若干解り難いです。 お問い合わせフォームでは「送信ボタン」をクリックした後、「完了画面」にページ遷移する形が一般的です。 Google FormもJavaScriptなどで…
検索の仕方を覚える 検索の仕方を覚える、というのもサイト制作の習得の為に必要なスキルです。「AND」検索 例（池袋 カフェ） 一番使われている方法で２つ以上のキーワードを入力して検索精度を上げることができます。 キーワード間に一文字分のスペース （…
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>Fresco Italiano｜トップページ</title> <link rel="preconnect" href="https://fonts.googleapis.com"> </link></meta></meta></meta></head></html>
