レスポンシブフォントサイズ）解像度の異なるスマホで同じ見た目にする
導入 （レスポンシブを含む）スマホサイトのフォントサイズの指定は どのスマホで見てもフォントサイズが同じ 画面の横幅の○%と指定する と二種類に分かれています。どう違うかというと フォントサイズ...
1
1
Comment0
17 search resultsShowing 1~17 results
Stocked
You need to log-in
Vue）簡単なローンシミュレーター
完成版 Vue勉強用 See the Pen LYVNmJq by sphenisc (@sphenisc) on CodePen. 年齢と年収を入力すると借入可能額を計算するだけの簡単なコー...
0
1
Comment0
画像の代わりにaltのテキストを表示する
スマホの時だけ画像非表示にしてくださいってたまに言われます 本当はスマホ用の画像を用意した方がいいのですが時間や予算がまったくなかったりするときのための方法 元の状態 See the Pen ...
2
1
Comment0
JSなし）サムネにホバーするとメイン画像が切り替わるやつ
サムネにホバーするとメイン部分が切り替わるあれ 名前なんて言うんでしょうね。 See the Pen GRJZmVy by sphenisc (@sphenisc) on CodePen. サ...
1
0
Comment0
グーグルマップの左上の枠を”簡単に”消す
基本の状態 See the Pen RwPaKbL by sphenisc (@sphenisc) on CodePen. Webサイトでグーグルマップを表示すると左上にその店舗や建物の情報と...
3
3
Comment0
透明感のあるテーブル
thとtdの間に隙間を開けて背景透過 See the Pen ZEGWGBm by sphenisc (@sphenisc) on CodePen. 涼しげなサイトに良さそうですね。 bord...
0
0
Comment0
汎用）診療時間テーブル
忙しい時にコピペするためのやつ See the Pen mdJPyXd by sphenisc (@sphenisc) on CodePen. 横幅375px(iPhone6~8)くらいまでな...
0
0
Comment0
かんたんなレスポンシブルテーブル
col使ってますか <table>タグの中にちゃんと<col>を入れていますか？ 自分は<col>の存在を知るまで数年かかりました。 使ってみたら本当に便利だ...
2
2
Comment0
テーブルを”楽に”角丸にする
基本的なやり方 See the Pen WNvrzav by sphenisc (@sphenisc) on CodePen. ふつうのテーブルに border-radius: 8px; bo...
0
2
Comment0
ホバーすると押下できるボタン
前置き 昔 https://codepen.io/parcon/pen/obEReY/ これの一番右のボタンを作ってくれと言われたのですがテキストをHTMLではなく:beforeのcontent...
1
2
Comment0
リンク画像にマウスホバーすると画像がふわっと(重要)変化する方法
これからすること ユーザビリティの観点から、リンクできる画像やボタンなどのパーツには ”リンクできそう” な見た目や演出が要求されるのですが顧客受けが良いのか 画像にマウスのカーソルを乗せるとふ...
3
4
Comment1
●リスト の"●"を疑似要素にしてカスタマイズする
問題点 こんなリストがあったとします。 リスト1 リスト2 リスト3 みなさんは●の部分の色を変えたいと思った時どうしているでしょうか。 <li><span>●</...
0
1
Comment0
行数が決まっていないテキストを ”上下中央揃え” にする
いきなり完成版 See the Pen oNXbwra by sphenisc (@sphenisc) on CodePen. pタグのテキストが1行になっても3行になってもちゃんと上下左右中...
1
1
Comment0
強力なtext-shadow！ ぼやけていない、くっきりしたテキストシャドウ
text-shadow使ってますか 文字に影をつけるためのCSSプロパティ。 以前は使ってみても影が付いてるのかどうかはっきりしないくらい効果が薄かったので編み出した方法なのですが久しぶりに使っ...
1
2
Comment0
innerからの脱獄
innerとはなんぞ Webサイトでよく使われるinnerは横幅が1920とか4kとかある大型ディスプレイでサイトを開いてもページが横にびろーんと伸びすぎないようにするためのものです。 名前はw...
1
1
Comment0
innerからの脱獄2
画面端まで中身を伸ばす 前回innerより横幅の広い要素を中央揃えにする方法を紹介しました。 今回は幅が決まっていない場合はどうすればいいのかを紹介します。 元の状態 See the Pen ...
0
1
Comment0
横3列のリストをキレイに並べる小技
問題 Webサイトを作っているとこんな感じの横3列のリストを作りたい状況が結構あります。 しかし、フレックスボックスで justify-content:space-between; を使ってに並...
0
0
Comment0
17 search resultsShowing 1~17 results
Qiita is a knowledge sharing service for engineers.
- You can follow users and tags
- You can stock useful information
- You can make edit suggestions for articles