どうも、7noteです。CSSのみで、角のない矢印(>)の角が丸い矢印をつくります 矢印をアイコン画像などで作ってもいいのですが、cssを使って角丸にします。 このタイプの矢印(>)のよくある作り方としては正方形の2辺をborderで作り、45度回転させるのが多いのかなと思います。 ですがこの方法では角がかくばってしまいます。 なので違う方法を使って角の丸い矢印(>)を作っていきます。 cssで角の丸い矢印(>)の作り方 index.html <div class="arrow"></div> style.css .arrow { width: 200px; /* 適当な箱を作るための幅 */ height: 80px; /* 適当な箱を作るための高さ */ border: 1px solid #000; /* わかりやすいように線を引く */ position: relative; /* 基準位置とする */ } .arrow::before, .arrow::after { content: ""; /* 疑似要素に指定必須 */ width: 20px; /* 線の長さを指定 */ height: 3px; /* 線の幅を指定 */ display: inline-block; /* インラインブロックにする */ border-radius: 2px; /* 線を角丸にする */ background: #aaa; /* 線の色を指定 */ position: absolute; /* 相対位置に指定 */ right: 10px; /* 右から10pxの位置に配置 */ } .arrow::before { top: calc(50% - 8px); /* 数値は微調整してください */ transform: rotate(45deg); /* 45度回転させる */ } .arrow::after { bottom: calc(50% - 8px); /* 数値は微調整してください */ transform: rotate(-45deg); /* -45度回転させる */ } 解説 擬似要素のbeforeとafterの両方を使って作ります。 イメージとしては、二本の細長い棒を角丸にしてそれぞれ回転させて配置し、矢印の形にしています。 topとbottomのcalcの値を調整してきれいに重なる箇所を探してください。 まとめ もちろんCSSを使わずに画像にすれば角丸の矢印は簡単に作成できます。 もしくはアイコンフォントで作成する方法もあります。 さらにはSVGを使った方法なんかもあります。 ・アイコンフォント → https://ionicons.com/ 画像と比べると読み込み速度や、管理の面でいうとCSSでかけた方がメリットが大きいのでこの書き方も覚えておいて損はないと思います。 おそまつ！ ~ Qiitaで毎日投稿中!! ~ 【初心者向け】WEB制作のちょいテク詰め合わせ
数当てゲームを改良して、正解、不正解でブラウザ上に表示する文言を変えました <!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>数当てゲーム</title> <style> h1 { color:plum; font-size:100px; } h2 { color:#4f7911; font-size:50px; } body { background-color:whitesmoke; } </style> </head> <body id = "test"> <header> <div class="container"> <h1>数当てゲーム</h1> <h2>数を当ててみよう</h2> </div><!-- /.container --> </header> <main> <div class="container"> <section> </section> </div><!-- /.container --> </main> <footer> <div class="container"> </div><!-- /.container --> </footer> <script> 'use strict'; let message; let count = 1; let flag = 0; //乱数を発生させる。0~49まで数字がランダムに表示されるので1を足す。 const number = Math.floor(Math.random() * 50) + 1; //数当てゲームは5回挑戦できるようにする。 while (count <=5){ const answer = parseInt(window.prompt('数当てゲーム。1〜50の数字を入力してね。5回まで挑戦できます')); window.alert(count + "回目です。") //正解、数が小さい、数が大きい、1から50以外の数字が入った時の条件式 if(answer === number) { message = 'あたり！'; window.prompt(count + "回目で正解しました。おめでとうございます!"); document.querySelector("h1").innerHTML = "<h1>数当てゲーム、正解です!</h1>"; document.querySelector("h2").innerHTML = "<h2>おめでとうございます！</h2>"; flag = 1; break; } else if((answer < number) && (answer >= 1)) { message = '残念でした！もっと大きい'; } else if((answer > number) && (answer <=50)) { message = '残念でした！もっと小さい'; } else { message = '1〜50の数字を入力してね。'; } //入力した数字に応じてメッセージを出力する。 window.alert(message); // count = count + 1; } //3回挑戦して不正解だったら正解をアラートで表示し、HTMLに表示するメッセージを変更する。 if (flag === 0){ window.alert("正解は" + number + "です"); document.querySelector("h1").innerHTML = "<h1>残念でした!</h1>"; document.querySelector("h2").innerHTML = "<h2>また挑戦してください！</h2>"; } </script> </body> </html>
保存用 floatをつかって、別々の要素を左に寄せて、かつ寄せた要素の中の文字を中央寄せ 下記で最初は問題なかったが、アニメーションをｊｓで加えた瞬間効かなくなり、要素が改行された。 disply: flex; align-items: center; floatを使用し同じ段落へ持ってこようとしたが、disply: flexが打ち消され今度は中央揃えができなくなった。 float: left; disply: flex; align-items: center; そこでググり、line-heightを使うことで、無事、要素を左寄せし、縦に中央寄せできた。(heightとline-heightのピクセル数は一緒) float: left; height: 〇〇px; line-height: 〇〇px;
ファビコンとは favicon（ファビコン）は「Favourite icon（お気に入りのアイコン）」の略で、アドレスバーやブラウザのタブ、スマートフォンやタブレットなどでWebページを"ホーム画面"に置いた際に表示されるアイコンなどを指します。 主なサイズ 16px × 16px：IE タブ 32px × 32px：Chrome、Firefox、Safari などのタブ 64px × 64px：Windowsデスクトップアイコン 180px × 180px：iPhone＆iPad など。 今回は初めてなので、とりあえず 32px × 32pxだけで作成しました。 この辺りは余裕が出てきたら色んなサイズにも対応していきたいです。 デザイン デザインアプリやウェブブラウザでまずはデザインを作成する。 私は自分のリングネームにちなんでこのようなデザインを作成してみました。 SHUだけにShoe(片方の靴)。。。 空調の音は響き渡りましたでしょうか？ 気をつける点 デザインを作成する上で気をつける点としては大きく以下の２点が挙げられます。 アイコンはとても小さいのでシンプルなデザインを心がける事 統一感を持たせるために、アイコンのカラーとアプリのテーマカラーを揃える事 フォーマットの変換 今回はこちらのサイトを利用して、サイズとフォーマットを変更しました。 ファビコン favicon.icoを作ろう! サイト内で拡張子をicoに変更し、出来上がったファイルをpublicフォルダ直下に置きました。 32pxだと分かりやすくする為に、ファイル名をfavicon32.icoとし、 headダグの中で以下の記述をします。 index.html <link rel="icon" href="%PUBLIC_URL%/favicon32.ico" /> 結果 これを使って ↓ こう！ ひとまず初めてファビコンを作成から設定まで出来ましたが、他にももっと良いやり方があればぜひ教えてください。
はじめに ProgateでHTML＆CSSコースを受講しました。 勉強ついでに、学習したことを備忘録としてまとめようと思います。 環境 OS：macOS エディタ：VSCode ブラウザ：Google Chrome 受講コース：HTML & CSS 初級編 1 本コース中に使用したHTMLのタグとCSSのプロパティ コース学習中に登場したHTMLタグとCSSのプロパティ、それらの使用用途を簡単にまとめました。 ここに記述した以外の使い方ができるタグもあります。 各要素のより詳細な使い方については、MDNで調べると良いみたいです。 https://developer.mozilla.org/ja/docs/Web/HTML/Element HTMLで使用したタグ タグ（要素） 使用用途 h1〜h6 見出しの要素h1が一番大きな見出しで、h6が一番小さな見出しになる p 段落の要素見出し以外のテキストを囲むときに用いる a リンクを作成する要素href属性でリンク先を指定する(href="URL") img 画像を表示させる要素src属性で画像のリンクを指定する(src="URL") li リストを作成する要素囲む要素によって種類が変わる ul liを囲むと、リストの先頭が黒点になる ol liを囲むと、リストの先頭が数字の連番になる html "このファイルはHTMLです"という宣言 head Webページに関する情報を記述する body Webページに表示させる内容を記述する meta 文字コードなど、他のタグでは指定できない内容を指定する title 文章のタイトルを決める要素ブラウザのタブに表示されるページタイトルになる link 外部ファイルへのリンク要素CSSを適用させるファイルの定義やサイトのアイコンを指定する div コンテンツを分割する要素CSSを適用させるために、内容を分割する span 文中の一部分のみCSSを適用させる要素 input １行のテキスト入力を受け取る要素type属性の値で様々な動作になり、value属性の値でボタンに表示されるテキストを指定する textarea 複数行のテキスト入力を受け取る要素 CSSで使用したプロパティ プロパティ 使用用途 color 文字の色を変える16進数のカラーコードで色を指定する font-size 文字の大きさを変えるpxという単位を用いて、大きさを指定する font-family 文字のフォントを変えるフォント名にスペースが含まれている場合、フォント名をダブルクォーテーションで囲む必要がある background-color 背景色を変える色の指定方法はcolorと同じ width 要素の横幅を変える大きさはpxで指定する height 要素の高さを変える大きさはpxで指定する list-style listのスタイルを変えるリストの先頭のスタイルを指定できる float 要素の並び方を変えるleftを指定すると左から順に横並びになり、rightを指定すると右から順に横並びになる border 要素に枠線を付ける太さ(px)、種類、色を指定する特定の方向にのみつけたい場合は、「border-方向」のように指定する padding 要素のborderの内側に余白を作る方向を指定して余白を作ることもできる margin 要素のborderの外側に余白を作る記述方法はmarginと同様 2 HTMLの全体構造について ・実際のHTMLファイルには、決められた型を書いていく必要がある。 ・html要素の中にhead要素とbody要素が必要。headとbodyは文書中に一つだけ配置する。 ・head要素の中では、以下のような項目について設定を記述する。 ①文字コード：文字コードを指定することで、ページの文字化けを防ぐことができる。 ②ページタイトル：ページのタイトルを指定する。指定されたタイトルは、ブラウザのタブ上に現れる。 ③CSSの読み込み：href属性で読み込むCSSファイル名を指定する。（今回はstylesheet.cssを読み込む） HTMLの型 <!DOCTYPE html> //DOCTYPE宣言と呼ばれ、HTMLのバージョンを宣言する。 <html> <head> //Webページの設定に関する情報を記述する。ここに記述した内容は、Webページには表示されない。 <meta charset="utf-8"> //文字コードの指定 <title>サンプルページ</title> //ページのタイトルの指定 <link rel="stylesheet" href="stylesheet.css"> //CSSを読み込むための宣言 </head> <body> //Webページに表示させる内容を記述する。 </body> </html> 3 ボックスモデルについて HTMLでは、全ての要素がボックスと呼ばれる領域を持っている。 ボックスは下図のように4つの領域から成り、各領域の名称とその大きさを指定するプロパティは以下の表のようになっている。 領域名 プロパティ content テキストや画像などの内容を表示する領域width、heightで大きさを指定する padding 枠線の内側の領域paddingプロパティで大きさを指定する border ボックスの枠線borderプロパティで大きさ、種類、色を指定する margin 枠線の外側の領域marginプロパティで大きさを指定する 4 その他の学びや注意点について ・コメントアウトのやり方 HTMLの場合： <!-- -->で囲む CSSの場合： /* */で囲む ・エディタでコメントアウトするショートカットキーは、「command」+「/」。 ・入れ子構造要素がある場合には、インデント（字下げ）して親子関係を分かり易くする。 インデントするには、行先頭でtabキーを押す。 ・CSSのプロパティの末尾にはコロン(:)、行末にはセミコロン(;)をつける必要がある。 ・同じ要素名のうち、ある特定の要素にのみCSSを適用したい場合は、classで要素に名前をつける。 class名でCSSを指定する場合、先頭にドット「.」が必要となる。 ・タイプミスを防ぐために、補完機能を使うと良い。タグ名を入力しtabキーを押すと、終了タグまで補完してくれる。 （VSCodeには補完機能が備わっているため、tabを押さなくても良い）←すごく便利 ・paddingによる余白の指定方法(marginも同様) ① 全方向に均一に余白を作りたい padding: ○○px; ② ある特定の方向に余白を作りたい padding-top: ○○px; （下部はpadding-bottom、右部はpadding-right、左部はpadding-leftを用いる） ③ 上下には○○px、左右には□□pxの余白を作りたい padding: ○○px □□px; ④ ４方向各々に異なる余白を作りたい padding: ○○px □□px △△px ☆☆px; （上部○○px、右部□□px、下部△△px、左部☆☆pxの余白が作れる） 最後に 続いて、中級編を学習していきます。 内容の誤りや補足等ありましたら、コメントにて教えていただけますと助かります。
HTML5以前は主にH要素によってアウトラインが解釈されていました。 <html> <body> <!-- アウトライン1 --> <h1>大見出し</h1> <p>文章</p> <!-- アウトライン2 --> <h2>中見出し</h2> <p>文章</p> <!-- アウトライン3 --> <h3>小見出し</h3> <p>文章</p> <!-- /アウトライン3 --> <!-- /アウトライン2 --> <!-- /アウトライン1 --> </body> </html> 大見出し L中見出し L小見出し セクショナブル要素によってコーダーが明示的にアウトラインをさ指定できるのでHTML5.0ではセクショニング要素によって明示的にセクショニングがなされれば以下の様にすべてH１でのマークアップが可能になりました。 <html> <body> <!-- アウトライン1 --> <h1>大見出し</h1> <p>文章</p> <section> <!-- アウトライン2 --> <h1>中見出し</h1> <p>文章</p> <section> <!-- アウトライン3 --> <h1>小見出し</h1> <p>文章</p> <!-- /アウトライン3 --> </section> <!-- /アウトライン2 --> </section> <!-- /アウトライン1 --> </body> </html> しかし、HTML5.1以降は上のようなマークアップは推奨されず、アウトラインに従ったHeading要素でのマークアップになりました。 <html> <body> <!-- アウトライン1 --> <h1>大見出し</h1> <p>文章</p> <section> <!-- アウトライン2 --> <h2>中見出し</h2> <p>文章</p> <section> <!-- アウトライン3 --> <h3>小見出し</h3> <p>文章</p> <!-- /アウトライン3 --> </section> <!-- /アウトライン2 --> </section> <!-- /アウトライン1 --> </body> </html> セクショナブル要素は以下の要素です body nav article section aside header footer 見出しがあればアウトラインができ、アウトラインがあれば基本的に見出しがあるのが基本です。 よくある間違い１（セクションに見出しがないよ？） <!-- 誤 --> <h1>見出し</h1> <section> <p>文章文章</p> </section> よくある間違い２（セクショニング要素の無駄な入れ子） body要素はセクショニング要素です 誤 <!-- 誤 --> <body> <article> <h1>見出し</h1> <p>文章文章</p> </article> </body> と、言うのが私のHTML5の大体の認識でした。 が、 nav要素もセクショニング要素ですが、厳格にアウトラインを意識すれば見出しを付ける必要があるとおもいますが、いちいち見出しを用意できない場合もあると思います。また、header要素もセクショニング要素ですが、扱いが微妙なケースがあります。 それでHTML5.2の仕様についてちょっと調べていたのですが、例として出てくるマークアップが、アウトライン構造が微妙なものが数多く出ていました。 いよいよ、私は、 「HTML何もわからない」状態になりました。 そういう時に見るべきは公式ドキュメントです。 公式のドキュメントはこちらです。 There are currently no known native implementations of the outline algorithm in graphical browsers or assistive technology user agents, although the algorithm is implemented in other software such as conformance checkers and browser extensions. Therefore the outline algorithm cannot be relied upon to convey document structure to users. Authors should use heading rank (h1-h6) to convey document structure. https://www.w3.org/TR/html52/sections.html#headings-and-sections 要するに、 「アウトラインのアルゴリズムはこれといって決まってるものはないからあまり信用できんのだよ。だからセクショニング要素に頼らず、アウトライン構造はH要素で作ってね！」 ということだろうか？ なんじゃそりゃ！ まあ、アウトライン？ナニソレオイシイノ？状態でマークアップするよりも、ここまで知った上でアークアップしたほうが良いマークアップになることは確かなようです。
