コーディングのヒントになるかもな質問集
コーディングに関して質問があったことを随時投稿していくので、息抜きにのぞいてみてくださいね＾＾
この記事は質問が増える度に随時更新していきます
[目次]
リンクがクリックできない
リンクがクリックできない場合、別の要素が上に被さっている可能性があります。
特に、擬似要素を使って背景や装飾をしている場合は、その重なり順に注意してください。
この原因の場合、リンク（aタグ）の重なり順を上にすれば解決するので、擬似要素のz-indexを下げる、もしくはaのz-indexを上げてください。
z-indexのデフォルトはautoです。
z-index: 1;を指定すると、何も指定していない要素よりも上に重なります。
逆にz-index: -1;を指定すると、何も指定していない要素よりも下にいきます。
円が正円にならない
正円の作り方は、width・heightに同数値を付与し、border-radiusを50%;にします。
例えば次のように記述します。
.en {
width: 100px;
height: 100px;
border-radius: 50%;
}このようにして正円にならない原因で考えられるのは、①width・heightを「％」で指定していること。
もしくは、②親要素にかかっているdisplay: flex;が影響して、widthの数値が効いていないこと等です。
①heightの「%」は親要素の高さに対しての比率です。
width: 30%はheight: 30%と同数にはなりません（偶然なる可能性はあります）。
なので「％」で正円を作ることは難しいです。
この場合、単位はwidth・heightどちらにも「px」を使うか、「vw」・「vh」をどちらにも入れることで同値にしてみてください。
例：width: 30vw; height: 30vw; border-radius: 50%;
②display:flexが入っていると、子要素のwidth指定が無視されることがあります。
その場合は、flex-wrapを入れたり、該当の記述を確認して、修正する必要があります。
代替案は、擬似要素で正円を作成し、position：absoluteで配置するという方法です。
text-decoration: underlineで指定したアンダーラインがSafariやiPhoneのChromeで出てこない
今回の質問では以下のようなスタイルがかかっていました。
h3{
text-decoration: underline 10px;
text-decoration-color: #F4E860;
}
-webkitで指定すれば通常のunderlineは出てきます。
h3 {
text-decoration: underline 10px;
text-decoration-color: #F4E860;
-webkit-text-decoration: underline #F4E860;
}ただ、こうすると、アンダーラインの太さ10pxは適用しません。
まだ非対応のようです。
なので、このようなデザインの場合は、backgroundを使用する方がベストかなと思います。
linear-gradientを使用します。
.gradient {
background: linear-gradient(transparent 70%, #F4E860 70%);
width: fit-content;
margin-bottom: 20px;
font-weight: bold;
padding-bottom: 6px;
}linear-gradientを使うことで、ラインマーカーのようなスタイルを作ることができます。
数値を変更して太さを調整してみてください。
WordPressテーマ利用サイトでページトップへ戻るボタンを設置したい
ページトップへ戻るボタンを設置し、常に右下に表示させたいという質問です。
フッターなど、全ページ共通で表示される箇所に、ボタン用のテキストもしくは画像を設置、リンクを貼り、CSSで常に右下に表示させます。
もしも使用テーマが、全ページ共通で表示できるような項目を入れるところがない場合、テーマファイル（PHP）に直接項目を入力することも検討してください。
position: fixedで常に位置を固定しますので、要素はどこにあっても問題ないですが、大体フッターもしくはその周辺に項目を入れることが多いでしょうか。
CSSは
.to_top {
position: fixed;
bottom: 20px;
right: 20px;
}こんな感じです。
もしも、要素の下側に入ってしまうことがあれば、z-index（重なり順の指定）を追加してください。
要素の位置調整（高さの真ん中にしたい）
ボタンに表示させる「＞」の高さ位置を中央にしたい。
くわしく見る
スタイルはこんな感じです。↓
（本当は＞は画像でしたが今回は文字に直しています。）
.more_link {
font-size: 16px;
line-height: 1;
border: 2px solid #2c2c2c;
background-color: #fff;
width: 300px;
padding: 17px 0;
text-align: center;
border-radius: 100px;
position: relative;
}
.more_link::after {
content: "＞";
font-size: 16px;
height: 16px;
display: block;
position: absolute;
right: 10px;
margin: auto;
}more_link::afterで「＞」を表示しています。
position: absolute;を使っているので、高さの中央にしたい場合は、topとbottomを０にし、margin:autoを入れればOKですね！
.more_link::after {
content: "＞";
font-size: 16px;
display: block;
position: absolute;
right: 10px;
margin: auto;
top: 0;
bottom: 0;
}くわしく見る
postion: absolute;を使って左右の中央にしたい場合はleft・rightを0にし、marginをautoにすればOKです。
タブの実装はできたが別ページからリンクを貼る時の調整について
タブ・別ページからのリンクについてこちらの記事にまとめました。
↓
フォーム部分だけWPを利用したい
→近日中に記事もしくはコミュ内動画にします。
→書きました。
こちらはコミュ内動画での解説もします。
メインビジュアルの下を斜めにしたい
メインビジュアルの画像を最初から斜めに書き出す方法と、上から背景色と同じ色の三角形を被せる方法が考えられます。
他にもありそうですが、今回は三角形を上から載せる方法を紹介します。
同セクションのafterもしくは次セクションのbeforeで三角形を作成しMVの上に被せます。
↓は次セクションのbeforeを使用しています。
.next-sec {
position: relative;
}
.next-sec::before {
content: "";
display: block;
width: 100vw;
height: 100px;
clip-path: polygon(0 0, 0% 100%, 100% 100%);
margin: 0 calc(50% - 50vw);
position: absolute;
top: -100px;
left: 0;
z-index: 1; /* MVより上に来る値 */
background: white; /* 次セクションと同じ色 */
}三角形の高さは、heightを調整してください。
また、heightを変更した場合、topの数値はheight分マイナスするように書き換えてください。
この記事が役に立ったと思ったら
TAPしてね♡↓
コメントは承認後に表示されます。