コーディング

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

【CSS】background-potisionの位置の調整の仕方【使い方】

【background-position: 位置;】 位置の指定の仕方はこんな感じです。 background-position: 水平位置(左から) 垂直位置(上から); 位置の指定方法 %で指定 background-po...
コーディング

【CSS】背景画像で高さを保ってレスポンシブにして画像を表示させたい

HTMLからじゃなくCSSで画像を表示させたい CSSで画像を表示させる場合は基本的にbackgroundで背景画像として表示させることが一般的ですよね。 アイコンだと擬似要素で背景画像として表示させるのが便利なのですが、普通はHT...
コーディング

【CSS】擬似要素で画像・背景画像を入れる【表示されない場合】

擬似要素で画像を入れる 先日、fontawesomeのアイコンがSafariで表示されない不具合があり、苦戦しておりました・・・。 調べたところ不具合を解消する方法はあるようなのですが、情報が少なかったのと、色々試して時間を使うより...
コーディング

【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...
タイトルとURLをコピーしました