使用するテキスト Net Smart よりスマートなインターネットライフを HOME CONCEPT SERVICE ACCESS 必要なものは、 ビジネスの価値を届けるデザインの力。 Net Smartは、ビジネスとユーザーを理解し、 関係性を構築するためのストーリーの設計とUXデザインを…
セレクタの指定方法はclassやid、子セレクタ、子孫セレクタ以外にも色々あるので、ぜひ覚えていきましょう。 webliker.info
header画像の作成 photoshopのフィルター機能やレイヤースタイルなどを使い、header画像を作成しましょう。 使用するテキストCafé Italia Melbourne; Café Italia, Carlton; Get Menu, Reviews, Contact, Location, Phone Number, Maps and more for Café It…
画像のマスク処理 マスク処理とは、特定の部分のみを表示し、それ以外の部分を表示しないようにする画像処理のことをいいます。 Photoshopには、クリッピングマスクとレイヤーマスクという２つの「マスク機能」があります。この２つのマスク機能を使い分ける…
近接の法則 近接の法則は、距離が近いもの同士が同じグループだと考えるという法則です。 それぞれの要素数が異なっていても同じグループと認識します。 適切な余白を設定することでユーザーが情報を適切にグループ分け出来るようします。 bulan.co cssをリ…
テーブル table要素を使うことで、表を作成することができます。 表内の行とセルは、table要素内に配置するtr要素とtd要素（th要素）で示します。 caption要素は、表のキャプション（タイトルや説明）を表します。table要素＝表全体を示す要素です。表の大き…
PCの使い方 物を作るうえで、その物を作る為の道具の使い方を覚える、という事が非常に大事になってきます。web制作者にとってパーソナルコンピューター（PC）は料理人にとっての包丁や美容師にとってのハサミと同様に、非常に大事な道具です。 今までのよう…
株式会社ベイジさんから、「即戦力レベルのwebデザイナーが最低限持っている知識を1カ月で身に付ける」ということを目的としたドリル、が公開されています。webサイトの全体像が把握出来る、非常に良く出来た資料なので、是非やってみましょう。 baigie.me
プログラミング学習 2020年以降、プログラミング教育が小学校で必修化されます。現在IT業界が抱えている問題として、今後さらにIT化していく社会に対しWebエンジニアをはじめとするIT人材の不足があります。 しかし、小学校のプログラミング教育は「プログラ…
CSSリセットとは、デフォルトでブラウザに付いているスタイルを打ち消す（リセットする）CSSのことです。 すべてのブラウザには、すべてのWebページに適用される「user agent stylesheet」と呼ばれるデフォルトのスタイルが付属しています。CSSリセットはブ…
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>
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>
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>
background-attachmentをfixedにすると簡単にパララックス（視差効果）を使ったスクロールが実装出来ます。 ただ、iOSはどういった理由か、この「background-attachment:fixed;」を頑なに対応させない為（ベンダープレフィックスを付けてもダメ）、iOSでは別…
2023.stateofcss.com ユーザーのアンケート結果からその年のCSSの流行りや動向がわかるThe State of CSS というサイトの中で、今後さらに利用頻度が増していくであろう、新しいプロパティをいくつか試してみましょう。 ただ、新しいプロパティはブラウザごと…
期間限定！ 2023年12月15日（金）までtsunaweb.book.mynavi.jp
Googleスプレットシートにはスクリプトを埋め込む機能が付いています。今回はこの機能を使って、自動返信メールを送ってみます。自動返信メールの本文を改行したい場合は「¥n」で「;」で本文が終了します。 function sendMailGoogleForm() { Logger.log('sen…
以前授業でも使ったGoogleフォームですが、設置も簡単でスプレットシートと紐付けする事でお問い合わせ内容をデータベース化する事も簡単に出来てしまう、とても便利なツールですが、唯一の問題が「自分でCSSをいじれない」事です。特にレスポンシブサイトに…
1.ラジオボタンが選ばれた状態でページ遷移させる 今回のフォームはトップページでコースの選択をしてページ遷移先で他の情報を入れる、という形になるので、トップページで選択したコースの情報を申し込みページまで持っていく必要があります。 javascript…
申し込みページ <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>モバイルに特化したwebサイト|お申込み入力ページ</title> <link rel="stylesheet" href="../css/style.css"> </head> <body class="input"> <header> <h1 class="pc-title">Sweet Box<…</h1></header></body></html>
See the Pen ホバーアニメーション付きのボタン by yachin29 (@yachin29) on CodePen.
"emmet.preferences": { "filter.commentAfter": "" }
トップページ <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>モバイルに特化したwebサイト</title> <link rel="stylesheet" href="css/style.css"> </head> <body id="top"> <div class="bg-wrapper"> <div class="bg-inner"></div> </div></body></html>
作例 https://codepen.io/yachin29/pen/ZEBNENN EFO（Entry Form Optimisation）は「入力フォーム最適化」の略で、入力フォームをユーザーにとって使いやすく入力しやすい形に最適化し、入力して内容を送信できるように改善を行う施策のことを指します。 対…
郵便番号を入れると自動的に住所が入るプラグインです。 使い方は非常に簡単で、基本的にはformのパーツにclassを付与するだけです。1、まずformタグに指定されたclassを指定します。 <form class="h-adr">2、つぎにformタグの中に、国名(p-country-name) をJapan に指定します <span class="p-country-name" style="display:none;">J</span></form>…
index.html <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>モバイルに特化したwebサイト</title> <link rel="stylesheet" href="css/style.css"> </head> <body > <div class="bg-wrapper"> <div class="bg-inner"></div> </div> </body></html>
@import url('https://fonts.googleapis.com/css2?family=Kiwi+Maru&family=Marhey&display=swap');font-family: 'Kiwi Maru', serif; font-family: 'Marhey', sans-serif;
「余白」はデザインする上でもっとも重要な役割を果たします。 近接の法則 近接の法則とは「ゲシュタルトの法則」の１つで、距離が近いもの同士が同じグループだと考えるという法則です。 それぞれの要素数が異なっていても同じグループと認識します。studyh…
小・中規模でのサイト制作では、それほど明確なcss設計をしなくても問題は起こりませんが、大規模案件になるとhtmlもcssもかなりの量になり、css設計がないと保守性が悪くなってしまったり、意図しないところに影響してしまったりします。また、複数人で制作…
今ではpcでもspでも最適に表示されるレスポンシブサイトは当たり前で、最近はむしろspでの表示を優先させ、pc時は画面いっぱいの固定背景（多くはbody要素を固定）を置き、モバイル幅の中にコンテンツを入れるようなspファースト、もしくはspオンリーのサイ…
