はじめに 先日、あるWEBアプリケーションのデモ開発を行った後、UIの一部、表題内容の処理部分をパーツとして分解し、JSFiddleとCodePenで公開しました。本記事はその詳細という位置づけですが、ほぼ小ネタ扱いです。 ロジック 以下が実行結果となります。処理部分のロジックは比較的単純です。 See the Pen stCreatePyramid by STSHISHO (@STSHISHO) on CodePen. 1-ピラミッドの段数を引数として指定 steps = steps > 10? 10: steps段数の上限を１０に設定しています。サンプルのため負数や浮動小数点への対応はしていません。 2-規定のDIV要素内にUL要素を追加 サンプルのためUL要素を挿入するDIV要素#stPyramidを固定しています。HTML内にも空のDIV要素<div id="stPyramid"></div>を記述しておきます。このDIV要素がピラミッドのコンテナになります。 const ul = document.createElement('ul') document.querySelector('#stPyramid').appendChild(ul) //挿入位置 ul.style.width = `${steps*30+20}px` //ulのサイズを設定 3-指定段数分LI要素を追加、SPAN要素を現在の段数分追加 for (let i = 1, rl = steps; i <= rl; i++) { let li = document.createElement('li') ul.appendChild(li) li.style.width = `${steps*30+20}px` //li要素の幅を動的に設定 //セル設定 for (let j = 1; j <= i; j++) { let span = document.createElement('span') li.appendChild(span) } } あとはCSSにてDIV内の要素とLI内の要素を中心揃えにするだけです。 使用する場面やカスタマイズについて サンプルのためUL要素を追加するDIV要素を固定していますが、任意のidを指定できるようにすれば複数のリスト自動生成に対応できます。 また、並べる要素を正方形にしていますが、CSVを読み込んでリストを自動生成する場面を想定し、データに応じたサイズやデザインに対応できるようにしても面白いと思います。 最後に 元になったWEBアプリケーションの詳細について、いずれまとめる予定でいます。
先日、あるWEBアプリケーションのデモ開発を行った後、UIの一部、表題内容の処理部分をパーツとして分解し、JSFiddleとCodePenで公開しました。本記事はその詳細という位置づけですが、ほぼ小ネタ扱いです。
以下が実行結果となります。処理部分のロジックは比較的単純です。
See the Pen stCreatePyramid by STSHISHO (@STSHISHO) on CodePen.
steps = steps > 10? 10: steps段数の上限を１０に設定しています。サンプルのため負数や浮動小数点への対応はしていません。
steps = steps > 10? 10: steps
サンプルのためUL要素を挿入するDIV要素#stPyramidを固定しています。HTML内にも空のDIV要素<div id="stPyramid"></div>を記述しておきます。このDIV要素がピラミッドのコンテナになります。
#stPyramid
<div id="stPyramid"></div>
const ul = document.createElement('ul') document.querySelector('#stPyramid').appendChild(ul) //挿入位置 ul.style.width = `${steps*30+20}px` //ulのサイズを設定
for (let i = 1, rl = steps; i <= rl; i++) { let li = document.createElement('li') ul.appendChild(li) li.style.width = `${steps*30+20}px` //li要素の幅を動的に設定 //セル設定 for (let j = 1; j <= i; j++) { let span = document.createElement('span') li.appendChild(span) } }
あとはCSSにてDIV内の要素とLI内の要素を中心揃えにするだけです。
サンプルのためUL要素を追加するDIV要素を固定していますが、任意のidを指定できるようにすれば複数のリスト自動生成に対応できます。
また、並べる要素を正方形にしていますが、CSVを読み込んでリストを自動生成する場面を想定し、データに応じたサイズやデザインに対応できるようにしても面白いと思います。
元になったWEBアプリケーションの詳細について、いずれまとめる予定でいます。
どうも7noteです。徐々に透過して透明になっていく要素の作り方について グラデーションを使って、画像やテキストなどの要素を徐々に透明になっていくように見せる方法。 ↓↓↓↓↓↓ こんな感じに徐々に透明にできます。 徐々に透明になる要素の書き方 index.html <div class="transparent"> <img src="sample.jpg"> </div> style.css .transparent { position: relative; /* 基準位置とする */ } .transparent::before { content: ""; /* 疑似要素に必須 */ width: 100%; /* 幅いっぱい */ height: 100%; /* 高さいっぱい */ display: block; /* 高さを指定するためにブロック要素にする */ background: linear-gradient(rgba(255,255,255,0) 0, #fff 80%); /* 徐々に透明にする */ position: absolute; /* */ top: 0; left: 0; } 解説 徐々に透明にするためには、画像要素を本当に透明にするのではなく、背景色と同じグラデーションを上にかぶせることで透明になっているように見せかけています。 疑似要素でposition指定をしたbeforeに対して、白→透明のグラデーションをかけます。 そしてブロック要素にして画像の高さと幅とおなじになるようそれぞれ100%を指定して位置を指定すれば、徐々に透明になっている要素の完成です。 backgroundのカラー（#fff）を100%にしていないのは、100%にしてしまうと画像の縁がはっきり見えてしまうからです。 まとめ CSSでできることは限られているので、どうやって錯覚にかけてそれっぽく見せるかが重要だと思っています。 もちろんぐちゃぐちゃなソースはアレかもしれないですが、最終的に動いて思った通りに見えているのであれば、手段はなんでもいいのかなと思います。 おそまつ！ ~ Qiitaで毎日投稿中!! ~ 【初心者向け】WEB制作のちょいテク詰め合わせ
グラデーションを使って、画像やテキストなどの要素を徐々に透明になっていくように見せる方法。
↓↓↓↓↓↓
こんな感じに徐々に透明にできます。
<div class="transparent"> <img src="sample.jpg"> </div>
.transparent { position: relative; /* 基準位置とする */ } .transparent::before { content: ""; /* 疑似要素に必須 */ width: 100%; /* 幅いっぱい */ height: 100%; /* 高さいっぱい */ display: block; /* 高さを指定するためにブロック要素にする */ background: linear-gradient(rgba(255,255,255,0) 0, #fff 80%); /* 徐々に透明にする */ position: absolute; /* */ top: 0; left: 0; }
徐々に透明にするためには、画像要素を本当に透明にするのではなく、背景色と同じグラデーションを上にかぶせることで透明になっているように見せかけています。
疑似要素でposition指定をしたbeforeに対して、白→透明のグラデーションをかけます。 そしてブロック要素にして画像の高さと幅とおなじになるようそれぞれ100%を指定して位置を指定すれば、徐々に透明になっている要素の完成です。
backgroundのカラー（#fff）を100%にしていないのは、100%にしてしまうと画像の縁がはっきり見えてしまうからです。
CSSでできることは限られているので、どうやって錯覚にかけてそれっぽく見せるかが重要だと思っています。 もちろんぐちゃぐちゃなソースはアレかもしれないですが、最終的に動いて思った通りに見えているのであれば、手段はなんでもいいのかなと思います。
~ Qiitaで毎日投稿中!! ~ 【初心者向け】WEB制作のちょいテク詰め合わせ
私たちが普段見ているwebページはHTMLとCSSという二つの言語から成り立っています。 HTML ウェブサイトに表示される文字情報を記載する言語 CSS HTMLに装飾を加えるための言語 タグ 要素のかたまりを示す記述です。 タグには、始まりを示す開始タグと、終わりを示す終了タグがあります。 終了タグが無い要素も存在します。 タグに挟まれた部分が要素となります。 例divタグ <div>ここに書かれた物が要素</div> タグの中にはさらにタグを挿入することができ入れ子構造をとることができます。 HTMLの構成 HTMLは大きく分けると、head要素とbody要素という2つの要素で構成されます。 まずHTMLのコード全体を見てみましょう。 <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>HTML構造学習</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1> ページの<span class="red">見出し</span>になります。 </h1> <p> 段落1 </p> <p class="second-paragraph"> 段落2<b>太字で表示</b> </p> <p id="third-paragraph"> 段落3 </p> <a href="https://www.google.com/">Googleリンク</a> </body> </html> cssも見てみましょう p { font-size: 20px; color: green; } .second-paragraph { color: purple; font-size: 10px; } #third-paragraph { color: blue; } .red { color: red; } DOCTYPE HTML HTMLを記述する際は<!DOCTYPE HTML>をファイルの先頭に書きます。 これは「これはHTMLを記載したファイル」という宣言です。 html要素 HTML文章の始まりと終わりを示す要素です。 head要素 サイトの情報や、CSSファイルの情報を記載する部分です。画面上には表示されません。 head要素には以下のような情報を記述します。 ・ページのタイトル ・CSSファイルの指定 ・外部ファイルの読み込み meta要素 HTML文章に関する情報を指定する時に使用します。閉じタグは必要なくcharset=はmeta要素の属性です。 属性 属性は、要素に情報を付け加える役割を持ちます。属性のあとには属性値が続きます。 charset属性 メタ要素にて、どのような文字コードを用いるか示すことができる属性です。今回はUTF-8 title要素 ウェブサイトのタイトルを指定する要素です。title要素内にタイトルを記述しても画面上には表示されません。検索結果や、ブラウザのタブに表示するタイトルとして使用されます。 body要素 画面上に表示したい情報を記載する部分でブラウザ上に表示されている情報は、この中に書かれたものです。 h要素 hから始まる要素は文章の見出しを作るための要素です。 h1からh6まで存在します。 タグに囲まれたテキストは見出しとして強調され、h1から順に文字の太さと大きさが変化します(h1が最大)。 p要素 文章の段落を表すものでタグで囲むと一つの段落として認識されます。 br要素 テキストを改行するための要素でテキストの中で用いることで、改行ができます。終了タグは不要です。 b要素 文字を太くする要素です。タグで囲まれている部分だけ太字になります。 a要素 ...で囲ったテキストをリンクにすることができクリックすると特定のページに移動します。 aタグのhref属性に、移動させたいページのURLを指定します。 href属性 href属性はリンクの移動先を指定します。 属性値としてURLや移動させたいページのHTMLファイルが置いてあるフォルダの場所を指定することで、特定のページへのリンクが作成できます。 <a href="移動先URL">リンクとなるテキスト</a> コメントアウト コードを無いものとして扱うことができます。コメントアウトされたコードは認識されないため、ブラウザに表示されません。 他のプログラミング言語にも同じ機能があります。記述の仕方は言語ごとに異なり、 HTMLではコメントアウトしたいコードを<!--と-->で囲みます。 コード上にメモを残せるので、他人がコードを見たときに何を意図して書いてあるのかわかりやすいというメリットがあります <h1> 見出し <!-- コメントアウト --> </h1> コードを比べる コードを比較するには、VSCodeの標準機能が便利です。以下の手順で確認と修正が可能です。 ①見本のコードをコピーする ②自分のコードがあるファイルを開く ③command + shift + Pでコマンドパレットを開く ④>に続けてCompare Active File With Clipboardと入力し選択 ⑤見本と異なる部分を確認する ⑥タイポ(誤字)や抜けているコードを修正する HTMLとCSSの関係性 link要素 link要素は現在のファイル（HTML）から外部情報（今回であればCSSファイル）を関連付けする際に記載します。 rel属性、href属性と一緒に使用するのが一般的です。 rel属性 参照先のファイルが現在のファイルとどのような関係であるのかを明らかにします。 属性値には決められたキーワードを記載します。 href属性 href属性は、参照先の外部ファイルの場所を明らかにします。 属性値にはファイルの場所、ファイル名を記載します。 <link rel="stylesheet" href="style.css"> CSSの記述 セレクタ CSSによる装飾を、どの部分のHTMLに適用するかを選択するための記述です。 プロパティ セレクタで指定したHTMLの「何を変えるのか」を選択するための記述で背景の色や文字の大きさなど様々用意されています。複数ある場合順番は関係ありません。 値 プロパティで設定する内容を決めるための記述で文字の色を指定するプロパティであれば、値でどのような色にするのかを決めることができます。プロパティと値の間はコロン（ : ）で区切り、値の後にはセミコロン（ ; ）を入力します。 .body { <!-- body がセレクタ --> color: blue; <!-- color hight がプロパティ --> height: 15px; <!-- blue 15px が値 --> } 様々なプロパティと属性 colorプロパティ 値によって自由に文字の色を指定することができます。 font-sizeプロパティ 文字の大きさを指定するプロパティです。 px px(ピクセル)とは簡単にいうとデジタル画面の最小の単位のことです。 class属性 HTML要素に対して個別に名前を指定することができます。 class属性の属性値をclass名といいます。 classセレクタ HTMLで指定したclass名をCSSのセレクタとして使用することができます。classセレクタを指定する場合は、「.クラス名」の形でCSSファイルに記述します。 p要素にmessageというクラス属性をつけてmessageクラスセレクタで赤色を指定したい場合 には以下の記述になります。 <p class="message"> テキスト </p> .message { color: red; } id属性 特定のHTML要素のみに対して、名前を指定することができる属性で属性値をid名といいます。 id属性には「1つのページ内で、同じid名のHTML要素は一つしかないという慣例が存在します。 想定した挙動にならないことを防ぐためです。 idセレクタ HTMLで指定したid名をCSSのセレクタとして使用することができ指定する場合は、 「#id名」の形で記述します。 p要素にmessageというid属性をつけてidセレクタで赤色を指定したい場合 には以下の記述になります。 <p id="message"> テキスト </p> #id { color: red; } span要素 テキストの一部だけを装飾するために使用される要素で部分的にテキストのフォント調整、文字色・背景色を変更することができます。 以上です。
私たちが普段見ているwebページはHTMLとCSSという二つの言語から成り立っています。
ウェブサイトに表示される文字情報を記載する言語
HTMLに装飾を加えるための言語
要素のかたまりを示す記述です。 タグには、始まりを示す開始タグと、終わりを示す終了タグがあります。 終了タグが無い要素も存在します。 タグに挟まれた部分が要素となります。
<div>ここに書かれた物が要素</div>
タグの中にはさらにタグを挿入することができ入れ子構造をとることができます。
HTMLは大きく分けると、head要素とbody要素という2つの要素で構成されます。
まずHTMLのコード全体を見てみましょう。
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>HTML構造学習</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1> ページの<span class="red">見出し</span>になります。 </h1> <p> 段落1 </p> <p class="second-paragraph"> 段落2<b>太字で表示</b> </p> <p id="third-paragraph"> 段落3 </p> <a href="https://www.google.com/">Googleリンク</a> </body> </html>
cssも見てみましょう
p { font-size: 20px; color: green; } .second-paragraph { color: purple; font-size: 10px; } #third-paragraph { color: blue; } .red { color: red; }
HTMLを記述する際は<!DOCTYPE HTML>をファイルの先頭に書きます。 これは「これはHTMLを記載したファイル」という宣言です。
HTML文章の始まりと終わりを示す要素です。
サイトの情報や、CSSファイルの情報を記載する部分です。画面上には表示されません。 head要素には以下のような情報を記述します。
・ページのタイトル ・CSSファイルの指定 ・外部ファイルの読み込み
HTML文章に関する情報を指定する時に使用します。閉じタグは必要なくcharset=はmeta要素の属性です。
属性は、要素に情報を付け加える役割を持ちます。属性のあとには属性値が続きます。
メタ要素にて、どのような文字コードを用いるか示すことができる属性です。今回はUTF-8
ウェブサイトのタイトルを指定する要素です。title要素内にタイトルを記述しても画面上には表示されません。検索結果や、ブラウザのタブに表示するタイトルとして使用されます。
画面上に表示したい情報を記載する部分でブラウザ上に表示されている情報は、この中に書かれたものです。
hから始まる要素は文章の見出しを作るための要素です。 h1からh6まで存在します。 タグに囲まれたテキストは見出しとして強調され、h1から順に文字の太さと大きさが変化します(h1が最大)。
文章の段落を表すものでタグで囲むと一つの段落として認識されます。
テキストを改行するための要素でテキストの中で用いることで、改行ができます。終了タグは不要です。
文字を太くする要素です。タグで囲まれている部分だけ太字になります。
...で囲ったテキストをリンクにすることができクリックすると特定のページに移動します。 aタグのhref属性に、移動させたいページのURLを指定します。
href属性はリンクの移動先を指定します。 属性値としてURLや移動させたいページのHTMLファイルが置いてあるフォルダの場所を指定することで、特定のページへのリンクが作成できます。
<a href="移動先URL">リンクとなるテキスト</a>
コードを無いものとして扱うことができます。コメントアウトされたコードは認識されないため、ブラウザに表示されません。
他のプログラミング言語にも同じ機能があります。記述の仕方は言語ごとに異なり、 HTMLではコメントアウトしたいコードを<!--と-->で囲みます。 コード上にメモを残せるので、他人がコードを見たときに何を意図して書いてあるのかわかりやすいというメリットがあります
<h1> 見出し <!-- コメントアウト --> </h1>
コードを比較するには、VSCodeの標準機能が便利です。以下の手順で確認と修正が可能です。
①見本のコードをコピーする ②自分のコードがあるファイルを開く ③command + shift + Pでコマンドパレットを開く ④>に続けてCompare Active File With Clipboardと入力し選択 ⑤見本と異なる部分を確認する ⑥タイポ(誤字)や抜けているコードを修正する
link要素は現在のファイル（HTML）から外部情報（今回であればCSSファイル）を関連付けする際に記載します。 rel属性、href属性と一緒に使用するのが一般的です。
参照先のファイルが現在のファイルとどのような関係であるのかを明らかにします。 属性値には決められたキーワードを記載します。
href属性は、参照先の外部ファイルの場所を明らかにします。 属性値にはファイルの場所、ファイル名を記載します。
<link rel="stylesheet" href="style.css">
CSSによる装飾を、どの部分のHTMLに適用するかを選択するための記述です。
セレクタで指定したHTMLの「何を変えるのか」を選択するための記述で背景の色や文字の大きさなど様々用意されています。複数ある場合順番は関係ありません。
プロパティで設定する内容を決めるための記述で文字の色を指定するプロパティであれば、値でどのような色にするのかを決めることができます。プロパティと値の間はコロン（ : ）で区切り、値の後にはセミコロン（ ; ）を入力します。
.body { <!-- body がセレクタ --> color: blue; <!-- color hight がプロパティ --> height: 15px; <!-- blue 15px が値 --> }
値によって自由に文字の色を指定することができます。
文字の大きさを指定するプロパティです。
px(ピクセル)とは簡単にいうとデジタル画面の最小の単位のことです。
HTML要素に対して個別に名前を指定することができます。 class属性の属性値をclass名といいます。
HTMLで指定したclass名をCSSのセレクタとして使用することができます。classセレクタを指定する場合は、「.クラス名」の形でCSSファイルに記述します。
p要素にmessageというクラス属性をつけてmessageクラスセレクタで赤色を指定したい場合 には以下の記述になります。
<p class="message"> テキスト </p>
.message { color: red; }
特定のHTML要素のみに対して、名前を指定することができる属性で属性値をid名といいます。 id属性には「1つのページ内で、同じid名のHTML要素は一つしかないという慣例が存在します。 想定した挙動にならないことを防ぐためです。
HTMLで指定したid名をCSSのセレクタとして使用することができ指定する場合は、 「#id名」の形で記述します。
p要素にmessageというid属性をつけてidセレクタで赤色を指定したい場合 には以下の記述になります。
<p id="message"> テキスト </p>
#id { color: red; }
テキストの一部だけを装飾するために使用される要素で部分的にテキストのフォント調整、文字色・背景色を変更することができます。
以上です。
inputに「:focus」を使用した際に謎の青い枠が表示される。 chrome以外のブラウザ（Firefoxなど）ではこの現象は見られません。 :focus { outline: none; } →解決
inputに「:focus」を使用した際に謎の青い枠が表示される。 chrome以外のブラウザ（Firefoxなど）ではこの現象は見られません。
:focus { outline: none; }
→解決
背景 バックエンドからデータを取得し、そのデータをもとにカードを並べたい。 しかし、通常並べるだけでは以下のように無限に横並びになってしまう。 解決策 折り返したい子要素を包む親要素に以下のCSSを指定する。 display: flex; flex-wrapper: wrap; 解決画面 以下の通り、親領域に収まらない時は折り返されるようになった。 参考コード // 折り返したい子要素を包む親要素 const CardsWrapper = styled.div` display: flex; justify-content: center; margin-top: 12px; flex-wrap: wrap; // flexでwrap指定する。 `; // 折り返したい子要素 const CardHolder = styled.div` margin-right: 6px; `; const App = () => { // ... // 取得したデータ数だけカードをレンダリングする関数。 const alignCards = (data) => { return ( <CardsWrapper> {data.map((_data, i) => { return ( <CardHolder><SampleCard name={data[i].title}/> </ CardHolder> ) })} </CardsWrapper> ) } // ... return ( <> {alignCards(movieDataArraysObj)} </> ) } export default App;
バックエンドからデータを取得し、そのデータをもとにカードを並べたい。 しかし、通常並べるだけでは以下のように無限に横並びになってしまう。
折り返したい子要素を包む親要素に以下のCSSを指定する。
display: flex; flex-wrapper: wrap;
以下の通り、親領域に収まらない時は折り返されるようになった。
// 折り返したい子要素を包む親要素 const CardsWrapper = styled.div` display: flex; justify-content: center; margin-top: 12px; flex-wrap: wrap; // flexでwrap指定する。 `; // 折り返したい子要素 const CardHolder = styled.div` margin-right: 6px; `; const App = () => { // ... // 取得したデータ数だけカードをレンダリングする関数。 const alignCards = (data) => { return ( <CardsWrapper> {data.map((_data, i) => { return ( <CardHolder><SampleCard name={data[i].title}/> </ CardHolder> ) })} </CardsWrapper> ) } // ... return ( <> {alignCards(movieDataArraysObj)} </> ) } export default App;
