table要素で作成したテーブルをCSSでデザインする
table要素をHTMLだけで表示するテーブルではなく、CSSでデザインしたテーブルにして見やすいテーブルや表の作成に挑戦しました。 あまりテーブルを自分のブログに使用することがな […]
CSS
CSSのbackground-positionで背景画像の位置を調整する
CSSで背景画像をbackground-imageで表示したけど「もう少し位置が上になるように調整して表示したい」もしくは「背景画像の位置を右に寄せて表示したい」など背景画像の位置 […]
CSSで背景の色や画像を透過させる方法を覚える
CSSでは背景に色や画像を指定することができますが、背景の前面に表示するテキストと背景の組み合わせによっては、どちらかが見ずらくなってしまうことがあります。 そんなときにはCSSで […]
CSS box-sizingのborder-boxとcontent-boxを理解する
CSSでbox-sizingの値をborder-boxで指定することで、親要素の幅を超えて子要素がはみ出したり、カラム落ちするという悩みを解決できました。 CSSでbox-sizi […]
CSSでカラーをグラデーションで指定できるようにする
CSSでカラーを指定するときには1色だけのカラーだけではなく、2色や3色など複数色を指定することでグラデーションカラーにすることができます。 CSSでカラーをグラデーションにするこ […]
CSSでボタンを斜めにデザインして上だけ角度をつける
某ゲームでボタンを斜めにデザインして使用しているのがとても気になり「CSSでこのボタンはどうやって作ることができるんだろう？」と興味が出たので作成してみたくなりました。以下画像の黄 […]
CSSでリンクの色をクリック状態によって変える方法
CSSでリンクの色を変えるときにはリンクのクリック状態ごとに分けた色の指定ができます。 CSSでリンクの色を変更する方法として、aタグと親要素を連結したセレクタにcolorプロパテ […]
CSS transformの使い方を理解して要素を変形する
CSSでtransformの使い方を理解したいと思いました。 transformを適用した要素がどのように変形するのか、transformで使用するプロパティやtransformの […]
CSSでフッターのメニューを横並び3列でデザインする
CSSでフッターのメニューを横並びにしてデザインしてみました。 CSSで実現したいことはメニューリストを横並びではなく、メニュー自体を横並びにするフッターのメニューです。 ulやo […]
CSS 結合子でセレクタを入れ子にする書き方
CSSのセレクタ指定には、親要素と子要素を組み合わせて繋ぐことができる結合子を付けたセレクタの指定ができます。 CSSのセレクタを指定するとき使用する、クラスセレクタやidセレクタ […]
CSSとHTMLでアコーディオンメニューの作り方を勉強する
アコーディオンメニューの作り方を覚えたくなったので勉強してみました。 labelのボタンでinputのチェックボックスと連動したり、checkedでアコーディオンメニューをクリック […]
CSSのbeforeとafterとcontentで要素の前後にコンテンツを表示する
CSSではbeforeとafterとcontentを記述して使うことで、HTMLでマークアップした要素の前後にCSSだけでコンテンツを表示することができます。 今まで真面目にCSS […]
CSSのselectionで選択したテキストの色を変更するやり方
ときどき、検索して開いたサイト先で記事を読んでるとテキストの途中で分からない単語があります。そんなときコピペして調べたりするのですが、コピーする際にテキストを選択してハイライト(強 […]
CSSをページごとに分けるために複数のHTMLページでやったこと
Webサイトを作成するデザインに必要なCSSは外部のCSSファイルとしてフォルダに配置することができますが、フォルダやファイルの構造にルールがないため、Webサイト作成の仕様や作成 […]
CSSでcounterの使い方を理解できるようにする
CSSでcounterの使い方を理解できるようにするためには、counterがどのような役割をするものなのか基本的なことから理解し始めると、記述するときに納得いくような使い方ができ […]
CSSのfixedでメニューや画像を固定するにはどうすればいいのか試す
CSSのfixedを使用してメニューや画像を固定するには、どのようにすればできるのか試しました。 今まで「CSSのfixedは要素を固定することができる」ということくらいの知識しか […]