Tabliss,TabnineのおすすめCSS // 備忘録

detteeeeeeiu

Google Fontを追加するCSS

@import url('https://fonts.googleapis.com/css2?family=Hina+Mincho&display=swap');


@import url('https://fonts.googleapis.com/css2?family=Allura&family=Hina+Mincho&display=swap');

  1. 使いたいGoogleFontのサイトに移動

  2. Get embed codeをクリックして”WEB”の”@import”を選択

  3. Embed code in the <head> of your htmlと書かれているコードを抜き出す。（<style>行は除く）

  4. 抜き出したコードをカスタムCSSに追加

この画面のコードを使用する

使用したいウィジェットのOpen Font Settingsから使用したいフォントの名前をいれると使用できる。

フォントは正式名称で入れよう。スペースや大文字に注意

検索ボックスをそれっぽくするCSS

.Search input {
  background: rgba(255, 255, 255, 0.8) .75rem .70rem / 24px 24px no-repeat;
  border: 1px solid rgba(249, 249, 250, 0.2);
  border-radius: 21px;
  padding: .75rem 0 .75rem 3rem;
  color: black; /* グレーの色名で指定 */
  text-align: start;
  font: 400 1.1rem 'Roboto';
  transition: border-color 150ms ease-in-out, box-shadow 150ms ease-in-out;
  
  /* Add this line to make the input field wider */
   width: 540px;
  max-width: 1900px;
  
  /* Add this line to apply a blur effect to the background */
  backdrop-filter: blur(10px);
}

.Search input::placeholder {
  color: unset;
  opacity: 0.54;
}

.Search input:focus {
  border: solid 1px #3F51B5;
  box-shadow: 0 0 0 1px #3F51B5, 0 0 0px rgba(63,81,181,.26);
}

リンク集に背景を追加するCSS

  .Links {
  background-color: rgba(255, 255, 255, 0.1); /* 半透明の白 */
  backdrop-filter: blur(9px); /* ブラー効果 */
  padding: 14px;
  border-radius: 10px;
  border-radius: 18px; 
}

AIのちからってすげー

自分はコードとかCSSとか全くわからないが、AIに書かせれば複雑ではない限り動かしてくれる。何かやってみたいことがあるならAIに尋ねるのも一つの手。深い理由はないが自分はMicrosoft Copilotを使った。
ネットでもtablissのcssを公開している人もいるようなのでググってみるのもいいかも。

この記事が気に入ったらサポートをしてみませんか？