次のタグが付いている新しい回答: css
0
まえおき
デザイン・コーディングしてて思うのが、pxで指定するとよくレイアウト崩れや、ウインドウサイズを変えたときに縦横比を保ったまま伸縮されなくて困ったりします。
困るのであれば、pxは指定しないで、別のものを使う方がよいでしょう。
pxの使用どころはどういったタイミングなのでしょうか?
固定しても困らないとき、つまり意図的に固定させたいときに使います。
使いたい場面
多くの場面で使いたい場面が考えられますが、例えば
ボタンのサイズ や 聖杯レイアウトの左右のカラム そして パディング等が考えられます。
またコレ以上でかくなっては大きすぎるみたいなときに最大値として設定することもできます。(本回答ではこのあたりは回答を省きますので max-width や min-width ...
0
ラベルに入るテキストが固定なら、幅を固定してしまえば良いのでは。
.song__info label {
display: inline-block;
text-align: right;
width: 7em;
}
これができない場合は、テーブルレイアウトですかね。注意点として、ChromeとSafariは<input> に display: table-cell を適用できないので、囲む要素を追加する必要があります。
1
index.html から見て該当の CSS はサブフォルダにあるので、
index.html
│
└ portfolio/portfolio_styl.css
参照すべき CSS ファイルの正しい URL は以下になるはずです。
https://hideto7007.github.io/portfolio/portfolio/portfolio_styl.css
リポジトリのデータと GitHub ページで公開した際の対応関係をよく確認してみてください。
https://github.com/hideto7007/portfolio
https://hideto7007.github.io/portfolio/
難しいようであれば、まずはサブフォルダを作らずにすべて同じフォルダ内に配置するか、
...
1
以下のやり方でできました。
▼HTML
<section class="testimonials">
<div class="flex-container">
<ul>
<li><img src="img/blog/1.jpg" alt=""></li>
<li><img src="img/blog/1.jpg" alt=""></li>
...
0
以下のコードでできました。
▼HTML
<div class="flex-container">
<ul>
<li><img class="testimonials-img" src="img/blog/1.jpg" alt=""></li>
<li><img class="testimonials-img" src="img/blog/1.jpg" alt=""></li&...
1
自己レスですが解決しました。
他に困っている方もいるみたいなのでここに記します。
まずtailwind.config.jsに下記を追記してコンパイルします。
module.exports = {
~~
variants: {
extend: {
backgroundColor: ['checkedLabel'],
textColor: ['checkedLabel'],
}
},
plugins: [
function({ addVariant, e }) {
addVariant('checkedLabel', ({ modifySelectors, ...
0
.section-box .box-white {
padding: 50px 10%;
background: #fff;
-webkit-box-shadow: 0px 8px 30px rgba(0, 0, 0, 0.08);
box-shadow: 0px 8px 30px rgba(0, 0, 0, 0.08);
}
にすることで高さをだいたい70%に縮めることができました。
1
menewさんにご返答いただき解消できました。
どうやら下線のように思えていたものは、背景色がはみ出しているようでした。
以下のように修正すれば解決できました。
a:hover {
background-color: transparent;
}
▼application.html.erb
/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin'...
0
<head> </head> の中に下記のコードが無いのが原因でした。
<link href="styles/style.css" rel="stylesheet" type="text/css">
3
まず、線を描くために linear-gradient 関数を用いて、黒色 (線の色) のみで構成されるグラデーションを作成します。基本的にはわかりやすさのため、線 1 本に 1 つの linear-gradient 関数を使います。
body {
display: flex;
gap: 10px;
}
div {
width: 80px;
height: 80px;
}
.grid1 {
background-image:
linear-gradient(to bottom, #000, #000),
linear-gradient(to right, #000, #000);
}
.grid2 {
background-image:
...
上位 50 件の最近の回答が含まれています
関連するタグ
css × 555html × 291
javascript × 163
jquery × 74
html5 × 57
php × 19
ruby-on-rails × 17
bootstrap × 15
monaca × 14
sass × 14
twitter-bootstrap × 13
wordpress × 12
safari × 9
ios × 8
internet-explorer × 8
onsen-ui × 7
iphone × 7
google-chrome × 7
font × 7
android × 5
ruby × 5
python × 4
visual-studio × 4
vue.js × 4
vscode × 4