HTML/CSS– category –

本記事では、SCSSでfor文・while文・each文の使い方について解説しています。実際にサンプルコードを用意しているので、どのような場面で使用するのかが少しは理解できると思います。 for文の使い方 for文の基本的な使い方は以下のとおりです。 @for $i fr...

本記事では、SCSSでif文(else if,else)の使い方・使いどころについて解説しています。 if文の使いどころ JavaScriptなどのプログラミング言語では非常に使われるif文が、なんと！SCSSでも使用することが出来ます！どんなことが出来るんだろう！とワクワク...

本記事では、SCSSの@mixin/@includeの使い方と使いどころについて解説しています。 @mixin/@includeの使いどころ @mixin/@includeは、同じプロパティを使用するHTMLタグ(要素)が複数存在する時に使います。 例えば、使用するプロパティが同じボタンを4つ作...

本記事では、SCSSで変数を使う方法・どのような場面で変数を使うべきかについて解説しています。 変数の使い方 SCSSで変数を使う書き方は以下の通りです。 // 変数の宣言 $variable：value; 構文解説 $variable：値を代入する変数名を指定(何の値が代入さ...

本記事では、JavaScript機能がOFFになっている環境のみ特定の文字を表示させる方法について解説しています。今はほとんどのデバイスがデフォルトでJavaScript機能がONになっているので、意図的にOFFにしているユーザーは少ないですが、必ずJavaScriptの処...

本記事では、Bootstrapの使い方が学べるおすすめの参考書を紹介しています。 気になった参考書があれば、購入する前にAmazonの無料試し読みで内容を確認することをおすすめします。 表紙がイラストをたくさん使っているから、内容も初心者向けだろうと思い...

本記事では、CSSでテキストを中央寄せする方法について解説しています。 text-align:center CSSでテキストを中央寄せする方法は、とても簡単でブロック要素に対してtext-align:centerを指定します。 .block-elem{ text-align:center; } ブロック要素が一番...

本記事では、ウェブサイトで公開している画像を保存させない方法について解説しています。CSSだけで実装することが出来るので、ウェブ初学者の方でも簡単です！ ユーザーが画像を保存する時 皆さんがウェブサイトを閲覧している時に、欲しい画像があったら...

本記事では、display:flexで横並びになっている一番最後のアイテムだけを右寄せする方法について解説しています。 marginを使う display:flexで横並びにしたアイテムの一つだけを右寄せにする。一見難しそうに見えますが実はとても簡単で、皆さんが頻繁に...

本記事では、display:flexで横並びになっている一番先頭のアイテムだけを左寄せする方法について解説しています。 marginを使う display:flexは、flex-wrapやflex-directionなどの特別なプロパティを持っているため、先頭のみ左寄せするプロパティがあると...