Skip to content

Instantly share code, notes, and snippets.

View tsukashu's full-sized avatar

tsukashu tsukashu

2 followers · 2 following
View GitHub Profile
@tsukashu
tsukashu / FormのHtmlをPhindがほとんど作ってくれた.md
Last active October 24, 2023 06:28
  • 翻訳項目を雑に告げる。
  • 翻訳されると手間なので、クオートで囲んでおく
  • あとで CSS でスタイルするときを考え、wrapper もお願いしておく ← 自分でやるとかなりめんどくさい。

create contact form. there should be, "お名前"、"メールアドレス" ,"法人/個人の選択" ,"法人" ,"個人" ,"お問い合わせ内容" ,"プライバシーポリシーに同意します。"

@tsukashu
tsukashu / picture要素を使ったアートディレクションについてPhindにきいいてみた.md
Created October 24, 2023 05:45
how to picture tag (art direction)

img を モバイル表示とデスクトップ表示で切り替えたい。Picrure を使った例を作成してほしい。

Context index.html Workspace context Phind HTML の要素を使用して、デバイスの画面サイズに応じて異なる画像を表示することができます。以下にその例を示します。

@tsukashu
tsukashu / 日本語の文章でデスクトップとモバイルで改行位置を変えたい時.md
Last active October 24, 2023 08:02

とりまなんとかなりそうだったので覚書。 要素幅で自動改行させるものと混在させられないや、普通に。<span>最強か。

以下、使えなかったものの残骸。

Chrome DevTool 上で確認した限りでは、html での改行とかに煩わされることはなさそう??

  1. 改行位置を制御したいところに、word-break: keep-all;を設定する。
  2. デスクトップ・モバイルの両方で改行したいところは<br>タグ、モバイルのみで改行したいところは<wbr>タグを設定する
@tsukashu
tsukashu / detectOverflowElements.js
Last active November 10, 2023 07:50
// original snippet by https://x.com/tak_dcxi/status/1454019066608304134?s=20
function detectOverflowElements() {
const Width = document.documentElement.clientWidth;
const elements = document.querySelectorAll("*");
elements.forEach((element) => {
element.style.outline = "1px solid tomato";
if (Width < element.clientWidth) console.log(element.nodeName + " " + element.className);
});
}
@tsukashu
tsukashu / 1行に収まらない文字を「…」で省略する方法.md
Last active October 12, 2023 02:01
1行に収まらない文字を「…」で省略する方法
  • 1 行に収まらない文字を「…」で省略する方法
.news-link__title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@tsukashu
tsukashu / astro-assets-responsive.astro
Last active June 26, 2023 07:26
astro assets responsive
---
import { Image } from "astro:assets";
import ham from "~/assets/ricky-kharawala-adK3Vu70DEQ-unsplash.jpg";
---
<html lang='en'>
<head>
<meta charset='utf-8' />
<link rel='icon' type='image/svg+xml' href='/favicon.svg' />
<meta name='viewport' content='width=device-width' />
@tsukashu
tsukashu / hover-to-rounded-underline.md
Last active May 19, 2023 03:01 
<div>
  <a>hover to underline</a>.
</div>
<style>
  div {
    padding: 1rem;
 }
@tsukashu
tsukashu / createContentandDescription.ps1
Created May 12, 2023 03:55
# ファイル名と説明の配列
$fileDescriptions = @{
"front-page.astro" = "サイトのトップページを表示するためのファイルです。"
"archive.astro" = "投稿一覧ページを表示するためのファイルです。"
"single.astro" = "投稿ページを表示するためのファイルです。"
"home.astro" = "ニュース記事一覧ページを表示するためのファイルです。"
"page-about.astro" = "「会社概要」ページを表示するためのファイルです。"
"page-medical.astro" = "「医療について」ページを表示するためのファイルです。"
"page-staff.astro" = "「スタッフ紹介」ページを表示するためのファイルです。"
"page-contact.astro" = "「お問い合わせ」ページを表示するためのファイルです。"
@tsukashu
tsukashu / responsive-checker.css
Last active May 10, 2023 07:34
/* responsive checker */
@media (width < 375px) {
body::before {
content: "width < 375px";
position: absolute;
top: 0;
right: 0;
}
}
@media (375px <= width < 640px) {
@tsukashu
tsukashu / HTML emmet snippet + php.php
Last active May 5, 2023 07:29
WordPress HTML5 boilerplate
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo('charset'); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?php wp_title(); ?></title>
<?php wp_head(); ?>
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/style.css">
<script defer src="<?php echo get_template_directory_uri(); ?>/js/script.js"></script>