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:
...
2
まえおき
デザイン・コーディングしてて思うのが、pxで指定するとよくレイアウト崩れや、ウインドウサイズを変えたときに縦横比を保ったまま伸縮されなくて困ったりします。
困るのであれば、pxは指定しないで、別のものを使う方がよいでしょう。
pxの使用どころはどういったタイミングなのでしょうか?
固定しても困らないとき、つまり意図的に固定させたいときに使います。
使いたい場面
多くの場面で使いたい場面が考えられますが、例えば
ボタンのサイズ や 聖杯レイアウトの左右のカラム幅 そして パディング等が考えられます。
またコレ以上でかくなっては大きすぎるみたいなときに最大値として設定することもできます。(本回答ではこのあたりは回答を省きますので max-width や min-width ...
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>
...
1
自己レスですが解決しました。
他に困っている方もいるみたいなのでここに記します。
まずtailwind.config.jsに下記を追記してコンパイルします。
module.exports = {
~~
variants: {
extend: {
backgroundColor: ['checkedLabel'],
textColor: ['checkedLabel'],
}
},
plugins: [
function({ addVariant, e }) {
addVariant('checkedLabel', ({ modifySelectors, ...
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'...
上位に投票された、最小文字数のコミュニティ wiki 以外の回答のみが対象となります
関連するタグ
css × 556html × 292
javascript × 163
jquery × 74
html5 × 57
php × 19
ruby-on-rails × 17
bootstrap × 15
sass × 15
monaca × 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