CSS
CSS詳細度とは｜計算方法・優先順位・!important・詳細度を上げる/下げる方法
CSSの詳細度と優先順位を初心者向けに解説します。ID、class、タグ、インラインスタイル、!importantの強さ、同じ詳細度なら後に書いたCSSが勝つ仕組み、詳細度を上げる・下げる方法まで整理します。
ARCHIVE
月: 2020年12月
HTML
HTMLタグの使い分け｜div・p・span・h1〜h3・asideを初心者向けに解説
div、p、span、h1〜h3、asideタグの違いと使い分けを初心者向けに解説します。divの使いすぎ、pタグにdivを入れるNG例、見出しタグの順番、asideの使い方まで、HTMLの意味とCSSの表示を分けて整理します。
HTML
HTMLのtableでtdが改行されない原因とCSSで折り返す方法
HTMLのtableでtd内のテキストが改行されない原因と、CSSで折り返す方法を解説します。長いURLや英数字、white-space: nowrap、table-layout、overflow-wrap、word-break、HTMLメールでの注意点まで整理します。
HTML
aタグをpタグで囲む？リンクと段落の正しい書き方をHTML例で解説
aタグとpタグの正しい使い分けを解説します。pタグの中にaタグを書く基本形、文章全体をリンクにする書き方、カード全体をクリックできるリンクにする方法、避けたいNG例をHTMLとCSSの例で整理します。
HTML
HTMLで改行されない原因と直し方｜br・p・pre・white-spaceの使い分け
HTMLで改行されない原因を、brタグ、pタグ、preタグ、CSSのwhite-space、HTMLメール、brがそのまま表示されるケースに分けて解説します。改行コードを反映したい場合や、CSSで折り返しを制御したい場合の直し方も紹介します。
CSS
CSS Gridの使い方｜2列・レスポンシブ・repeat・grid-area・flexとの使い分け
CSS Gridの基本から、2列・3列レイアウト、repeat、minmax、auto-fit、レスポンシブな列数可変、grid-area、中央寄せ、flexとの使い分けまで、コード例でわかりやすく解説します。
CSS
CSS flexの使い方｜横並び・中央寄せ・均等幅・折り返し・高さを揃える方法
CSS flexの基本から、横並び、中央寄せ、justify-content、align-items、flex: 1、均等幅、折り返し、高さを揃える方法まで解説します。flexがずれる、均等にならない、高さが揃わないときの原因と直し方も整理します。
CSS
CSS displayの使い方｜インライン・ブロック・display: contentsまで解説
CSS displayの使い方を、インライン要素とブロック要素の違いから解説します。div・span・pの改行、inline/block/inline-block/flex、display: contentsの使い方とアクセシビリティ上の注意点まで整理します。
CSS
CSSアニメーションの作り方｜transition・animation・keyframesとサンプル集
CSSアニメーションの作り方を、transition、animation、@keyframesの違いから解説します。フェードイン、ふわっと表示、ゆらゆら、ボタン、ローディングなど、コピペしやすいサンプルと注意点をまとめます。
JavaScript
JavaScriptの基礎文法まとめ
JavaScriptの基礎文法を理解しましょう。 ここではJavaScriptの基礎中の基礎の部分が書かれているので、 しっかりと確認しておきましょう。
JavaScript
JavaScriptの関数を使いこなすために知っておくべき基礎知識
同じ言葉や数字が何度も出てくるとき、それを修正する必要がでたときに大変になります。 また、修正回数に伴ってミスも起きやすくなるという問題もでてきます。 それらの問題を解決するために、関数を使います。 具体的なJavaScriptの関数の使い方を学んでいきましょう。
JavaScript
JavaScriptの条件分岐について
JavaScriptで条件分岐が使えるようになると、簡単なゲームを作成できるようになります。 また、WebサイトやWebアプリを作成する上で、必ず使う基礎知識になるので、しっかりと学んでいきましょう。
HTML
HTMLタグの仕組みと属性について
HTMLは、文書の意味を考えて、コンピュータが理解できるように適切に印をつける（マークアップする）言語です。 その印のことをタグといい、そのタグで囲むことでマークアップすることができます。 ではそのHTMLタグの仕組みを…
HTML
htmlの箇条書きリスト、順序付きリスト、説明リストの使い方
htmlでは、リストを表示することができます。 そのリストには、三種類あります。 箇条書きリスト 順序付きリスト 説明リスト それぞれのリストの書き方と使い分けをみていきましょう。 箇条書きリスト 箇条書きは上の通り、 …
CSS
CSSのボックスモデルとbox-sizingを理解する
CSSのボックスモデルを理解することで、とても自由にレイアウトが組めるようになります。 この記事を読むことで、 widthとheightを理解する borderを理解する paddingを理解する marginを理解する…
CSS
CSSのpositionプロパティを理解する
positonプロパティをマスターすることで、好きな要素を好きな場所に配置したり、スクロールしても同じ位置に配置するような表示ができるようになります。 positionプロパティの使い方と具体例 要素の絶対配置 z-in…
CSS
CSSのcalcを使いこなす
レスポンシブ対応にするときや、HSLで色を指定するときなどで、計算が煩雑になる場合があります。 それは往々にして、計算する際に単位が異なっていることがあるからです。(％とpx）など。 calcは、単位が違う値でも計算する…
CSS
CSSで影をつけるためのプロパティと具体例
CSSでテキストやボタンに影をつける方法をみていきましょう。 まずは、基本的なことから勉強しましょう。 CSSで影をつけるためのプロパティ box-shadowプロパティとtext-shadowプロパティがありあす。 そ…
CSS
CSSで背景をスタイリングする
背景は面積が大きいため、WebサイトやWebアプリに与える印象はとても大きいです。 そんな背景を整えることができるCSSをみていきましょう。 背景のスタイリングするためのCSS background-colorで背景の色…
CSS
CSSでfloatを使いこなす
floatプロパティを使うと、要素を右に表示したりすることができます。 サイドバーや細かい部品に使うことも多く、理解しておく必要があります。 CSSのfloatの使い方 floatプロパティを使うと、要素を右や左などに動…
CSS
CSSの基本セレクターを学んで使ってみよう。
HTMLとCSSを紐付けるために使うのが、セレクターです。 CSSのセレクターの知識は自由にHTMLを装飾する上で基本的な土台となるので、しっかりと学んでいきましょう。 CSSの基本セレクターの種類 要素型セレクター 要…
CSS
セレクターを組み合わせて自由に指定する方法（結合子）
CSSには、複数の組み合わせ方法があり、それらを使いこなすことで、より短く記述したり、自由に装飾することができます。 その組み合わせの際に使う記号のことを、結合子といいます。 どんな組み合わせ方法があるのか、どの結合子を…
CSS
属性セレクターの便利な指定方法（前方一致、後方一致、部分一致）
属性セレクターには、便利は指定方法があるので、みていきましょう。 属性セレクターの便利な指定方法 完全一致 → [【属性】=”【値】”]で、【属性】が【値】の要素 前方一致 → [【…
CSS
レスポンシブウェブデザインにするためのCSSの使い方
スマートフォンやタブレットやデスクトップといったPCのどの画面からでも快適に最適な表示ができることをレスポンシブウェブデザインといいます。 いろんな媒体で閲覧される近年では必須の知識なので、そのためのCSSの使い方をマス…
CSS
CSS変数を使ってみよう
CSS変数を使うことで、修正・変更対応がしやすくなり、その際のミスも劇的に減らすことができます。 管理もしやすくなるので、CSS変数の使い方を学んでいきましょう。 CSS変数ってどう便利なの？ まずは、CSS変数が使える…
CSS
CSSでリストをスタイリングする方法
リストのスタイリングが少し違うだけでかなりおしゃれに見えたり、独自性を出すことができます。 CSSでリストをスタイリングする方法をみていきましょう。 CSSでリストをスタイリングする方法 リストをスタイリングするときに特…
CSS
CSSのHSLで色指定すると統一感のある色表現が簡単にできる
HSLで色指定すると、とても簡単に統一感のある色表現を実現できます。 具体的な例とそのやり方をみていきましょう。 HSL色指定を使って統一感を出すCSSテクニック バックグラウンドの背景色は、 body { backgr…