2022-01-01から1年間の記事一覧
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部 テキスト…
富士山の紹介（PC用）- ワイヤーフレーム 模写コーディングの手順 ワイヤーフレームを作成 クラス名を付与 書体・line-heightを決める ワイヤーフレームを作成 クラス名の付与 クラス名は、外側の囲みから内側に向かって付与する <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <title>Document</title> </meta></meta></head></html>
富士山の紹介（PC用）- コーディング レスポンシブWebデザインにおけるHTML・CSSのコーディングテクニック chot.design HTML記述例 文書構造を構築 <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <title>Document</title> <link rel="stylesheet" href="css/style.css"> </head> <body> </body></html>
PC版を作成 ロゴは、幅300pxで作成する テキストは、架空 コンテンツ幅「960px」 footer部は、positionでブラウザー下部に固定 unsplash.com ウェブサンプル株式会社 ホーム 会社概要 事業内容 アクセス お問い合わせ 私たちはWebで価値を想像する会社です。…
2カラムレイアウト(3) HI University 大学案内 学部・大学院 国際交流 入試情報 キャンパスライフ Information 2013.10.30 オープンキャンパス11月20日 開催！ 2013.09.12 【重要】男子寮の料金プラン変更について 2013.08.02 iWDC&iSFC 2013 WORKSHOPについ…
