コーディング

スポンサーリンク
コーディング

【CSS2行で解決】ページ内リンクで位置がズレる・ヘッダーとカブる【HTML】

ページ内リンクのやり方(idをつける) 例えば、こんな感じでヘッダーにidでページ内を付けて、「ヘッダーのリンクを押すと下のコンテンツに移動する」というページがあったとします。 下のコンテンツのHTML リンクを飛...
コーディング

【CSS】リンクタグの中に擬似要素でアイコンだけを表示させる【HTML】

fontawesomeなどで、タグを使って表示させることもできますが、今回は擬似要素でCSSからアイコンを表示させたいと思います。 擬似要素が入る位置 まず擬似要素が入る位置はこちらです。 タグの外ではなく...
コーディング

【HTML】ソースコードにファビコンがない?【WEB制作】

ファビコンはルートディレクトリに画像を置くだけで表示される ホームページのリニューアルのご依頼で、サイトのロゴやファビコンは元のサイトからそのまま持って来ようとしました。 普通はhead内に こんな感じで書かかれていることがほ...
コーディング

【CSS】テーブル(表)から文字がはみ出す・折り返されない時の対処法【word-break: break-all】

テーブル(表)から文字がはみ出す テーブルで表を作った時にこんなことに・・・ メールアドレスが長いことでテーブルもバランスがおかしくなっています。 widthで幅を付けても動きません。 HTMLはこん...
コーディング

【CSS】よく使われるテキスト用の薄い黒・カラーコード【真っ黒はNG】

ホームページやブログで、真っ白(#fff)の背景に真っ黒(#000)な文字は基本的にはあまり良いとされていません。 いつも文字色を選ぶ時に「bodyの文字色どの薄さの黒にしよう・・・」と迷うので、よく使われている&よく使う【薄い黒】を...
コーディング

【CSS】flexboxの高さを揃える方法【これで一発です】

flexboxの高さが揃わない? ボックスの幅を統一するためにwidthを指定した場合、テキストの量によって高さに違いが出ますよね。 このボックス内のテキストの上下を真ん中にするために、親要素であるulにalign-item...
コーディング

【CSS】文字の下にだけ装飾をつける

文字の下にだけ装飾をつける方法 divタグやh2タグ、h3タグの下にボーダーなどで装飾したい場合、そのまま普通にborder-bottomなどで装飾をすると幅いっぱいまで広がってしまいます↓ 方法1:display:in...
コーディング

【CSS】交互にor倍数ごとにスタイルを適用させる【:nth-of-type()】

:nth-of-type()の使い方 このように並べたボックスに、交互に違う色を適用させていきます。 交互にスタイルを適用させる(evenまたはodd) 追加するCSS :nth-of-type(even)は奇数にだ...
コーディング

【CSS】金色の文字のサンプル【グラデーション】

金色のゴールドっぽい質感はCSSのグラデーションで簡単に作ることができます。 キラキラなゴージャス感のある見出しなどにぴったりです。 違ったパターンのサンプルを3つ用意してみました。 金色の文字のサンプル See the P...
コーディング

【CSS】box-shadowのよく使うサンプル

box-shadowはとてもよく使うCSSですが、「あれ?どうだったけ?」とよく迷うことがあるのでよく使うものをまとめてみました。 box-shadowの使い方 box-shadow:左右の向き,上下の向き,ぼかし,広がり,色,内側 ...
タイトルとURLをコピーしました