2022年5月– date –

今回はBootstrapで使用頻度が高いと言われているボタンを学んでいきます。また色についても学んでいきます。 CSSの3系でCSSからButtonsをクリック。 まずはリンクを作って、それからclass="btn btn-default"を書いて、ボタンを作ります。 まずはリンクを作...

今回は実際にBootstrapを使ってみて、どれぐらい便利なのかみていきましょう。 まずは画像をBootstrapのフォルダに入れるために、CSSフォルダから『なばなの里』の画像をDuplicate（複製）します。 Duplicateするとnabana.1.jpgというファイルが出来ます。...

今回はBootstrapとは？についてです。またBootstrapを使うための準備を説明していきます。BootstrapはCSSのフレームワークになります。 Bootstrapはよく使うCSSを、決まったclassを使う事で簡単にデザインをすることができるようになります（画像を丸くし...

今回は画像に丸みを付けたり、文字に影を付けて立体感を出したりします。 まずは画像を表示させます。 サイズが大きすぎると分かりにくいので幅を150pxにします。 border-radiusは画像の丸くすることができます。50％にすると丸くなります。 border-radius...

今回はCSSの余白について学んでいきます。余白はコンテンツとコンテンツの間の事です。 まず、前回からHTMLでpタグの2行だけにします。 CSSでborderはコンテンツに境界線を引くためのものです。solidは一本戦を表しています。 プレビューで見ると、上記の...

今回はリンクの下線を消したり、ブロック要素をインラインっぽく見せる方法を学んでいきます。 まずHTMLでリンクを作ります。ちなみにURLはこのブログです。 CSSでtext-decorationをnoneにすると、リンクの下線を消すことができます。 次にpタグで同じ内容...

今回は画像を背景に適用する方法を学んでいきます。 まずはHTMLでbodyタグにdivタグを作り、その中にpタグを作ります。するとpタグに囲まれた文字だけが表示されます。 次にCSSで上記のように書き、画像は前回使った『なばなの里』の画像を使用します。 文...

今回はCSSで画像のプロパティを学んでいきます。まず『なばなの里』の画像を用意しました。何でもいいので画像を用意します。（ちなみに上部は明るい色の方が良いです） 前回までのbodyタグの中を消します。 用意した画像を取り込みます。 CSSのフォルダの...

今回はCSSのテキスト関係のプロパティを学んでいきます。プロパティは『どこの｛どんなパラメーターを：どうする；｝』の『どんなパラメーターを』の部分になります。 まずHTMLのbodyタグにpタグを上記のように書きます。 CSSはpタグの目印として付けたid...

今回は前回のCSSセレクタの指定法にプラスして、セレクタの組み合わせを学んでいきます。 前回からのCSSを全て消して、文字を黒くします。 h1タグを赤くするときは、上記のように書きます。 h1タグと一緒にpタグを赤くするときは、セレクタを『h1,p』（h1...