2022年5月– date –
-
【スキルハックス】Bootstrapでボタンを作る!色についても学ぶ!
今回はBootstrapで使用頻度が高いと言われているボタンを学んでいきます。また色についても学んでいきます。 CSSの3系でCSSからButtonsをクリック。 まずはリンクを作って、それからclass="btn btn-default"を書いて、ボタンを作ります。 まずはリンクを作... -
【スキルハックス】Bootstrapを使って便利さを体験する
今回は実際にBootstrapを使ってみて、どれぐらい便利なのかみていきましょう。 まずは画像をBootstrapのフォルダに入れるために、CSSフォルダから『なばなの里』の画像をDuplicate(複製)します。 Duplicateするとnabana.1.jpgというファイルが出来ます。... -
【スキルハックス】Bootstrapってなに?使うまでの準備をする!
今回はBootstrapとは?についてです。またBootstrapを使うための準備を説明していきます。BootstrapはCSSのフレームワークになります。 Bootstrapはよく使うCSSを、決まったclassを使う事で簡単にデザインをすることができるようになります(画像を丸くし... -
【スキルハックス】CSSで画像に丸みをつけたり、文字に影を付ける
今回は画像に丸みを付けたり、文字に影を付けて立体感を出したりします。 まずは画像を表示させます。 サイズが大きすぎると分かりにくいので幅を150pxにします。 border-radiusは画像の丸くすることができます。50%にすると丸くなります。 border-radius... -
【スキルハックス】CSSの余白について学ぶ!
今回はCSSの余白について学んでいきます。余白はコンテンツとコンテンツの間の事です。 まず、前回からHTMLでpタグの2行だけにします。 CSSでborderはコンテンツに境界線を引くためのものです。solidは一本戦を表しています。 プレビューで見ると、上記の... -
【スキルハックス】CSSのリンク関連、ブロック要素をインラインっぽくする!
今回はリンクの下線を消したり、ブロック要素をインラインっぽく見せる方法を学んでいきます。 まずHTMLでリンクを作ります。ちなみにURLはこのブログです。 CSSでtext-decorationをnoneにすると、リンクの下線を消すことができます。 次にpタグで同じ内容... -
【スキルハックス】CSSで背景に画像を入れる
今回は画像を背景に適用する方法を学んでいきます。 まずはHTMLでbodyタグにdivタグを作り、その中にpタグを作ります。するとpタグに囲まれた文字だけが表示されます。 次にCSSで上記のように書き、画像は前回使った『なばなの里』の画像を使用します。 文... -
【スキルハックス】CSSで画像のプロパティを学ぶ!
今回はCSSで画像のプロパティを学んでいきます。まず『なばなの里』の画像を用意しました。何でもいいので画像を用意します。(ちなみに上部は明るい色の方が良いです) 前回までのbodyタグの中を消します。 用意した画像を取り込みます。 CSSのフォルダの... -
【スキルハックス】CSSのプロパティを学ぶ!テキスト編
今回はCSSのテキスト関係のプロパティを学んでいきます。プロパティは『どこの{どんなパラメーターを:どうする;}』の『どんなパラメーターを』の部分になります。 まずHTMLのbodyタグにpタグを上記のように書きます。 CSSはpタグの目印として付けたid... -
【スキルハックス】CSSセレクタの組み合わせを学ぶ
今回は前回のCSSセレクタの指定法にプラスして、セレクタの組み合わせを学んでいきます。 前回からのCSSを全て消して、文字を黒くします。 h1タグを赤くするときは、上記のように書きます。 h1タグと一緒にpタグを赤くするときは、セレクタを『h1,p』(h1...
12