100/7%ではなく100%/7。(100/7)%ではなく(100%/7)

CSS

当初

　状態:- 　閲覧数:3,340 　投稿日:2018-04-15 　更新日:2018-04-15

分数計算した結果を記述


14.28571%
width: calc(14.28571% - (15px + 15px / 7));

割り切れないので修正


期待した通り動作しない
width: calc(100/7% - (15px + 15px / 7));

期待した通り動作しない
width: calc( (100/7%) - (15px + 15px / 7));

期待した通り動作
width: calc(100%/7 - (15px + 15px / 7));


階層表示 ／ ウィキペディア（Wikipedia）方式

縦中央配置するには、親要素に2行追加。display: flex; align-items: center;



類似度ページランキング
順位 ページタイトル抜粋 ％
1 100/7%ではなく100%/7。(100/7)%ではなく(100%/7) 32
2 utf-8ではなく、UTF-8 15
3 画像編集系ソフトウェアの分類。ラスタ、ベクタだけではなく 15
4 #0000CDは群青色ではない？ 15
5 半透明borderは、16進数カラーコードではなくRBGAを使用 14
6 CSSは、//でコメントアウトできない。1行でも複数行でも、構文は、/* コメント */ のみ 14
7 コピペ出来ないWebページをコピペ出来るようにするためには？ 2017年 14
8 Chromeが重くて困っている。解決できない 14
9 「.hoge h4:before:nth-child(5n+1)」ではなく「.hoge h4:nth-child(5n+1):before」 13
10 height:100%;の効果を打ち消す(あるいは上書きする)には、height:auto!important; 13
11 HTMLで「1つのタグにidを複数指定」は出来ない！ 13
12 「DALL·E 2 - OpenAI」を使用してみた感想。2022 年 7 月 31 時点では、デザイン実務に耐えられるレベルではないと思いました。 13
13 UIテキスト仕様調査「ログイン」 ／ 2018/2/17 12
14 「Google Chrome を起動後、100%の確率で3分以内に落ちる」場合は、アンインストール後インストールし直すしかない 12
15 Chromeだけが日本語入力できない。秀丸は日本語入力できる 12
16 CSSでループ処理。一定間隔で(背景色等を)繰り返し指定する 12
17 Chromeで(TikTokなど)特定Webサイトの音を消すには、該当タブを右クリック後、「サイトをミュート」をクリックします。 12
18 要素。width と height 属性を指定しなかった場合、(内容のいかんに関わらず)幅 300 ピクセル、高さ 150 ピクセルで表示される 12
19 Chrome「39.0.2171.95 m」でデザインが崩れる 12
20 画面キャプチャ 2017 年 12
2026/10/12 18:18 更新
週間人気ページランキング ／ 10-5 → 10-11
順位 ページタイトル抜粋 アクセス数
1 Design 0 8
2 「東京都」のカラーコード取得は難しい | カラーコード(色) 5
3 RGB → 色相H 方式の違い | 色変換(色) 4
3 鉄道会社毎のカラーコード | カラーコード(色) 4
4 UI カテゴリー 2
4 血の色 ／ #b30000 ／ #360800 ／ #ff0000 | カラーコード(色) 2
4 GIMP | GIMP 系(ソフトウェア) 2
4 「文春オンライン」に掲載されている画像を「Google Chrome」ブラウザでダウンロードするためには、chrome拡張機能「Absolute Enable Right Click & Copy」を使用します。 | 画像 2
4 計算方式の違いは色々な設定が可能だから 2
4 いい感じのGIFアニメーションを探してみる … 国内 2
4 早見表 | Illustrator CS3(Illustrator) 2
4 コンソールエラー ／ ブラウザ間差異 | ブラウザ 2
5 Color - Style ／ 原色(Primary color) とは？／「Material Design 2014 年」の原色(Primary color)となる濃度500の色は、20 色 1
5 height:100%;の効果を打ち消す(あるいは上書きする)には、height:auto!important; | CSS 1
5 inputタグのsize属性 | HTML 1
5 案3.picture を使用したレスポンシブ画像のアート ディレクション（Art Direction-based Selection） 1
5 「Firebug Lite for Google Chrome™」アンインストール 1
5 考え方A.長さの比率で角度６０°を分割 ／ R≧G≧B 1
5 画像を小さくトリミングして綺麗にみせるため、PhotoShop CS3 で色調補正する | Photoshop CS3(Photoshop) 1
5 「ボタン」と「テキストリンク」の使い分け | ボタン(UI) 1
2026/10/12 5:05 更新