- 投稿日：2021-09-06T23:04:53+09:00
[CSS]border-radiusを使ってグニャグニャ円作り
はじめに 本記事では、border-radiusについて記述します。 border-radius radius=「半径」 by Google先生 知らなかったです。 50% .left-content { width: 300px; height: 300px; background-color: lightgreen; border-radius: 50%; } 以下緑の丸です。 多くの方が知っているであろう50%はまんまるです。 1辺を100%とした時、 4辺それぞれの真ん中(または半分)、つまり50%の位置を通るようにしているというイメージです。 (ex)10%/50% border-radius: 10% / 50%;という記述があったとします。 .center-content{ width: 300px; height: 300px; background-color: skyblue; border-radius: 10% / 50%; } 10%は横の辺、50%は縦の辺と思ってください。 青色の図を確認します。 縦の辺の真ん中(50%)と横の辺は四角から約10%横に進んだところ(縦には進みません)を結んだ図形となっています。 (ex)50% 40% 30% 20% / 25% 35% 45% 55% 歪な形ですね。こんな形も作れることを知り、興奮しました。 .right-content{ width: 300px; height: 300px; background-color: pink; border-radius: 50% 40% 30% 20% / 25% 35% 45% 55%; } ピンク色です。 青色は、4辺とも同じ%でしたが、 今回は、4辺とも違う%になります。 border-radius: 10% / 50%;同様、 /よりも前の%達は横の辺、後は縦の辺になります。 ここでは、50% 40% 30% 20%が横、25% 35% 45% 55%が縦。 スタートは、左上の角から始まります。 左上の角は、左上角から右方向に横50%の点と左上角から下方向に縦25%の点をなぞった形 右上の角は、右上角から左方向に横40%の点と右上角から下方向に縦35%の点をなぞった形 右下の角は、右下角から右方向に横30%の点と右下角から上方向に縦45%の点をなぞった形 左下の角は、左下角から右方向に横20%の点と左下角から上方向に縦55%の点をなぞった形 これでピンク色の形が出来上がります。 以上です。 いかがでしょうか。 終わりに border-radiusには無限の可能性を秘めていることがわかり、 より一層、デザインするのが楽しくなりました。 これらをいくつも重ねて回転させて使うオシャンなことをされている方もいて、 デザイン上手い方の脳みそが欲しいと思いました。 以下参考サイトです。 最初のYouTubeの動画がすごくおすすめです。 Advanced CSS Border-Radius Tutorial border-radius 今さら聞けない!? CSSのborder-radiusで様々な角丸に挑戦！ 明日も頑張ります！
- 投稿日：2021-09-06T20:55:30+09:00
【CSS】ブロックボックスとインラインボックス ~divとspanの違い~
はじめに divとspanの使い分けがあやふやだったのでまとめました。 ブロックボックスとインラインボックスについて <div>: ブロックボックス <span>: インラインボックス MDN ドキュメントブロック要素 MDN インライン要素 それぞれの違いは？ 改行されるかどうか ブロックボックスは改行される インラインボックスは改行されない width、heightプロパティの挙動 ブロックボックスは適用される インラインボックスは適用されない padding、margin、borderの挙動 ブロックボックスは適用される インラインボックスはpadding、margin、borderがきたとき他の要素は無視される html <!DOCTYPE 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>Document</title> <link rel="stylesheet" href="style.css" /> </head> <body style="margin: 0"> <div>私はブロックです</div><div>私はブロックです</div><div>私はブロックです</div> <hr /> <span>私はインラインです</span><span>私はインラインです</span><span>私はインラインです</span> </body> </html> display: 無理やりインラインボックスとブロックボックスを変更する displayを使うことでインラインボックスとブロックボックスを変更する事ができる ブロックボックスをインラインボックスへ変更する css div { display: inline; } インラインボックスをブロックボックスへ変更する css span { display: block; } inline-block: インラインボックスとブロックボックス両方の性質を持つ display: inline-block;を使うことで両方の性質をもたせることができる html <!DOCTYPE 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>Document</title> <link rel="stylesheet" href="style.css" /> </head> <body style="margin: 0"> <div>ブロック内の<span>インライン</span>です。インラインの場合は、margin,padding,borderがきたときに他の要素のことを考えません。</div> </body> </html> css span{ background-color: yellow; margin: 20px; border: 1px solid black; padding: 20px; display: inline-block; } 下の画像のようにインラインで表示されているが、padding、margin、borderが効いているのがわかる。
- 投稿日：2021-09-06T20:09:59+09:00
display:none;を指定した要素にもアニメーションしたい
はじめに メニューをホバーしたら、サブメニューが表示させるヘッダーを制作していたときの話。メニューをホバーしたらdisplay: none;で指定していたサブメニューをdisplay: block;に変更させるとき、transitionが効かなかった。（フワッと表示されない） なので解決策をまとめてみました。 解決法 keyframesとjQueryを使う 任意のタイミング（例ではhoverイベント時）にクラスを付与する（例の場合、show） index.html <ul class="header_menu"> <li>About</li> <li>News</li> <li> <p class="main_menu">Category</p> <ul class="sub_menu"> <li>Head</li> <li>Body</li> <li>Hand</li> </ul> </li> <li>Contact</li> </ul> style.css .sub_menu { display: none; transition: 0.5s; } .sub_menu.show { display: block; animation: show 1s linear 0s; } index.js $('.main_menu').hover( function() { //マウスカーソルが重なった時の処理 $('this').next('.sub_menu').addClass('show'); }, function() { $('this').next('.sub_menu').removeClass('show'); } ); おわりに display: none;を指定している要素をフワッと表示させるにはkeyframsとjQueryの処理が必要。 HTMLとCSSで完結させたい場合は、opacityプロパティとvisibilityプロパティで実現させるもいい。
- 投稿日：2021-09-06T20:09:59+09:00
display:none;を指定したDOMにアニメーション
はじめに メニューをホバーしたら、サブメニューが表示させるヘッダーを制作していたときの話。メニューをホバーしたらdisplay: none;で指定していたサブメニューをdisplay: block;に変更させるとき、transitionが効かなかった。（フワッと表示されない） なので解決策をまとめてみました。 解決法 keyframesとjQueryを使う 任意のタイミング（例ではhoverイベント時）にクラスを付与する（例の場合、show） index.html <ul class="header_menu"> <li>About</li> <li>News</li> <li> <p class="main_menu">Category</p> <ul class="sub_menu"> <li>Head</li> <li>Body</li> <li>Hand</li> </ul> </li> <li>Contact</li> </ul> style.css .sub_menu { display: none; transition: 0.5s; } .sub_menu.show { display: block; animation: show 1s linear 0s; } index.js $('.main_menu').hover( function() { //マウスカーソルが重なった時の処理 $('this').next('.sub_menu').addClass('show'); }, function() { $('this').next('.sub_menu').removeClass('show'); } ); おわりに display: none;を指定している要素をフワッと表示させるにはkeyframsとjQueryの処理が必要。 HTMLとCSSで完結させたい場合は、opacityプロパティとvisibilityプロパティで実現させるもいい。
- 投稿日：2021-09-06T19:01:14+09:00
【Web制作】架空のカフェのホームページを作ってみた
目次 1.はじめに 2.最終目標 3.HTMLでのマークアップ 4.コーディング 5.スタイリング 6.レスポンシブ対応 7.画像の設定 8.メタデータの設定 9.おわりに 1. はじめに 本記事では、今まで記事にしてきたHTML・CSSの技術を踏まえ、 カフェのWebサイトを作成していく。(架空です) 作成にあたっての前提条件 1.サーバーサイド側に関しては一切触れない(HTML・CSSのマークアップのトレーニングのため) 2.コーディングの仕様としては、以下の条件で進めていく。 ・HTML5,CSS3 ・文字コード:UTF-8 ・Mac、WindowsのGoogle Chrome最新版 2. 最終目標 完成品としては、以下のようなものを目指していく。 3. HTMLでのマークアップ 画像素材 今回の画像素材は、全てPixabayより借用。 バナー1 バナー2 カフェ全景 カフェ ロゴ 下準備 sample_cafe.txt ウェブサイトの文言をテキスト化した、sample_cafe.txtを事前に用意する。 事前にテキスト化することにより、作業効率を向上させる。 sample_cafe.txtの内容 HTML5 Reset Stylesheet HTML5 Reset Stylesheetというものがある。これは、CSSリセットをするためのCSSである。 ブラウザがデフォルトのCSSを持っている場合があるので、それをリセットしてレイアウトへの影響を減らすためのもの。 補足をすると、ブラウザがよきに計らってCSSを設定している場合がある。例えば、h1要素の文字サイズが大きく設定されているなど裏で動いている可能性があるので、それらの挙動が発生しないような役目がある。 html5reset-1.6.1.cssのソースコード なお、index.htmlファイル内の記述は現時点で以下の通りとなる。 index.html <!DOCTYPE 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>Sample Cafe</title> <link rel="stylesheet" href="css/html5reset-1.6.1.css" /> <link rel="stylesheet" href="css/style.css" /> </head> <body> </body> </html> html5reset-1.6.1.cssは、style.cssよりも先に記述しないと正しく動作しないので、先に記述すること。 (CSSは原則、ファイルの上から下へ向かって解釈されるため) 4. コーディング HTMLによるマークアップ sample_cafe.txt内に記述された文字を、index.htmlファイルのbodyタグ内にコピー&ペーストする。 index.html <!DOCTYPE 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>Sample Cafe</title> <link rel="stylesheet" href="css/html5reset-1.6.1.css" /> <link rel="stylesheet" href="css/style.css" /> </head> <body> Sample Cafe Home Menu Access お知らせ 2021/7/01 リニューアルオープンしました。 2021/7/15 4/27（金）は設備メンテナンスのため休業いたします。 2021/7/22 4連休2020/6/20 こだわりのパンに合わせたスペシャルデザートが登場 2020/8/10 営業時間の一部変更について キャンペーン情報 日頃の感謝を込めて、パスタ全品がいつもよりお得に！ 平日11時から14時までお得なランチタイムを実施中。 バイオリン演奏付きのスペシャルディナーイベントの早期予約受付中。 夏限定のスペシャルフルーツサンドを楽しもう！ 季節のおすすめ商品はこちら コーヒー豆の豆知識 ホーム 商品情報 店舗紹介 アクセス 会社情報 お問い合わせ (c) 2021 Sample Cafe </body> </html> HTMLの要素や、CSSでのスタイリングを施していないためブラウザ上では文字が並んでいるだけとなっている。 これから実際に要素をあてがっていく。 ヘッダー部分のコーディング ボリューム過多のため、コードを分解しながら解説していく。 index.html <body id="home"> <header id="top"> <解説> ・bodyタグにid="home"を割り振る。 今回は1ページしか作らないが、ページごとにidを振っておいた方がスタイルを当てやすい。 ・headerにid="top"を割り振る。 headerにはロゴ、ナビゲーション、メインビジュアル、バナーという風に表示したい。 headerロゴとナビゲーション index.html <div class="header_content wrapper"> <h1> <img class="header_log" src="https://via.placeholder.com/100x90" alt="Sample Cafe" /> </h1> <nav> <ul> <li class="current"><a href="index.html">Home</a></li> <li><a href="#">Menu</a></li> <li><a href="#">Access</a></li> </ul> </nav> </div> と記述する。 <解説> ・divタグのクラスに"header_content wrapper"とあるが、これはコンテンツを包むものの意味。(クラス名に特段意味はない。任意で記述できる。) ・見出しにカフェのロゴを置きたいので、imgタグで配置。 ・imgタグのsrcにplaceholderのURLとあるが、これはダミー画像を配置させている。素材の作成待ちなどが非効率なので、画像が揃うまではダミー画像を配置させる習慣があるのだとか。 ↓ PLACEHOLDER.COM 今回のダミー画像は100x90で配置。 ・navタグ内にul>liタグを配置している。後でCSSを用いて横向きに表示させる。 メインビジュアル メインビジュアルに関しては、header終了タグの上に記述する。 index.html <div id="main_image"></div> </header> 画像の設定は後々CSSの方で記述するので後回しにする。 【現時点でのコード】 【現時点でのブラウザ表示】 コンテンツ部分 メイン index.html <div class="contents wrapper"> <main id="content"> <section id="info"> <h2>お知らせ</h2> <dl> <dt>2021/7/01</dt> <dd>リニューアルオープンしました。</dd> <dt>2021/7/15</dt> <dd>7/15（木）は設備メンテナンスのため休業いたします。</dd> <dt>2021/7/22</dt> <dd>4連休</dd> <dt>2021/8/1</dt> <dd>こだわりのパンに合わせたスペシャルデザートが登場</dd> <dt>2021/8/10</dt> <dd>営業時間の一部変更について</dd> </dl> </section> <section id="campaign"> <h2>キャンペーン情報</h2> <ul> <li>日頃の感謝を込めて、パスタ全品がいつもよりお得に！</li> <li>平日11時から14時までお得なランチタイムを実施中。</li> <li>バイオリン演奏付きのスペシャルディナーイベントの早期予約受付中。</li> <li>夏限定のスペシャルフルーツサンドを楽しもう！</li> </ul> </section> </main> <解説> ・メイン部分に関しては、divタグで囲う。 ・お知らせとキャンペーン情報は、それぞれsectionタグで囲う。 ・mainタグのidはinfo、お知らせはinfo、キャンペーン情報はcampaignとする。 ・上記お知らせとキャンペーン情報の情報内容に関しては、以前記載した説明リストにを参照。お知らせ内の説明リストのEmmet省略記号はdl>(dt+dd)*5で記載し、それぞれdtとddの内容を埋めていく。 ・キャンペーン情報のulタグ内に「・」の記載が無いのだが、理由としてHTML5 Reset Stylesheetが働いているため非表示となっている。 バナー index.html <aside id="sidebar"> <ul> <li> <a href="#"><img src="https://via.placeholder.com/250x150" alt="季節のおすすめ商品はこちら"/></a> </li> <li> <a href="#"><img src="https://via.placeholder.com/250x150" alt="コーヒー豆の豆知識"/></a> </li> </ul> </aside> </div> <解説> ・asideタグは、広告表記などに用いられる。id="sidebar"とする。 ・バナー画像の並びはulタグとliタグで表記する。また、バナー画像はplaceholderを用いる。(サイズ:250x50) ・バナー画像のリンク先はそれぞれダミーで表記する。 【現時点でのコード】 【現時点でのブラウザ表示】 フッター index.html <footer> <ul> <li><a href="index.html">ホーム</a></li> <li><a href="#">商品情報</a></li> <li><a href="#">店舗紹介</a></li> <li><a href="#">アクセス</a></li> <li><a href="#">会社情報</a></li> <li><a href="#">お問い合わせ</a></li> </ul> <small>© 2021 Sample Cafe </small> </footer> </body> <解説> ・ページ下部に表示したい項目をfooterタグで囲い、リスト化する。また、リスト化した項目にaタグでそれぞれリンクを付与する。(ホームはindex.htmlで、その他はダミー) 【現時点でのコード】 【現時点でのブラウザ表示】 5. スタイリング 共通部分のスタイリング 文字コード設定 styles.css @charset "utf-8"; <解説> ・＠charsetは、スタイルシートで使う文字エンコーディングを定義する。 ・今回で言うと、このページの文字コードはUTF-8で記述することを定義している。 ページ全体のフォントサイズ styles.css html { font-size: 100%; } <解説> ・ユーザーが指定した文字サイズを正しく反映させるために、html要素に文字サイズを100％に設定している。 ページ内のフォント設定 styles.css body { font-family: 'Hiragino Kaku Gothic proN', 'メイリオ', sans-serif; color: #555; line-height: 1.5; } <解説> ・line-heightを設定することにより、行の高さを付けて行間にゆとりを持たせるのが狙い。 ヘッダーロゴ styles.css img { width: 100%; } <解説> ・画像を横幅いっぱいに表示したいので100％で表記する。 <適用前> <適用後> コンテンツの横幅・マージン・パディング styles.css .wrapper { max-width: 940px; margin: 0 auto; padding: 0 10px; } <解説> ・max-width: 940pxは、コンテンツの最大の横幅の数値。 ・横幅を縮小するとコンテンツの横幅も縮小する。 ・横幅を広げても940px以上は広がらないようになる。 ・コンテンツは中央揃えにするため左右のmarginはauto、上下は0。 ・左右のpaddingを設定しているのは、スマートフォン表示にした際にスペースを与えたかったから。 ※paddingをわかりやすくするため、一時的に背景色を付けている。 【共通部分のコード】 【現時点でのブラウザ表示】 ヘッダー部分のスタイリング ヘッダー最上部 styles.css header { border-top: 8px solid #8c6239; } <解説> ・ヘッダー上部に太さ8pxで茶色の実線を配置。 ヘッダーロゴの幅 styles.css .header_logo { width: 90px; } <解説> ・ヘッダロゴ画像の幅の設定 ヘッダーのナビゲーション styles.css .header_content { display: flex; align-items: center; justify-content: space-between; margin: 10px auto; } <解説> ・ヘッダーのロゴ画像とナビゲーション部分display: flexで横並びに設定する。 ・align-items: centerで、垂直配置の配置位置を中央に指定する。 ※align-itemsの詳細記述 ・justify-content: space-betweenで、アイテムの間にスペースを均等に割り付ける。 ・marginで、上下10px、左右autoのマージンを設定する。 ナビゲーションリストの横並び styles.css header nav ul { display: flex; } <解説> ・ナビゲーション部分を横並びに設定する。 ナビゲーションのリスト間隔 styles.css header nav ul li { margin-left: 30px; } <解説> ・ナビゲーション内のリストの間隔を空ける。 リンクの_の打ち消しと文字色 styles.css header nav ul li a { text-decoration: none; color: #555; } <解説> ・aタグの下線を、text-decoration: none;で消す。 ・文字色を灰色に設定する。 ナビゲーションリストのマウスカーソルの挙動 styles.css header nav ul li a:hover, header nav ul li a:active, header nav ul li.current a { color: #8c6239; } <解説> ・マウスカーソルをホバーしたときやクリックしたとき、そしてcurrentクラスを付与したHomeの文字色をデフォルトで茶色に設定する。 メインビジュアル画像 styles.css #main_image { width: 100%; height: 50vh; background-image: url(https://via.placeholder.com/3000x2500); background-repeat: no-repeat; background-position: center; background-size: cover; } <解説> ・横幅は画面いっぱいの100%表記。 ・height: 50vh;は、画面表示の50%という意味。 ※vhとは、viewport heightの略で、viewportの高さによる割合のこと。 ・background-imageは、PLACEHOLDERより、ダミー画像を配置。 ・画像を繰り返し表示しないのでbackground-repeat: no-repeat;を設置。 ・背景画像の表示開始位置を、background-position: center;で指定。 ・背景画像のサイズを指定するので、background-size: cover;で指定。 ※coverは、縦横比は保持して、背景領域を完全に覆う最小サイズになるように背景画像を拡大縮小する。 【header部分のコード】 【現時点でのブラウザ表示】 コンテンツ部分 コンテンツ部分の横並び設定 styles.css .contents { display: flex; justify-content: space-between; margin-top: 30px; } <解説> ・contentsクラスを横並びに表示させるためにdisplay: flex;を指定。 ・justify-content: space-between;で、dt要素とdd要素の間にスペースを空ける。 main_contentの幅 styles.css #main_content { width: 65%; } sidebarの幅 styles.css #sidebar { width: 75%; } コンテンツ部分の見出しのスタイリング styles.css #home h2 { margin-bottom: 20px; padding-bottom: 5px; border-bottom: 1px solid #8c6239; font-size: 1.2rem; } <解説> ・font-size: 1.2remのremは、「root em」の略で、html要素の文字サイズに影響されない。 ・ styles.css #info dl { display: flex; flex-wrap: wrap; margin-bottom: 50px; } <解説> ・flex-wrap: wrap;フレックスコンテナ内のアイテムの折り返し方法を指定する際に使用する。 dt要素の幅 styles.css #info dt { width: 7em; } <解説> ・emは、ブラウザの表示領域や他の要素サイズとの関係で算出される相対的なサイズ指定。remと混同しないこと。 関数を用いた説明リストの幅設定 styles.css #info dd { width: calc(100% - 7em); } <解説> ・calc()とはCSSで使用する関数のこと。今回の場合は、幅100%から7emを引いたもので、ブラウザの大きさや文字サイズに影響されないという狙いがある。 説明リストのマージン設定 styles.css #info dt, #info dd { margin-bottom: 10px; } キャンペーン情報のリスト設定 styles.css #campaign ul li { margin-bottom: 10px; list-style-type: none; } バナーのマージン設定 styles.css #sidebar ul li { margin-bottom: 20px; list-style-type: none; } 【コンテンツ部分のコード】 【現時点でのブラウザ表示】 フッター部分 フッター部分の余白・色設定 styles.css footer{ margin-top: 100px; padding: 30px; text-align: center; color: #fff; background-color: #a67c52; } 【デベロッパーツール参照】 【デベロッパーツール参照】 適用箇所:オレンジ色でハイライトされている リストの横並び styles.css footer ul li{ display: inline-block; margin: 5px; } <解説> ・displayプロパティのflexとinline-blockの違いは、flexは親要素の下の子要素の高さなどを統一することができるのに対し、inline-blockはブロック要素（divタグなど）を横並びに表示することができる。 フッター内の文字色 styles.css footer ul li a{ color: #fff; } リスト内のaタグのアンダーライン消去 styles.css footer ul li a:link{ text-decoration: none; } a要素にマウスホバーした際の挙動 styles.css footer ul li a:hover, footer ul li a:active{ opacity: .7; } <解説> ・opacityプロパティは、要素の透明度を指定する際に使用する。 ※画面収録が出来なかったので、GIF画像は割愛。 smallタグの文字の大きさの調整 styles.css small { font-size: 0.7rem; } 【footerのコード】 【現時点でのブラウザ表示】 6. レスポンシブ対応 トップページのレスポンシブ対応を実施する。 →端末のサイズによって見やすい表示に切り替え。 上記画像は、作成したトップページをデベロッパーツールで検証し、かつ端末サイズをiPhone 6/7/8のサイズで検証したものであるが、画面が小さくなっているのにPC用の画面で評されているので、文字やバナーのサイズが小さいので、端末のサイズにより見やすいようにする必要がある。 metaタグでのviewport設定 index.html <meta name="viewport" content="width=device-width, initial-scale=1.0" /> Visual Studio Codeだと、shift+!でHTMLの雛形を呼び出した際に自動で出力されるので特に覚える必要はない。 参考:MDN meta要素 メディアクエリの設定 ・メディアクエリ:CSSの機能の一つで、表示する画面の環境に応じで適用するスタイルを切り替える機能のこと。 styles.css @media (max-width: 600px) { html { font-size: 87.5%; } } <解説> ・この構文の意味は、画面幅が最大600pxになったら、ページ全体の文字サイズが87.5%になるということ。以下画像で比較。 ヘッダーのナビゲーションを見てもらうと、600pxの方が文字が小さくなっている。 ロゴ画像の調整 styles.css @media (max-width: 600px) { html { font-size: 87.5%; } .header_logo { width: 60px; } } コンテンツ部分とサイドバーの縦並び設定 styles.css @media (max-width: 600px) { html { font-size: 87.5%; } .header_logo { width: 60px; } .contents { flex-direction: column; margin-top: 10px; } } <解説> ・flex-directionプロパティは、フレックスコンテナ内のアイテムの配置方向を指定する際に使用する。columnとすることで、フレックスコンテナの主軸は上から下になる。 <flex-direction適用前> <flex-direction適用後> <現状のウェブページ> 最大幅600pxにした際に、メインコンテンツとサイドバーの余白が大きいところが気になる。 メインコンテンツとサイドバーの幅 styles.css @media (max-width: 600px) { html { font-size: 87.5%; } .header_logo { width: 60px; } .contents { flex-direction: column; margin-top: 10px; } #main_content, #sidebar { width: 100%; } } <適用後> 7. 画像の設定 ロゴ画像 index.html <h1> <img class="header_logo" src="https://via.placeholder.com/100x90" alt="Sample Cafe" /> </h1> ⇓実際にダミー画像から画像をロゴ画像へ差し替え⇓ index.html <h1> <img class="header_logo" src="img/cafe_sample_logo.png" alt="Sample Cafe" /> </h1> メイン画像 styles.css #main_image { width: 100%; height: 50vh; background-image: url(https://via.placeholder.com/3000x2500); background-repeat: no-repeat; background-position: center; background-size: cover; } ⇓実際にダミー画像からメイン画像へ差し替え⇓ styles.css #main_image { width: 100%; height: 50vh; background-image: url(../img/cafe_sample_cafe.jpg); background-repeat: no-repeat; background-position: center; background-size: cover; } ※/imgの前の「..」とは、1つ上の階層に行く際に使用する。 バナ(sidebar)ー画像 index.html <aside id="sidebar"> <ul> <li> <a href="#"><img src="https://via.placeholder.com/250x150" alt="季節のおすすめ商品はこちら" /></a> </li> <li> <a href="#"><img src="https://via.placeholder.com/250x150" alt="コーヒー豆の豆知識" /></a> </li> </ul> </aside> ⇓実際にダミー画像からバナー画像へ差し替え⇓ index.html <aside id="sidebar"> <ul> <li> <a href="#"><img src="img/cafe_sample_banner1.jpg" alt="季節のおすすめ商品はこちら" /></a> </li> <li> <a href="#"><img src="img/cafe_sample_banner2.jpg" alt="コーヒー豆の豆知識" /></a> </li> </ul> </aside> 【現時点でのブラウザ表示】 8. メタデータの設定 メタデータとは？ ・ページの付加的なデータ。 ・description:コンテンツに関する、簡潔で正確な概要。 →SEO(Search Engine Optimization):検索エンジン最適化の観点より、検索されたいページに入れるようにする。 (例)Yahoo! JAPAN index.html <meta name="description" content="Sample Cafeの公式ウェブサイトです。商品情報、店舗紹介、アクセス、会社情報など"> ※headタグ内のviewport情報の下に記述すること。 【デベロッパーツール参照】 9. おわりに 実際にウェブページを作成してみて、今まで学習したことを振り返りながら作成できたのですごく良い復習になった。 再度作成する機会があったら、もう一回振り返りという意味でこの記事に戻ってきたいと思う。 最後に、完成形のコードをかけへ格納したので、気になった方はこちらからどうぞ。 Sample Cafe本番データ 長々とご覧いただき、ありがとうございました。
- 投稿日：2021-09-06T11:20:30+09:00
JavaScriptでアプリを作成しました【7】【パックマン】
はじめに 学習するに至った経緯 2020年より、未経験からエンジニアへの転職を目指し、某プログラミングスクールへ通う。入学後、『Ruby』を未経験から学ぶ人が多いのと『Ruby』の求人が思っていた以上に少ないので、卒業後、フロントエンドのエンジニアを目指す事に。 Javascriptの学習した事を言語化し、認識の深化による備忘録として記載。 【仕様】 参考サイト バニラJavaScript、HTML、CSSでパックマンを構築する|アニア・クボウ
- 投稿日：2021-09-06T11:20:30+09:00
JavaScriptでアプリを作成しました【7】【Space Invaders】
はじめに 学習するに至った経緯 2020年より、未経験からエンジニアへの転職を目指し、某プログラミングスクールへ通う。入学後、『Ruby』を未経験から学ぶ人が多いのと『Ruby』の求人が思っていた以上に少ないので、卒業後、フロントエンドのエンジニアを目指す事に。 Javascriptの学習した事を言語化し、認識の深化による備忘録として記載。 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Space Invaders</title> <link rel="stylesheet" href="styles.css"> </head> <body> <h1 class="results">0</h1> <div class="grid"></div> <script src="main.js"></script> </body> </html> styles.css .grid { width: 300px; height: 300px; border: solid black 1px; display: flex; flex-wrap: wrap; } .grid div{ width: 20px; height: 20px; } .invader { background-color: purple; border-radius: 10px; } .shooter { background-color: green; } .laser { background-color: orange; } .boom { background-color: red; } main.js //gridを取得 const grid = document.querySelector(".grid"); const resultsDisplay = document.querySelector(".results"); let currentShooterIndex = 202; let width = 15; let direction = 1; let invadersId; let goingRight = true; let aliensRemoved = []; let results = 0; //forループを使用して正方形を作成 for (let i = 0; i < 225; i++) { //forループを実行し、ループするたび正方形を作成する const square = document.createElement("div"); grid.appendChild(square); } //全ての正方形を取得 const squares = Array.from(document.querySelectorAll(".grid div")); //エイリアンを取得 配列を使用 const alienInvaders = [ 0,1,2,3,4,5,6,7,8,9, 15,16,17,18,19,20,21, 22,23,24,30,31,32,33, 34,35,36,37,38,39, ]; //インヴェーダーを正方形の中に配置する function draw() { for (let i = 0; i < alienInvaders.length; i++) { if (!aliensRemoved.includes(i)) { squares[alienInvaders[i]].classList.add("invader"); } } } draw(); //削除したインベーダーを作成する function remove() { for (let i = 0; i < alienInvaders.length; i++) { squares[alienInvaders[i]].classList.remove("invader"); } } squares[currentShooterIndex].classList.add("shooter"); //シューターを動かす function moveShooter(e) { squares[currentShooterIndex].classList.remove("shooter"); //キーボタンを押したら左右に１マスずつ移動する switch (e.key) { case "ArrowLeft": if (currentShooterIndex % width !== 0) currentShooterIndex -= 1; break; case "ArrowRight": if (currentShooterIndex % width < width - 1) currentShooterIndex += 1; break; } squares[currentShooterIndex].classList.add("shooter"); } document.addEventListener("keydown", moveShooter); //インベーダーが移動する function moveInvaders() { const leftEdge = alienInvaders[0] % width === 0; const rightEdge = alienInvaders[alienInvaders.length - 1] % width === width - 1; remove(); //最後のインベーダーが右端にいたら一段下げる if (rightEdge && goingRight) { //iを0にするためには、各インベーダーをループさせる。 for (let i = 0; i < alienInvaders.length; i++) { alienInvaders[i] += width + 1; direction = -1; goingRight = false; } } //最後のインベーダーが左端にいたら一段下げる if (leftEdge && !goingRight) { for (let i = 0; i < alienInvaders.length; i++) { alienInvaders[i] += width - 1; direction = 1; goingRight = true; } } for (let i = 0; i < alienInvaders.length; i++) { alienInvaders[i] += direction; } draw(); //シューターがインベーダーに当たったら、GAME OVER if (squares[currentShooterIndex].classList.contains("invader", "shooter")) { resultsDisplay.innerHTML = "GAME OVER"; clearInterval(invadersId); } //インべーダーが底に当たったら、GAME OVER for (let i = 0; i < alienInvaders.length; i++) { if (alienInvaders[i] > squares.length + 100) { // console.log("squares.length", squares.length); resultsDisplay.innerHTML = "GAME OVER"; clearInterval(invadersId); } } if (aliensRemoved.length === alienInvaders.length) { resultsDisplay.innerHTML = "YOU WIN! WIN!"; clearInterval(invadersId); } } invadersId = setInterval(moveInvaders, 300); //インベーダーを射撃する function shoot(e) { let laserId; let currentLaserIndex = currentShooterIndex; function moveLaser() { squares[currentLaserIndex].classList.remove("laser"); currentLaserIndex -= width; squares[currentLaserIndex].classList.add("laser"); //インベーダーにレーザーが当たると削除される if (squares[currentLaserIndex].classList.contains("invader")) { squares[currentLaserIndex].classList.remove("laser"); squares[currentLaserIndex].classList.remove("invader"); squares[currentLaserIndex].classList.add("boom"); //レーザーによる爆発が起きたら、300ミリ秒後に削除される setTimeout(() => squares[currentLaserIndex].classList.remove("boom"), 300); clearInterval(laserId); //インベーダーにレーザーが当たっても再描画されているので、レーザーが当たると削除される const alienRemoved = alienInvaders.indexOf(currentLaserIndex); aliensRemoved.push(alienRemoved); //スコアを追加 results++; //結果を表示する resultsDisplay.innerHTML = results; console.log(aliensRemoved); } } //キーの上を押すと射撃する switch (e.key) { case "ArrowUp": laserId = setInterval(moveLaser, 100); } } document.addEventListener("keydown", shoot); 参考サイト Space Invaders in JavaScript (no-nonsense version!)
- 投稿日：2021-09-06T11:15:13+09:00
JavaScriptでアプリを作成しました【7】【パックマン】
はじめに 学習するに至った経緯 2020年より、未経験からエンジニアへの転職を目指し、某プログラミングスクールへ通う。入学後、『Ruby』を未経験から学ぶ人が多いのと『Ruby』の求人が思っていた以上に少ないので、卒業後、フロントエンドのエンジニアを目指す事に。 Javascriptの学習した事を言語化し、認識の深化による備忘録として記載。 【仕様】
- 投稿日：2021-09-06T03:21:31+09:00
Materializeを組み込むためのTips
導入 M M.AutoInit(); JSの操作はMというオブジェクトを使って行う。このMはグローバル変数として定義されていて、その証拠にブラウザの開発用コンソールからアクセスできる。つまり一つのスクリプトファイル内で import "materialize-css/dist/js/materialize" されていれば、他のコンポーネント等で再度importする必要がない。というよりしてはいけない。Mを使った操作を行うと無駄に処理が行われてしまう。 例えば.waves-*を使ってボタンを押す度にエフェクトを出すようにすると、エフェクトがそのまま残り続けたりする。 import webpackなどを使用していて、エントリー用のJSに import "materialize-css" のようにしてしまうと、materialize.cssが別に読み込まれてcssをオーバライドできなくなる。JS単体はdistディレクトリ内のJSから読み込む。 オーバライド Materializeの設定は~materialize-css/sass/components/_variables.scssで設定されている。ここで書かれている変数は全て!defaultフラグ付きでグローバル変数として定義されているので、エントリー用のscssファイルに $primary-color: black; // e.g. @import "materialize-css/sass/materialize.scss"; のようにすると上書きされる。 utilites Materializeはutilitesがあまり充実していない。htmlのclassだけでレイアウトを整えるにはBootstrapを部分的に使うとよい。 コンパイル済みのbootstrap-grid.css, bootstrap-reboot.css, bootstrap-utilities.cssを読み込ませる。bootstrap-gridはMaterializeと設定が重複するので使いたい方を後に読み込ませる。
- 投稿日：2021-09-06T00:00:12+09:00
[CSS]文字を斜めにする
はじめに 本記事では、以下Let's Log in!のように文字を斜めに表現する方法を記述します。 記述方法 コード .login-subtitle { color: rgb(0, 0, 0); font-family: 'Permanent Marker', cursive; font-size: 12vh; text-align: start; transform: rotate(-7deg); ←ここ！！！ padding-left: 15vw; position: absolute; } transform: rotate(-7deg);で文字を回転することができます。 -7degでマイナスになっております。 プラスでは時計回り、マイナスでは反時計回りのイメージです。 以下、7degにしてみました。 90degにしてみました。 90度になりました。Let's Log in!がお辞儀してますねw つまり、~degの数字は角度を意味しています。 180degにすれば、 すってんころりん！180度ですね。 ということは、180の倍数では、このような形になります。 360degだと添付しなくてもわかりますね、傾き０ですね。 以上です。 終わりに 短い記事ですが、いかがでしょうか。 斜めにしてみるとデザインを工夫しやすいと思います。 また、今回思ったこととして、 自分が想像し、実現したいことは、CSSやJavaScriptでできるなと思いました。 以下今回の参考サイトです。 CSSでテキストを斜めに傾ける方法 (transformのrotateで回転させる) 明日も頑張ります！！