SNSリンク集を作ってみよう テキストP.062〜 課題制作の目的 HTML+CSS基本の理解 サイト制作必須ツールの使い方（VS Code、デベロッパーツール） CSSの実践的な使い方 HTMLの入力 CSSファイルは、外部参照の記述をする 画像は、「img」フォルダーを作成して…
Grid Garden - Lv. 22/28 grid-template-columns が受け取れるのはパーセンテージだけではありません。 ピクセルや em などの単位も指定できます。異なる単位を混ぜて使うことさえできます。ここでは、3列をそれぞれ 100px、3em、40% と指定してみましょう。…
Grid Garden - Lv. 15/28 grid-column と grid-row をあわせて使えば、もっと広いグリッドも指定できます。試してみてください！ #garden { display: grid; grid-template-columns: 20% 20% 20% 20% 20%; grid-template-rows: 20% 20% 20% 20% 20%; } #water…
Grid Garden - Lv. 8/28 もう一度 grid-column-end で span キーワードを使ってニンジンに水をやってみてください。 #garden { display: grid; grid-template-columns: 20% 20% 20% 20% 20%; grid-template-rows: 20% 20% 20% 20% 20%; } #water { grid-colu…
Grid Garden CSSグリッドを使用してキャロットガーデンにどれだけよく世話をすることができますか? このゲームでは、2次元グリッドレイアウトをケーキにする強力な新しいモジュールであるCSSグリッドをマスターすることで、ニンジン作物に水をやり、雑草を毒…
3つのレイアウト手法 floatレイアウト flexboxレイアウト gridレイアウト float レイアウトの問題点 横並びにしたブロックの高さを揃えられない 横並びにしたブロックは上揃えにしかならない 幅の計算があわないとカラム落ちする float解除の仕組みが分かり…
お問合せフォーム - Google フォーム Googleフォーム作成 Googleドライブ - Googleフォーム お名前（記述式）：必須 メールアドレス（記述式）：必須 お問い合わせ内容（段落） 新規スプレッドシートとリンクする お問い合わせ内容を記録しておく Googleフォ…
お問合せフォーム HTMLフォームを作成 HTML記述例 <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <title>お問合せフォーム</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="container"> <h1>お問い合わせ</h1> <p>お気軽にお問い合わせください。</p> </div></body></html>
モバイルファースト - header例 HTML記述例 <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <title>Menu</title> <link rel="stylesheet" href="css/menu.css"> </head> <body> <header class="header"> <div class="container"> </div></header></body></html>
レスポンシブWebデザイン入門 ascii.jp HTML記述例 <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <title>トップ|allWeb 豆はカラダにイイ</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <header class="header"> <h1></h1></header></body></html>
1段組の可変レイアウト 要素の可変 <div class="container"> <p>木曾路はすべて山の中である。<br>あるところは岨づたいに行く崖の道であり、あるところは数十間の深さに臨む木曾川の岸であり、あるところは山の尾をめぐる谷の入り口である。一筋の街道はこの深い森林地帯を貫いていた。東</p></div>…
レスポンシブWebデザインの誕生 Responsive Web Design は、2010年イーサン・マルコッテ氏が提唱した制作手法です alistapart.com レスポンシブWebデザイン レスポンシブWebデザインとは、ブラウザーのウィンドウ幅に合わせてCSSでWebページのレイアウトを変…
画面サイズ PCの推奨サイズ 推奨サイズは「1920*1080」 gs.statcounter.comシェア率の高いデバイスの等倍サイズ 実際には、デスクトップ全体にブラウザを使用することは少ないと思われるので「1280pxまたは1440px」で作成します スマートフォンの推奨サイズ …
マルチデバイスに対応するときの指標 2007年にiPhoneが登場して以来、デバイスの多様化が進む中「どうやって小さい画面に対応するのか」が課題となってきました Google モバイルガイド マルチデバイス対応において求められる考え方や技術的な手法がまとめら…
蛍光ペンで線を引いたような見出し linear-gradient を利用する 上半分を透明、下半分を不透明度50％ <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <title>蛍光ペンで線を引いたような見出し</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <h1>ゆく河の流れは絶えずして、しかももとの水にあらず。</h1> …</body></html>
フルスクリーン - レスポンシブ スマートフォン・パソコンでフルスクリーンで表示する HTML記述例 <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <title>ヒーローイメージ</title> <link rel="stylesheet" href="css/style.css"> <link rel="preconnect" href="https://fonts.googleapis.com"> </link></link></meta></meta></head></html>
背景画像：フルスクリーン bodyに背景画像を固定 background-size: cover; background-attachment: fixed; HTML記述例 <html lang="ja"> <head> <meta charset="utf-8"> <title>GIRLY ROP</title> <meta name="viewport" content="width=device-width"> <link rel="preconnect" href="https://fonts.googleapis.com"> </link></meta></meta></head></html>
透明（不透明度） opacityプロパティを使って全体を透明に CSSのopacityの書き方 img要素に対して「opacity:1 」を指定すると完全不透明です 「opacity: .5」だと透明度は50%です .content > img { opacity: .5; } ホバー時に透過させる .content>img { opac…
CSS3で作るマウスオーバーアニメーション 背景色が変化するアニメーション <html lang="ja"> <head> <meta charset="UTF-8"> <title>Flexboxを使ったナビゲーション</title> <style> html,body,h1,ul,li { margin: 0; padding: 0; line-height: 1.0; } ul { list-style: none; } a { text-decoration: none; color: inherit; } </meta></head></html>…
Transform［変形］ transformプロパティは、回転、伸縮、傾斜、移動などの動きを要素に指定する際に使用するCSSプロパティ transformプロパティの値に指定できる関数 関数名 読み方 実行効果 translate トランスレイト 移動 rotate ローテート 回転 scale ス…
Transition［トランジションアニメーション］ マウスホバー時に背景色を変更（3秒間で） <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <title>Transition</title> <style> button { height: 80px; width: 240px; background-color: #0d96a5; border: none; color: white; font-size: …</meta></meta></head></html>
multiple-background CSS3からは、１つの要素に複数の背景画像を指定できるようになりました 従来通り１枚背景画像を指定した後、カンマで区切って２枚目の背景画像を指定します 後から指定した画像は、一番下に配置されます 複数の背景画像の利用 developer…
属性セレクタ 新たに追加された属性セレクタ ul,li { margin: 0; padding: 0; } .sample { list-style: none; border: 1px solid #aaa; } li { margin: 10px; padding: 10px 20px; background: #ECECEC; border: 2px solid #aaa; } 属性値が「〜で始まる」要…
CSS3の概要 CSS3は、これまで使ってきたCSSの延長 CSS3を使うメリット classやidに頼らないセレクタ作りが可能になる CSS3だけで表現できるデザインの幅が広がる 簡単に柔軟な他段組を実現できるようになる CSSだけで「動き」をつけられるようになる CSS3は…
Animate On Scroll Library スクロールの動きに合わせてアニメーションを実装することができるプラグイン michalsnik.github.io CDN <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> HTMLでアニメーションを設定したい要素に属性を追加する data-aos…</link>
モバイルファースト - ハンバーガーメニュー HTML記述例 ナビゲーションは「モバイル用」と「PC用」と作成し、ボタンイベントで表示を切り替える <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>【コーディング練習】CASABLANCA</title> <link rel="stylesheet" href="css/style.css"> </link></meta></meta></head></html>
ナビビゲーションを position で設定
ヘッダーパーツ - ナビゲーション nav要素のレイアウト nav <nav class="gnav"> <ul> <li><a href="#">ホーム</a></li> <li><a href="#">サービス案内</a></li> <li><a href="#">お問い合わせ</a></li> </ul> </nav> /* ---------------------------------- nav ---------------------------------- */ .gnav ul { display: flex; gap: 40px; colo…
ヘッダーパーツ ロゴとグローバルナビゲーション ロゴ作成 適宜作成 font-awesome CDN cdnjs.com マークアップ button要素でクリックできる要素とする（a要素で作成も可） 《index.html》 <html lang="ja"> <head> <meta charset="UTF-8"> <title>ヘッダーのパーツ</title> <link rel="stylesheet" href="css/style.css"> </link></meta></head></html>
富士山の紹介 （PC用）- コーディングポイント header部 ロゴ「h1」の右開きを「auto」にする（ロゴを囲む要素に「max-width」が指定されている場合、autoが設定可能） nav内の２番目からの「li」の左空きを「margin-left」で設定する key-visual部 テキスト…
