CSSで幅を変えたり、円の大きさを変えたい。
当サイトのリニューアル作業に時間をあてるため、掲示板の投稿は当分停止させていただきます。
馬場さま、度々すみません。
先ほどの2つのタイムラインは今の私の知識ではどうすることもできなそうなので、別のものを探してきました。
https://codepen.io/bsngr/pen/Ifvbi
現在、こちらはそのまま貼り付けてももともとのテンプレートが崩れることなく設置できています。
ただ、中心線に対して左右から吹き出しが中心寄りに設置されていることで、吹き出しと中心線が重なり、中心線に設置されている円に文字も重なってしまいます。
また、中心線上に設置されているいくつかの円の内、青い円は縦長の楕円になってしまいます。
これは吹き出しの横幅を変えたり、円の大きさを変えれば解決できるのではないかと思ったのですが、CSS上で幾つか思い当たる数字を変更してみても吹き出しの横幅や円の大きさが変わりませんでした。
このCSS上に吹き出しの横幅や円の大きさを変えられる設定を教えて頂きたいです。
よろしくお願いいたします。
【CSS】
.timeline {
list-style: none;
padding: 20px 0 20px;
position: relative;
}
.timeline:before {
top: 0;
bottom: 0;
position: absolute;
content: " ";
width: 3px;
background-color: #eeeeee;
left: 50%;
margin-left: -1.5px;
}
.timeline > li {
margin-bottom: 20px;
position: relative;
}
.timeline > li:before,
.timeline > li:after {
content: " ";
display: table;
}
.timeline > li:after {
clear: both;
}
.timeline > li:before,
.timeline > li:after {
content: " ";
display: table;
}
.timeline > li:after {
clear: both;
}
.timeline > li > .timeline-panel {
width: 46%;
float: left;
border: 1px solid #d4d4d4;
border-radius: 2px;
padding: 20px;
position: relative;
-webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
}
.timeline > li > .timeline-panel:before {
position: absolute;
top: 26px;
right: -15px;
display: inline-block;
border-top: 15px solid transparent;
border-left: 15px solid #ccc;
border-right: 0 solid #ccc;
border-bottom: 15px solid transparent;
content: " ";
}
.timeline > li > .timeline-panel:after {
position: absolute;
top: 27px;
right: -14px;
display: inline-block;
border-top: 14px solid transparent;
border-left: 14px solid #fff;
border-right: 0 solid #fff;
border-bottom: 14px solid transparent;
content: " ";
}
.timeline > li > .timeline-badge {
color: #fff;
width: 50px;
height: 50px;
line-height: 50px;
font-size: 1.4em;
text-align: center;
position: absolute;
top: 16px;
left: 50%;
margin-left: -25px;
background-color: #999999;
z-index: 100;
border-top-right-radius: 50%;
border-top-left-radius: 50%;
border-bottom-right-radius: 50%;
border-bottom-left-radius: 50%;
}
.timeline > li.timeline-inverted > .timeline-panel {
float: right;
}
.timeline > li.timeline-inverted > .timeline-panel:before {
border-left-width: 0;
border-right-width: 15px;
left: -15px;
right: auto;
}
.timeline > li.timeline-inverted > .timeline-panel:after {
border-left-width: 0;
border-right-width: 14px;
left: -14px;
right: auto;
}
.timeline-badge.primary {
background-color: #2e6da4 !important;
}
.timeline-badge.success {
background-color: #3f903f !important;
}
.timeline-badge.warning {
background-color: #f0ad4e !important;
}
.timeline-badge.danger {
background-color: #d9534f !important;
}
.timeline-badge.info {
background-color: #5bc0de !important;
}
.timeline-title {
margin-top: 0;
color: inherit;
}
.timeline-body > p,
.timeline-body > ul {
margin-bottom: 0;
}
.timeline-body > p + p {
margin-top: 5px;
}
先ほどの2つのタイムラインは今の私の知識ではどうすることもできなそうなので、別のものを探してきました。
https://codepen.io/bsngr/pen/Ifvbi
現在、こちらはそのまま貼り付けてももともとのテンプレートが崩れることなく設置できています。
ただ、中心線に対して左右から吹き出しが中心寄りに設置されていることで、吹き出しと中心線が重なり、中心線に設置されている円に文字も重なってしまいます。
また、中心線上に設置されているいくつかの円の内、青い円は縦長の楕円になってしまいます。
これは吹き出しの横幅を変えたり、円の大きさを変えれば解決できるのではないかと思ったのですが、CSS上で幾つか思い当たる数字を変更してみても吹き出しの横幅や円の大きさが変わりませんでした。
このCSS上に吹き出しの横幅や円の大きさを変えられる設定を教えて頂きたいです。
よろしくお願いいたします。
【CSS】
.timeline {
list-style: none;
padding: 20px 0 20px;
position: relative;
}
.timeline:before {
top: 0;
bottom: 0;
position: absolute;
content: " ";
width: 3px;
background-color: #eeeeee;
left: 50%;
margin-left: -1.5px;
}
.timeline > li {
margin-bottom: 20px;
position: relative;
}
.timeline > li:before,
.timeline > li:after {
content: " ";
display: table;
}
.timeline > li:after {
clear: both;
}
.timeline > li:before,
.timeline > li:after {
content: " ";
display: table;
}
.timeline > li:after {
clear: both;
}
.timeline > li > .timeline-panel {
width: 46%;
float: left;
border: 1px solid #d4d4d4;
border-radius: 2px;
padding: 20px;
position: relative;
-webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
}
.timeline > li > .timeline-panel:before {
position: absolute;
top: 26px;
right: -15px;
display: inline-block;
border-top: 15px solid transparent;
border-left: 15px solid #ccc;
border-right: 0 solid #ccc;
border-bottom: 15px solid transparent;
content: " ";
}
.timeline > li > .timeline-panel:after {
position: absolute;
top: 27px;
right: -14px;
display: inline-block;
border-top: 14px solid transparent;
border-left: 14px solid #fff;
border-right: 0 solid #fff;
border-bottom: 14px solid transparent;
content: " ";
}
.timeline > li > .timeline-badge {
color: #fff;
width: 50px;
height: 50px;
line-height: 50px;
font-size: 1.4em;
text-align: center;
position: absolute;
top: 16px;
left: 50%;
margin-left: -25px;
background-color: #999999;
z-index: 100;
border-top-right-radius: 50%;
border-top-left-radius: 50%;
border-bottom-right-radius: 50%;
border-bottom-left-radius: 50%;
}
.timeline > li.timeline-inverted > .timeline-panel {
float: right;
}
.timeline > li.timeline-inverted > .timeline-panel:before {
border-left-width: 0;
border-right-width: 15px;
left: -15px;
right: auto;
}
.timeline > li.timeline-inverted > .timeline-panel:after {
border-left-width: 0;
border-right-width: 14px;
left: -14px;
right: auto;
}
.timeline-badge.primary {
background-color: #2e6da4 !important;
}
.timeline-badge.success {
background-color: #3f903f !important;
}
.timeline-badge.warning {
background-color: #f0ad4e !important;
}
.timeline-badge.danger {
background-color: #d9534f !important;
}
.timeline-badge.info {
background-color: #5bc0de !important;
}
.timeline-title {
margin-top: 0;
color: inherit;
}
.timeline-body > p,
.timeline-body > ul {
margin-bottom: 0;
}
.timeline-body > p + p {
margin-top: 5px;
}
初心者 さん
10月14日 10時43分
馬場さま、何度もすみません。
先ほど、CSSで吹き出しの幅や円の大きさを変えたいという質問をさせて頂いていたのですが、その後、CSSをいろいろいじってみた結果、吹き出しの幅を変えること、正円の大きさや位置を変えることはできました。
ただ、楕円を正円にすることがどうしてもできませんでした。
これを修正するのがどの部分なのかを教えて頂きたいのですが、可能でしょうか？
先ほど、CSSで吹き出しの幅や円の大きさを変えたいという質問をさせて頂いていたのですが、その後、CSSをいろいろいじってみた結果、吹き出しの幅を変えること、正円の大きさや位置を変えることはできました。
ただ、楕円を正円にすることがどうしてもできませんでした。
これを修正するのがどの部分なのかを教えて頂きたいのですが、可能でしょうか？
初心者 さん
10月14日 11時51分
初心者さん、こんにちは。
楕円の部分の関してですが、テンプレートのCSSに以下の指定があるためです。
上下の余白が20px余分にあるため、20px×2の40px分、縦に長くなっています。
■解決方法に至るまでの考え方
単体でも動いていることを確認された場合、原因は現在のテンプレートのCSSであることはほぼ確定できます。
そのため、まずはそのCSSが調査対象となります。
今回楕円になってしまっている部分は、HTMLを見ると
timeline-badge
info
というクラスが付与されていますよね。
ですので、対象のCSSに、このクラスが定義されていないか探します。
こういう順番で考えれば、比較的簡単に問題箇所が見つかります。
■解決に便利なツール
ツールを使う手もあります。
おそらくWindowsのChromeを使っていらっしゃると思いますが、不具合が発生している箇所で右クリック→検証から、その要素に適用されているCSSが簡単に分ります。
例えば楕円の部分を検証すると、infoクラスにてpaddingが適用されていることがブラウザから確認できます。
さらには、そのpaddingにマウスオーバーするとチェックボックスが出てくるので、チェックを外すことで一時的に適用されているCSSを無効にすることもできます。
※「Chrome デベロッパーツール」で検索すれば、使い方が出てきます。
実は本掲示板は、いったん閉めようと思っていた所です。
ここ数日連投されていますが、人に質問して解決する癖がつくと、ご自身で考える力を摘んでしまうと考えます。
問題解決の考え方やツールについてご案内しましたので、あとは是非ご自身で努力してみてください。悩む時間も無駄なものではなく、後に活きますので。
楕円の部分の関してですが、テンプレートのCSSに以下の指定があるためです。
.info {
float: right;
padding: 20px 0;
}
float: right;
padding: 20px 0;
}
上下の余白が20px余分にあるため、20px×2の40px分、縦に長くなっています。
■解決方法に至るまでの考え方
単体でも動いていることを確認された場合、原因は現在のテンプレートのCSSであることはほぼ確定できます。
そのため、まずはそのCSSが調査対象となります。
今回楕円になってしまっている部分は、HTMLを見ると
timeline-badge
info
というクラスが付与されていますよね。
ですので、対象のCSSに、このクラスが定義されていないか探します。
こういう順番で考えれば、比較的簡単に問題箇所が見つかります。
■解決に便利なツール
ツールを使う手もあります。
おそらくWindowsのChromeを使っていらっしゃると思いますが、不具合が発生している箇所で右クリック→検証から、その要素に適用されているCSSが簡単に分ります。
例えば楕円の部分を検証すると、infoクラスにてpaddingが適用されていることがブラウザから確認できます。
さらには、そのpaddingにマウスオーバーするとチェックボックスが出てくるので、チェックを外すことで一時的に適用されているCSSを無効にすることもできます。
※「Chrome デベロッパーツール」で検索すれば、使い方が出てきます。
実は本掲示板は、いったん閉めようと思っていた所です。
ここ数日連投されていますが、人に質問して解決する癖がつくと、ご自身で考える力を摘んでしまうと考えます。
問題解決の考え方やツールについてご案内しましたので、あとは是非ご自身で努力してみてください。悩む時間も無駄なものではなく、後に活きますので。
馬場誠 さん
10月14日 14時44分
馬場さま
お忙しい中、ありがとうございました。
何度も質問してしまいすみませんでした。
お忙しい中、ありがとうございました。
何度も質問してしまいすみませんでした。
初心者 さん
10月14日 17時17分
