方法 cursor: hoge !important;として, cssのスタイルの優先順位を上げることで, cursorのスタイルを設定可能 <button style: 'pointer-events: auto; cursor: default !important;'> ボタン </button> 参考 https://developer.mozilla.org/ja/docs/Web/CSS/cursor https://developer.mozilla.org/ja/docs/Web/CSS/pointer-events

日本語のWebサイト（ランディングページ等）をつくっていると、読みにくい所で改行されるパターンがありますよね？実際この記事もブラウザの横幅によって単語の途中なのに改行されています。普通に文章を読んでいる時には良いのですが、これがランディングページのヘッドラインで起きるとものすごいカッコ悪いです。 たとえばPhotoshopのページで「写真のレタッチ、合成、カラー変更」というヘッドラインが以下のようになってたらいかがでしょうか？この場合はできれば、「合成、」の後で改行されている方が自然で読みやすくなっています。（ちなみにこれは、Chrome Developer Toolsで編集して、わざと見にくくしたので、実際にはキレイに改行処理しています）。 よーしそれじゃあ<br>入れれば良いんだなと真っ先に思いついた方がいるでしょう。しかし今日はさまざまなデバイスが皆さんのWebサイトに訪れています。デスクトップではキレイに見えた<br>の改行も、モバイルのようなブラウザの横幅が短いものでは<br>の改行は余計な結果を生む事があります。 そもそも何故このような問題が起きるのか？ブラウザの仕様として欧文がスペースを改行ポイント（Word break）とするのに対して、日本語は文字単位（行頭行末禁則文字を省く）で改行を許す（Charactor break）ので、このような事が起きます。 この記事ではWebブラウザでの日本語の改行問題の解決策についてCSSのプロパティやHTMLタグの話を交えて話していきます。（※この記事はモダンブラウザを使う前提で話を進めています。Internet Explorer 11等の話については言及しませんのであらかじめご了承ください） また、予めこの記事で利用するソースコードは、codepenに置いておきます。必要に応じて参照してください。 解決策1. white-space: nowrap + <wbr> はじめに言います。この手法はお勧めしません。先に使える解決策に行きたい方はこのセクションを飛ばしてください。時間がある方はどうかお付き合いください。 white-space: nowrap;1は連続する半角スペース、タブ、改行を一つの半角スペースを詰めて表示し、行の折り返しは行いません。これによって自動での行の折り返しを防ぎ<wbr>2によってブラウザ内で改行してよい位置を教えて上げる事で、改行してほしい場所で改行ができます。 <div> <h3>1. white-space: nowrap; + &lt;wbr&gt;</h3> <p class="nowrap box"> グレートブリテン<wbr>および<wbr>北アイルランド連合王国という<wbr>言葉は<wbr>本当に<wbr>長い言葉<wbr>ですね </p> </div> .box { padding: 10px; border: 1px solid; font-size: 40px; } .nowrap { white-space: nowrap; } white-space: nowrap + <wbr>の問題点 おお、動いているじゃないかと、何が駄目なんでしょうか？理由は、 Firefoxでは一切改行されない 残念ながらFirefoxではwhite-space: nowrap;が指定された中で<wbr>を使っても無視されてしまいます。 こちらで過去に議論されていたみたいですが、今の所解決する手立てがありません。 チャンクが親の要素の横幅より大きい場合、文字が溢れる チャンク（改行できる単位）の横幅が親の要素をからはみ出ている場合は、<wbr>を入れないと文字が溢れてしまいます。この場合は北アイルランド連合王国というがチャンクとなっています。しかし、white-space: nowrap;により改行できなくなっているため、文字が溢れた状態で表示される事になります。 解決策2. word-break: keep-all; + overflow-wrap: break-word; + <wbr> 良い解決策です。最もキレイに日本語改行処理を行いたい場合はこれを使用しましょう。 word-break: keep-all3はCJK（中国語、日本語、韓国語）の改行を禁止します。なお、CJK以外のテキストについては規定の改行規則に従います。これで日本語の改行ができなくなるので、<wbr>によってブラウザ内で改行してよい位置を教えて上げる事で、改行してほしい箇所で改行ができます。 これで解決じゃないかoverflow-wrap: break-word;4は何のために指定するんだ？と疑問に思った人もいるでしょう。overflow-wrap: break-word;は表示範囲を超える長いテキストがある場合、テキストは溢れる事より、改行することを優先します。 word-break: keep-all; + <wbr>の場合 overflow-wrap: break-word;を指定していない状況では、チャンクの横幅が親の要素をからはみ出ている場合は、<wbr>を入れないと文字が溢れてしまいます。この場合は北アイルランド連合王国というがひと塊になっています。 word-break: keep-all; + overflow-wrap: break-word; + <wbr>の場合 対して、overflow-wrap: break-word;を指定している状況では。チャンクの横幅が親の要素をからはみ出ている場合でも次の行に改行されます。すばらしいですね。 <div> <h3>2. word-break: keep-all; + overflow-wrap: break-word; + &lt;wbr&gt;</h3> <p class="keep-all-break-word box"> グレートブリテン<wbr>および<wbr>北アイルランド連合王国という<wbr>言葉は<wbr>本当に<wbr>長い言葉<wbr>ですね </p> </div> .box { padding: 10px; border: 1px solid; font-size: 40px; } .keep-all-break-word { word-break: keep-all; overflow-wrap: break-word; } word-break: keep-all; + overflow-wrap: break-word; + <wbr>の問題点 display: flex;が親の要素に指定されているとoverflow-wrap: break-word;が聞かず、レイアウトが崩れる overflow-wrap: break-word; の説明を注意深く見てみると、以下のようにコンテンツの最小固有寸法（min-content intrinsic size）5を計算する際には考慮されないと書かれています。 行内にその他の分割可能な位置がない場合、通常は分割可能でない単語が任意の場所で分割されますが、コンテンツの最小固有寸法を計算する時に、単語分割によって導入された折り返し可能位置が考慮されません。 ところでflexboxのitemは何もwidthを指定されていない場合は、最小固有寸法によって決定される、つまり北アイルランド連合王国というのチャンクの横幅によってwidthが決定されるため、ブラウザの横幅に収まらない形で以下のように表示されてしまいます。 <div class="flex"> <div> <h3>5. word-break: keep-all; + overflow-wrap: break-word; + &lt;wbr&gt;</h3> <p class="keep-all-break-word box"> グレートブリテン<wbr>および<wbr>北アイルランド連合王国という<wbr>言葉は<wbr>本当に<wbr>長い言葉<wbr>ですね </p> </div> </div> .box { padding: 10px; border: 1px solid; font-size: 40px; } .flex { display: flex; } .keep-all-break-word { word-break: keep-all; overflow-wrap: break-word; } この問題を回避するには、flex-itemに横幅を指定する方法 or overflow-wrap: anywhereを指定する方法がありますが、後者は残念ながら主にSafariでサポート外なので、使用はできません。かなC。また、各チャンクをできるだけ細かく分割し、親の要素の横幅を超えないように調整する事で未然に防ぐ方法もあります。参考までに、display: gridでも同様の問題が起きるので使用する際には注意してください。 解決策3. <span> + display: inline-block; こちらもよく使われている手法で、display: inline-blockのスタイルが適用した<span>を使って改行したくない文字列をくくることで、改行を制御します。非常にシンプルな手法ですが、<span>で囲まれる事によって、HTMLコードが若干複雑になる点は気になります。 <div> <h3>3. display: inline-block;</h3> <p class="box"> <span class="nobr">グレートブリテン</span><span class="nobr">および</span><span class="nobr">北アイルランド連合王国という</span><span class="nobr">言葉は</span><span class="nobr">本当に</span><span class="nobr">長い言葉</span><span class="nobr">ですね</span> </p> </div> .box { padding: 10px; border: 1px solid; font-size: 40px; } .nobr { display: inline-block; } <span> + display: inline-block;の問題点 チャンクが親の要素の横幅より大きい場合、次の文字が回り込まない チャンクの横幅が親の要素をからはみ出ている場合は、文字があふれることはありませんが、解決策2の時のように、次の文字が回り込む事なく、不自然な改行になってしまいます。下の例では、北アイルランド連合王国というが<span>で囲まれている事で、次の言葉はが回り込む事ができません。レイアウトが崩れるわけではありませんが、変な部分で改行されて読みづらくなってしまうという問題があります。これを回避するには各チャンクをできるだけ細かく分割し、親の要素の横幅を超えないように調整しなければなりません。 結局何を使えば良いの？ レイアウトが崩れる時に適切な対処を毎回行える場合は、解決策2を使ってください。これが最もきれいに改行できます レイアウトが崩れる事を極力避けたい場合、解決策3を使ってください 自動で日本語改行処理を行うには？ ここまで読んだ方は毎回<wbr>や<span>を手動で入れていくのかーと感じているでしょう。文章がHTMLにハードコードされているならともかく、CMSで文章が管理されている場合、リッチテキストエディタとの相性も考えると、これらのタグを手動で入れていくのはかなり骨の折れる作業になります。 BudouXはまさにこの問題を解決するツールになります。詳細な内容は次回の記事に回します。実際の使い方だけでなく、アドビで利用する際に直面した問題や、その解決策等についても説明していきます。 https://developer.mozilla.org/ja/docs/Web/CSS/white-space ↩ https://developer.mozilla.org/ja/docs/Web/HTML/Element/wbr ↩ https://developer.mozilla.org/ja/docs/Web/CSS/word-break ↩ https://developer.mozilla.org/ja/docs/Web/CSS/overflow-wrap ↩ https://ishadeed.com/article/intrinsic-sizing-in-css/ ↩

問題 ある条件の時にbuttonをdisabledして使用不可にした際に, 使用不可である理由をtitle属性を用いたtooltipで表示したい時がある. しかし, bottonをdisabledさせると, マウスホバー時のイベントが無効になってしまうため, マウスホバーをさせてもtooltipが表示されないことがある. 解決法 1. pointer-events: autoを与える <button disabled style='pointer-events: auto' title='ツールチップの内容' > ボタン </button> 2. 対象をdivタグでくくり, それにtitle属性を与える <div title='ツールチップの内容'> <button disabled >ボタン</button> </div> 参考 https://developer.mozilla.org/ja/docs/Web/CSS/pointer-events

HTML(HyperText Markup Language) ハイパーテキスト・マークアップ・ランゲージ HTMLは、ウェブページを作成するために開発された言語です。現在、インターネット上で公開されているウェブページのほとんどは、HTMLで作成されています HyperText Markup Languageを日本語で表すなら、「ハイパーテキストに目印をつける言語」くらいの意味になります。 ハイパーテキスト（HyperText）とは ハイパーリンクを埋め込む事ができる高機能なテキストです。ハイパーリンクとはウェブページで下線の付いたテキストなどクリックすると別ページへ移動するリンクの事です 例 Qiita押すとリンク先に移動します ハイパーテキストでは、ウェブページから別のウェブページにリンクをはったり、 ウェブページ内に画像・動画・音声などのデータファイルをリンクで埋め込むことができます。 HTMLには、このハイパーリンク機能で関連する情報同士を結びつけて、情報を整理するという特徴があります。 マークアップ(Markup)とは また、目印をつける（Markup）というのは、文書の各部分が、どのような役割を持っているのかを示すということです。 例えば、見出し・段落・表・リストなど、文書の中で各部分が果たしている役割が分かるように目印をつけます。 こうした見出し・段落・表・リストなどの文書内の各部分を要素（element）と呼びます。

Adblockとは、ブラウザの拡張機能で、Webサイトに表示される広告を自動で非表示にしてくれるというものです。 ※ この記事では、「Adblockは悪か」、といった話題には触れず、以下の前提で進めます。 世の中にはAdblockを導入しているユーザーが居る そういったユーザーでもサイトを利用できる状態にしたい ＝ 広告以外の要素が意図せず非表示になるのを防ぎたい この拡張機能が有効なユーザーがサイトを表示したい場合、広告ではない要素まで消えてしまうという事象が起きることがあります。 例えば今だと、某有名レシピサイトさんの右カラムが丸ごと消失してしまうようです。 関係ない要素が消える理由 Adblockには、いくつかの仕組みで広告を検知しているようですが、そのうちの一つが、id名による検知です。 要素のid名に#ad_*のようなものが設定されていると、広告と認識され、非表示にされます。 実際にAdblock導入すると、以下のようなシンプルなCSSが追加されます。 #ad_mobile, #ad_module, #ad_wrapper, ..略.. { display: none !important; } 経験上、Webサイトを作っていて意図せず要素が消失してしまう場合、多くの場合これによるものだと思います。 「ブラウザのシークレットウィンドウだと表示されるけど、通常のウィンドウだと表示されなくなる要素がある」 的な事象のときは、Adblockを疑ってみてください。 対策 対策は、広告じゃない要素にad_*といった命名をしないことです。 特に、メインページ上部に置くスライダーや、サイト内の別コンテンツを紹介するバナーなどに、adと命名してしまうようです。

自己紹介 ジーズアカデミー講師 山崎と申します。MicrosoftMVPがChromeを解説するという動画です（笑） ※EdgeもコアはChromiumですから、デベロッパーツールは同じですからね。 今回、私のJavaScriptの授業（初級者向け）でのサポート動画をYoutube配信したものをまとめました。 一つ一つの解説が長いので「ブックマーク」して見ることをおススメいたします ◆動画集一覧 HTML/CSS/JavaScripを使った制作には「Chromeデベロッパーツール」は必須スキルです！ デザインの調整、他サイトの構造見たり、エラーの確認、デバッグ等で良く使います。 ※一部新しい機能は、今後追加していきます。 デベロッパーツールは奥が深いので、初学者には「#1,#2」だけをおススメします。 デベロッパーツールは奥が深い～ タイトル 対象 動画? #1「 Elements/Console 」 Webデザイナー/ フロントエンド https://youtu.be/PjZyPfXdJFA #2「 JavaScriptデバッガ― / Sources」 フロントエンド https://youtu.be/TXi5g4J17ds #3「 ブラウザApplicaation機能 」 フロントエンド https://youtu.be/DsHhKs9V03o #4「 Lighthouse 」 Webデザイナー/ フロントエンド https://youtu.be/srayKfhg5Ho #5「 セキュリティ＆ネットワーク機能 」 Webデザイナー/ フロントエンド https://youtu.be/Sn1oaEJwt0k #6「 CSSアニメーション検証機能 」 Webデザイナー https://youtu.be/zICHhUf6-Nw 初学者のために「Webデザイナー/ フロントエンド」と領域を記載してますが、両方覚えて損にはなりません。 ※一部、実務で使用してない機能は紹介だけにしてます。 今後も講義動画増えたら、こちらを更新していきます。 ブックマークしていただければ幸いです。

自己紹介 ジーズアカデミー講師 山崎と申します。MicrosoftMVPがChromeを解説するという動画です（笑） ※EdgeもコアはChromiumですから、デベロッパーツールは同じですからね。 今回、私のJavaScriptの授業（初級者向け）でのサポート動画をYoutube配信したものをまとめました。 一つ一つが奥が深く解説が長いので「ブックマーク」して見ることをおススメいたします ◆動画集一覧 HTML/CSS/JavaScripを使った制作には「Chromeデベロッパーツール」は必須スキルです！ デザインの調整、他サイトの構造見たり、エラーの確認、デバッグ等で良く使います。 ※一部新しい機能は、今後追加していきます。 デベロッパーツールは奥が深いので、初学者には「#1,#2」だけをおススメします。 デベロッパーツールは奥が深い～ タイトル 対象 動画? #1「 Elements/Console 」 Webデザイナー/ フロントエンド https://youtu.be/PjZyPfXdJFA #2「 JavaScriptデバッガ― / Sources」 フロントエンド https://youtu.be/TXi5g4J17ds #3「 ブラウザApplicaation機能 」 フロントエンド https://youtu.be/DsHhKs9V03o #4「 Lighthouse 」 Webデザイナー/ フロントエンド https://youtu.be/srayKfhg5Ho #5「 セキュリティ＆ネットワーク機能 」 Webデザイナー/ フロントエンド https://youtu.be/Sn1oaEJwt0k #6「 CSSアニメーション検証機能 」 Webデザイナー https://youtu.be/zICHhUf6-Nw 初学者のために「Webデザイナー/ フロントエンド」と領域を記載してますが、両方覚えて損にはなりません。 ※一部、実務で使用してない機能は紹介だけにしてます。 今後も講義動画増えたら、こちらを更新していきます。 ブックマークしていただければ幸いです。

今回はホームページにCSSやJavaScriptでアニメーションをつける方法について説明していこうと思います。やっぱりメニュー選択時などにアニメーションがあるのとないのとではそのページの面白さというのが全く違ってきますよね。アニメーションはホームページの内容とは関係しない部分ですが、ホームページを訪れた人が飽きないように楽しめるコンテンツとしてあった方がいいと思います。ですので、より特徴的で印象的なホームページを作るためにアニメーションはぜひマスターしておきたいところです( *｀ω´) 目次 1.ホバーアニメーション 2.ホバーアニメーション(アンダーライン) 3.固定ヘッダーのサイズ縮小アニメーション 4.ハンバーガーメニューを使おう 5.まとめ 1.ホバーアニメーション 以下の例でHeader部分のメニュー部分(Home・About・Topics)にマウスカーソルを合わせて(以下、ホバーすると言う)みてください。スマートフォン・タブレットの方はタッチしてみてください。 See the Pen Hover1 by Charme (@charme0525) on CodePen. メニュー部分をホバーするとその部分の背景色と文字色が変化しましたね。 クリックできる部分を強調する際にこのホバーアニメーションをよく使います。このアニメーションはCSSのみで実装でき、CSSソースコード内のコメントアウトで示した通り、その箇所のコードにより動作しています。 2.ホバーアニメーション(アンダーライン) 次はサブメニューのアニメーションを追加していきます。今度はホバー時にアンダーラインが表示されるアニメーションです。以下の例のサブメニュー部分を先ほどと同じようにホバーしてみてください。スマホタブレットの方はタッチしてみてください。 See the Pen アンダーラインホバー by Charme (@charme0525) on CodePen. ホバーするとアンダーラインが左から右に現れ、ホバーを外すと右に消えていったかと思います。このアンダーラインホバーアニメーションでは他にも下から表示される場合や右から左に現れるといったようにさまざまな方向からの表示をすることができます。これもCSSのみで実装できるので、CSSのコメントアウトで示した部分を利用してみてください。 3.固定ヘッダーのサイズ縮小アニメーション 今度はヘッダーを固定表示した際のアニメーションです。ヘッダーを固定表示するとページ内のどの部分でもメニューを選択することができて大変便利なのですが、そのままのサイズで固定されると画面の邪魔になってしまいます。そこでページをスクロールした際にヘッダーの高さが小さくなって固定表示するというアニメーションを紹介します。実際に下の結果をスクロールしてみてください。 See the Pen Untitled by Charme (@charme0525) on CodePen. このヘッダーサイズを変更するアニメーションではスクロール量を検知する必要があります。そのため、JavaScriptコードが必要となってくるのですが、jQueryを用いて簡単に実装できます。上の例でもjQueryで記述しています。 ヘッダーサイズを縮小する際にヘッダー内の表示方法を変更しないとメニュー部分がヘッダーからはみ出してしまったり不恰好になってしまうので、スクロールされるとサイズ変更とともにflexboxを使ってページタイトルとメニュー部分を配置し直しています。 jQueryのコードを簡単に解説するとvar scrollPosに現在のスクロール量を入れ、その値が100pxより大きくなるとheaderクラスにheader-animationクラスを追加します。スクロール量が100px以下だとheader-animationクラスを削除します。 さらに、header-animationクラス追加時の動作をCSSで記述しています。 4.ハンバーガーメニューを使おう まずハンバーガーメニューってなに？と思われたかもしれませんが、下の例に見覚えのある３本線のメニューアイコンがあるかと思います。それをクリック・タッチしてみてください。 See the Pen ハンバーガー by Charme (@charme0525) on CodePen. ハンバーガーメニューを押すとサブメニューが表示されましたね。もう一度押すと、元に戻ります。 これはスマホ・タブレットなどのディスプレイが狭いデバイスでよく見るメニュー表示方法で、必要なときにメニューボタンをタップしてメニューを出すようにすることでメイン部分を広く見せることができます。 モバイル向けのサイトを作る際には必ずと言っていいほど使用されるので、ぜひ覚えておきましょう＿φ(￣ー￣ ) 5.まとめ 今回は簡単なアニメーションを実際のホームページに組み込んだ場合の紹介となりました。アニメーションの実装方法はコピペで大丈夫です。数行程度で書けるのでコピペしてるうちに慣れていくと思います。 CSS・JavaScriptのアニメーションについての詳細な説明は別記事にて作成予定ですので、作成次第リンクを貼ります。 最後まで見ていただきありがとうございました。

こんにちは^^ 前回作成した＜超簡略版＞お弁当発注画面制作を改良するためにCSS,JavaScriptが必要であると考えたため、今回はCSSを学び編集しようと思います。 CSSも全く触ったことが無いため、基礎の基礎から学習しようと考えています。 もくじ 1 CSSとは 2 実際に動かす 3 今回の最終形 4 感想 5 参考文献 CSSとは CSS（スタイルシート）では、作成したHTMLの背景色やフォントサイズなど見た目の指定を行うことができます。 前回HTMLでフォント指定や幅の調整を行いましたが、世の中ではHTMLで文書作成をし、CSSを利用して見た目変更を行うのが主流だそうです。 CSSの基本の型 CSSは、3つの要素を使用して見た目を変更します。 以下に例を示します。 aiueo{color: green;} aiueo:セレクタ　{}内に記載されている内容に変更したい部分のHTMLタグを書く color:プロパティ　何を変更するか　colorの場合は色を変更できる　 使用できる単語は沢山あり、変えたい内容に合わせて単語を変更する プロパティの後ろには必ず[:]をつける green:値　どのように変更するか　プロパティによって書き方が変わる 値のうしろには必ず[;]をつける また、1つのセレクタに複数のプロパティを記述することができます。 aiueo{ color: green; font-size: 20px; } HTMLとの連動方法 HTML内に直接書き込む方法、別ファイルに作成しHTMLで読み込む方法と複数あります。 変更しやすく見やすいので、今回は別ファイルで作成します。 HTMLのheadタグ内に以下のコードを書き加えます。 <link rel="stylesheet" href="obento.css"> link:外部ファイルを読み込む rel:relationshipの略でrel属性と呼ばれる 　　　読み込む対象と、HTMLの関係性を表す　 　　　今回はCSS（スタイルシート）を読み込むので右辺にstylesheetと書く href:href属性と呼ばれ、読み込むCSSファイルの名称を記載する 　　　　「〇〇.css」の形式であれば〇〇は自由（アルファベットのみ） 別ファイルに作成する時の注意点として、HTMLファイルとCSSファイルを同一のフォルダ内に保存しておくことがあげられます。 別のフォルダに配置するとHTMLがCSSを読み込むことができず、見た目が変更されなくなります。 実際にうごかす 背景の色変更 HTMLのbody全体にグラデーションカラーを施し背景全体の色を変更しました。 body{ background: linear-gradient(#a8ff78,#78ffd6) ; } background:背景を指定するためのプロパティ linear-gradient(#a8ff78,#78ffd6):線状のグラデーション（開始色、終了色） ○○-gradientでグラデーションを示している ○○を変更すると円形や放射状など様々なグラデーションができる 開始色と終了色にはカラーコードを挿入する 実行すると以下のようになりました。HTMLは前回と変更していません。 白枠を作る 表もグラデーションになり見づらくなってしまったので、表の周りを白背景にします。 HTMLで作成した表を内部までまとめて動かすためにtableタグの外側にdivタグを加えました。 div{ background: #ffffff; width: 450px; padding: 30px; margin-left: auto; margin-right: auto; } width:横幅の大きさを示す padding:内側の余白を示す margin-:外側の余白を示す　左右をautoにすると中央に揃う 表の枠をCSSで表す 前回はHTMLで枠の太さを調整していましたが、CSSで表しました。 table{ border-collapse: collapse; border:solid 2px black; text-align: center; margin-left: auto; margin-right: auto; } table td, table th{ border:dashed 1px black; } border-collapse: collapse:隣り合ったボーダーセルの表示方法を示す　 collapseは重ねて表示される　初期値（separate）は外枠と中の線が分離して表示される border:solid:線の形状を示す　solidは直線　dashedは点線 後ろに線の太さと色をスペースを空けて示す text-align: center:文字や画像を揃える　centerは中央揃え これを実行した結果は以下のようになりました。 今回の最終形 お弁当の画像をHTMLで表示させるように変更し、大きさや左右の間隔はCSSで変更した。また、日付を指定できるカレンダーも中央に揃え、より見やすくしました。 HTMLとCSSのコードをそれぞれ示します。 こちらは最終形のHTMLコードです。 <!DOCTYPE html> <html> <head> <meta charaset="utf-8" /> <link rel ="stylesheet" href="obento.css"> <title> お弁当発注システム </title> </head> <body> <h1> <input type="date" align="center"> </h1> <div> <!--table 表--> <table> <!--tr=行作成、th=見出し、td=データ入力--> <tr> <th>お弁当名</th> <th>ご飯サイズ</th> <th>有無</th> <th>値段</th> </tr> <tr> <td> <img src="https://1.bp.blogspot.com/-bb7kq5ltcaY/UnyF491i2uI/AAAAAAAAaWU/YxPzCSHQg7g/s800/obentou_sake.png" >和食弁当</img> </td> <td> <label><input type="radio" name="wasyoku" value="big" >大</label> <label><input type="radio" name="wasyoku" value="tall" >中</label> <label><input type="radio" name="wasyoku" value="short" >小</label> </td> <td> <input type="checkbox" id="check1" onchange="Change"> </td> <td> 400円 </td> </tr> <tr> <td> <img src="https://4.bp.blogspot.com/-HC7_htu8tLI/UkJM9wJQ59I/AAAAAAAAYWk/mTs-LZ52aDw/s800/obentou_hamburg.png" >洋食弁当</img> </td> <td> <label><input type="radio" name="yousyoku" value="big">大</label> <label><input type="radio" name="yousyoku" value="tall">中</label> <label><input type="radio" name="yousyoku" value="short">小</label> </td> <td> <input type="checkbox" /> </td> <td> 400円 </td> </tr> <tr> <td> <img src="https://2.bp.blogspot.com/-88SqS3pAFXc/VCka8aZwF4I/AAAAAAAAm-U/xEls_G7gl84/s800/food_obentou_makunouchi.png" >幕の内弁当</img> </td> <td> ✕ </td> <td> <input type="checkbox" /> </td> <td> 500円 </td> </tr> <tr> <td> <img src="https://1.bp.blogspot.com/-LHEZgJ6tpeA/UgSL_9y4KrI/AAAAAAAAW5s/DNRPJ4kSvpI/s800/food_curryruce.png" >カレーライス</img> </td> <td> ✕ </td> <td> <input type="checkbox" /> </td> <td> 450円 </td> </tr> </table> </div> </body> </html> 前回はお弁当名を押すとリンク先に跳べるようにしていましたが、今回はimg src=画像のリンク　をしようしてブラウザに直接画像を貼りました。 日付指定ができるカレンダーをCSSで指定するためにh1タグを加えました。 次に、こちらが最終形のCSSコードになります。 body{ background: linear-gradient(#a8ff78,#78ffd6) ; } h1{ text-align: center; margin-left: auto; margin-right: auto; } div{ background: #ffffff; width: 450px; padding: 30px; margin-left: auto; margin-right: auto; } table{ border-collapse: collapse; border:solid 2px black; text-align: center; margin-left: auto; margin-right: auto; } table td, table th{ border:dashed 1px black; padding: 5px; } table td img{ width: 100px; margin-left: auto; margin-right: auto; } 結果は以下に示します。 感想 前回はとてもシンプルだったのでそれに比べたらわかりやすいお弁当発注画面になったと思う。 CSSのプロパティの種類がとても多いけれど調べればプロパティ表がでてくるし、型はシンプルでわかりやすいので今回でかなり理解できたと思う。 次は送信ボタンなどをつけたら本物の発注画面のようにできる気がした。 めちゃつかれたねむい(^^♪ 参考文献 HTMLファイルへのCSS読み込み方法を徹底解説【コピペで使える】 CSSの基礎徹底解説｜初心者が絶対覚えておきたい3つのポイント スタイルシート（CSS）の基本的な書き方【初心者向け】 CSS: table（テーブル）の位置を中央にする いらすとや