常連

### 前提

①「width:80%、font-size:14px」内に全角で何文字収まるか調べるcapasity関数を作成し、
②対象となるテキストの文字数をカウントするtextcount関数を作成、
③はみ出した部分を「...」で表示するshorten関数を作成
④ページ読み込み時にshorten関数を実行

というプログラムをネットのものを参考にしつつ自分のサイトに合うように改変した以下のソースコードをまず見て頂けますでしょうか。


### 該当のソースコード

```html
<style type="text/css">
		.sample {
			width: 80%;
			font-size: 14px;
			border-style: solid;
			margin-top: 30px;
		}

		.sample * {
			display: inline-block;
		}

		.sample div {
			background-color: yellow;
		}

		.sample span {
			background-color: pink;
		}
</style>
<body>
	<div class="sample">
		<div>.sampleに何文字ならキレイに収まるか調べて、</div>
		<span>文字数が多い場合.sample > div部分を省略して表示させる</span>
	</div>
	<div class="sample">
		<div>実現させたいのはページ内にあるすべての</div>
		<span>.sample > divに同じ処理をさせたい</span>
	</div>
<script type="text/javascript">
/*全角で最大何文字ならキレイに収まるかを調べる関数*/
function capacity(s) {

	//算出されたCSSを取得
	var style = window.getComputedStyle(s);

	//フォントサイズとボックスの幅を数値で取得
	var fontsize = parseInt(style.fontSize);
	var width = parseInt(style.width);

	//ボックスに収納できる文字数
	var mojisuu = Math.floor(width/fontsize);

	return mojisuu;
};


/*対象のテキスト(.sample)が全角1文字、半角0.5文字で合計何文字になるか計算する関数*/
function textcount(n) {

	var nagasa = 0;

	for (i = 0; i < n.length; i++) {

		if(n[i].match(/[ -~]/) ) {

			nagasa += 0.5;
		}

		else {

			nagasa += 1;
		}


	}

	return nagasa;

};


var sample = document.querySelector(".sample");
var str = sample.innerText;
var strfirst = sample.firstElementChild.innerHTML;

/**/
function shorten() {

	var kstr = str;
	var count = (textcount(kstr));

	if (count > capacity(sample)) {

		//はみ出してる文字数+4文字をテキストの後ろから削除
		strfirst = strfirst.slice( 0, capacity(sample) - count -4 ); 

		//「…」と連結し、元のテキストを置き換える
		sample.firstElementChild.innerHTML = strfirst + "…";
	}

	//要素の幅が十分にあればそのまま表示
	else {
		;
	}
};

shorten();

</script>
</body>
```

### 発生している問題・試したこと・実現したいこと

上のプログラムだと73行目でquerySelector()メソッドを使用しているため最初の.sampleしか省略されません。

すべての.sampleの文字数を調べ、それぞれの.sampleの子要素のdivを省略させるにはどうすればいいでしょうか...？

querySelectorAll()メソッドとforEach()メソッドの反復処理を使ったりして試行錯誤してみたのですが根本的な使い方が間違ってるのか前に進めず、迷って質問させて頂きました。

どうぞよろしくお願いします。

### 上記のコードをforEach文で書き直したコード

```html
<script>
<!--コメントを受け上記コードの73行目以降をforEach文で修正したものです->
var sample = document.querySelector(".sample");
var sampleall = document.querySelectorAll(".sample");


sampleall.forEach(function(value){

	var count = (textcount(value.innerText));

	if (count > capacity(value)) {

		//はみ出してる文字数+4文字をテキストの後ろから削除
		value.firstElementChild.innerHTML = value.firstElementChild.innerHTML.slice( 0, capacity(value) - count -4 ); 

		//「…」と連結し、元のテキストを置き換える
		value.firstElementChild.innerHTML = value.firstElementChild.innerHTML + "…";
	}

	//要素の幅が十分にあればそのまま表示
	else {
		;
	}
});
</script>

```

[javascript]文字数をカウントしてはみ出した部分を「...」で表示させたい

## THMLファイル一枚からどこまでできるのかが知りたいです
具体的にTHMLファイル一つからボタンや入力欄などの追加。ボタン押下時にファイルの生成や出力。XMLファイルの読み込みなどがしたいのですが、可能でしょうか？また不可能の場合、どうすれば実現可能でしょうか

## 背景
自分は身内だけで自作プログラムを配布しようとしているのですが、.NETなどで作ったプログラムではサーバーが必要だったりスマホやpcと限定されるため、あまり汎用性がありません。ですので、HTMLファイルを配ることで解決できるのではないかと思いました。しかし、自分はC#やSQLなどの社内アプリしか作ったことないのでHTMLのことを一ミリも知りません。
ですので、HTMLファイルで何ができるのか。そして、やりたいことを実現するにはどうすればよいのかが知りたいです。よろしくお願いします。
[補足]
理想としては、DiscordでHTMLファイルを添付し、ダウンロードしてブラウザで表示、操作できるような作りだとスマホでもやりやすくなると思います

## 具体的にやりたいこと
具体的には以下のようなデザインのHTMLファイルを作りたいです。
下に詳細を書きます。
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2023-04-27/9919fc17-0ced-4b9d-8988-8197ce44f5ae.png)
[XML参照]
パソコンやスマホからXMLフォルダを指定し、実行と押すと読み込んで名前や生年月日などに反映されるようにする。
[名前]
任意の文字列を入力できるようにする
[生年月日]
入力した文字列をyyyy/MM/dd形式に整形する。またはカレンダーなどで指定する
[年齢]
数字のみを入力できるようにする
[性別]
男か女かのいずれかにチェックを付けれるようにする。片方にチェックが付いた状態でもう片方にチェックをいれると、先についていた方のチェックが外れるようにする
[コンボボックス]
固定でデータを表示、選択できるようにする
[追加]
コンボボックスに表示されているデータをリストに追加する
[リスト]
コンボボックスから選んだデータを表示する。
[備考]
任意の文字列を入力できる
[XML参照と出力]
上の記述したデータをXML形式でファイル出力する。また、出力後、そのXML文字列をクリップボードにコピーする

また、XML形式の文字列をここにドラッグアンドドロップすることでも反映が可能
## 追記
修正依頼にて「やってほしいことしか書かれていない」というものが来ましたが、私が知りたいのは「実現可能かどうか」です。実現が可能ならば勉強して自力で作りますし、その際に不明点があれば調べます。ただ、これが実現不可能だったら時間の無駄だと感じますし、何より嫌ですのでこういった意見が聞きたいと思いこの質問を投稿した次第でございます。

HTMLファイル一つでどこまでできるのか

### 実現したいこと
HTMLにfaviconの要素がないのにきちんと表示される理由を知りたいです。

### 前提
teratailでfaviconはどうやって設定しているのでしょうか？

例えばこちらのリンクは私のページですが、HTMLにはfaviconの設定がないように見えるのにChromeではきちんと表示されますよね…
https://teratail.com/users/NESCAFE

### 試したこと
ChatGPTに「WEBサイトでアイコンが設定されていそうなHTML要素すべて列挙してください」と聞いてfaviconの要素としてありえそうなものを確認しました。

しかし、返ってきた答え（`rel="icon"`など）は当該URLのHTMLにないようでした。


faviconの要素がないのにきちんと表示される理由

### 実現したいこと
position: absoluteを適用させたいです。

### 前提

現在progateにてHTMLとCSSの学習をしております。
position: absoluteを適用させてlesson-icon内のimgとpを重ねて表示したいと考えております。
しかしpに対してposition: absoluteを記載しても適用されない状況となっています。

### 発生している問題・エラーメッセージ

```
エラーメッセージ
```

### 該当のソースコード

HTML
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Progate</title>
  
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="stylesheet.css">
</head>
<body>
  
  <header>
    <div class="header-container">
      <div class="header-logo">
        <img src="https://prog-8.com/images/html/advanced/main_logo.png">
      </div>
      <div class="header-login">
        <a href="#" class="login-btn">ログイン</a>
      </div>
    </div>
  </header>
  <div class="top-wrapper">
    <div class="top-contnair">
      <h1>LEARN TO CODE.</h1>
      <h1>LEARN TO BE CREATIVE.</h1>
      <p>Progateはオンラインプログラミング学習サービスです。</p>
      <p>初心者にもやさしいスライドとレッスンで、ウェブサービスを作りながらプログラミングを学んでいきましょう。</p>
      <div class="btn-contnair">
        <a href="#" class="btn new">新規登録はこちら</a>
        <p>or</p>
        <a href="#" class="btn facebook"><span class="fa fa-facebook"></span>Facebookで登録</a>
        <a href="#" class="btn twitter"><span class="fa fa-twitter"></span>Twitterで登録</a>
      </div>
    </div>
  </div>
  <div class="lesson-wrapper">
    <div class="lesson-contents">
      <div class="lesson-head">
        <h2>Learn Where to Get Started!</h2>
      </div>
      <div class="lessons">
        <div class="lesson">
          <div class="lesson-icon">
            <img src="">
            <p></p>
          </div>
          <div class="lesson-text">
            <p></p>
          </div>
        </div>
        <div class="lesson">
          <div class="lesson-icon">
            <img src="https://prog-8.com/images/html/advanced/html.png">
            <p>HTML&CSS</p>
          </div>
          <div class="lesson-text">
            <p>ウェブページの作成に使用される言語です。HTMLとCSSを組み合わせることで、静的なページを作り上げることができます。</p>
          </div>
        </div>
        <div class="lesson">
          <div class="lesson-icon">
            <img src="https://prog-8.com/images/html/advanced/jQuery.png">
            <p>jQuery</p>
          </div>
          <div class="lesson-text">
            <p>素敵な動きを手軽に実装できるJavaScriptライブラリです。 アニメーション効果をつけたり、Ajax（エイジャックス）を使って外部ファイルを読み込んだりと色々なことができます。</p>
          </div>
        </div>
        <div class="lesson">
          <div class="lesson-icon">
            <img src="https://prog-8.com/images/html/advanced/ruby.png">
            <p>Ruby</p>
          </div>
          <div class="lesson-text">
            <p>オープンソースの動的なプログラミング言語で、 シンプルさと高い生産性を備えています。大きなWebアプリケーションから小さな日用ツールまで、さまざまなソフトウェアを作ることができます。</p>
          </div>
        </div>        
        <div class="lesson">
          <div class="lesson-icon">
            <img src="https://prog-8.com/images/html/advanced/php.png">
            <p>PHP</p>
          </div>
          <div class="lesson-text">
            <p>HTMLだけではページの内容を変えることはできません。PHPはHTMLにプログラムを埋め込み、それを可能にします。</p>
          </div>
        </div>        
      </div>
    </div>
  </div>
  
</body>
</html>

CSS
/* CSSのリセット（消さないでください） */
html, body,
ul, ol, li,
h1, h2, h3, h4, h5, h6, p, div {
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Hiragino Kaku Gothic ProN W3', sans-serif;
}

li {
  list-style: none;
}

a {
  text-decoration: none;
}

/* ここからCSSを書いていきましょう */
header {
  background-color: rgba(34, 49, 52, 0.9);
  height: 65px;
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 10;
}

.header-container {
  width: 1170px;
  padding-left: 50px;
}

.header-logo {
  float: left;
}

.header-logo img {
  width: 124px;
  margin-top: 20px;
}

.header-login {
  float: right;
  background-color: rgba(255, 255, 255, 0.3);
  transition: all 0.5s;
}

.header-login a {
  display: block;
  color: white;
  padding: 0px 25px;
  line-height: 65px;
}

.header-login:hover {
  background-color: rgba(255, 255, 255, 0.5);
}

.top-wrapper {
  background-image: url(https://prog-8.com/images/html/advanced/top.png);
  background-size: cover;
}

.top-contnair {
  width: 1170px;
  padding-top: 180px;
  padding-bottom: 100px;
  text-align: center;
  color: white;
}

.top-contnair h1 {
  font-size: 45px;
  letter-spacing: 5px;
  opacity: 0.7;
}

.top-contnair p {
  opacity: 0.7;
}

.btn-contnair {
  margin-top: 30px;
}

.btn-contnair p {
  margin: 15px;
}

.btn {
  color: white;
  opacity: 0.8;
  display: inline-block;
  padding: 8px 24px;
}

.btn:hover {
  opacity: 1.0;
}

.new {
  background-color: #239b76;
}

.facebook {
  background-color: #3b5998;
  margin-right: 10px;
}

.twitter {
  background-color: #55acee;
}

span {
  margin-right: 5px;
}

.lesson-wrapper {

  background-color: #f7f7f7;
}

.lesson-contents {
  width: 1170px;
  height: 580px;
  padding-top: 80px;
}

.lesson-head {
  padding-bottom: 50px;
}

.lesson-head h2 {
  font-weight: normal;
  color: #5f5d60;
  text-align: center;
}

.lesson {
  float: left;
  width: 25%;
}

.lesson-icon {
  position: relative;
}

.lesson-icon p {
  color: white;
  position: absolute
  top: 90px;
  width: 100%;
}

.lesson-text p {
  color: #b3aeb5;
}

```

### 試したこと
答えのコードを見比べたのですが、素人目には基本的に同じように思います。
またネット検索などではどのように調べれば該当するかが分からず見つけることができませんでした。

### 補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

CSS  position: absolute　が効きません

## テーマ、知りたいこと
FlutterとSwiftUI＋＋Combineどちらを重点的に学んでいけば
稼げるフリーランスエンジニアになれるか

## 背景
Swiftからアプリエンジニアとしてデビューし、
今はWebアプリやAndroidも同時に実装できるFlutterを勉強し始めています。

その勉強している中で、気になった点がありました。
・iOSアプリを極めるならSwiftだが、今後SwiftUI＋Combineを学んでいくのは学習コスト高
・Flutterは学習コストが低く同時にいろんなデバイスのアプリが作成できるが専門性が低い。
そのため、細かい注文があったときに結局SwiftやKotlinの知識が必要になる。

そして、いずれかはフリーランスになることを考えています。

流行り言語も急にオワコンとなることもあるので、
Swiftをやっていくほうがフリーランスをやっていくなら安定か、
Flutterは案件はあるものの、扱えるエンジニアが少ないので需要が高め？
といろいろ迷いながら勉強を進めています。

年収は調べたところさほど変わらなさそうでした。

## 知りたいこと
・どちらのほうが将来性があるか
・稼げるかどうか
・メリットデメリット
・自分だったら学ぶ言語はどんな基準で決めるか
・いやそもそもフリーランスはおすすめしない
・フリーランスしたいならこっちの言語がおすすめ ...など

どちらが正解。ということはないので、
みなさんの見解を聞いて参考にさせていただきたく存じます。よろしくお願いします！

FlutterとSwiftUI＋Combineどちらを重点的に学んでいくべきか

### 実現したいこと

アニメーションで文字を１行ずつ時間をずらして表示させたい

### 前提

https://codepen.io/jonnowitts/pen/YQLRYE

ハンバーガーメニューをこちらのサイトと同じような動きにしたいのですが、
現在３行とも同時に表示しています。



### 該当のソースコード

```html
 <nav class="spmenu" id="spmenu" aria-label="スマホ用メニュー">

            <div class="spmenu__inner">
                <h1 class="header__logo header__logo--sp"><a href="#top"><img src="img/top-header-logo@2x.png"
                            alt=""></a></h1>
                <p class="spmenu__nav-ttl">contents</p>
                <ul class="spmenu__list">
                    <li class="spmenu__item"><a href="room.html" class="spmenu__link">お部屋</a></li>
                    <li class="spmenu__item"><a href="menu.html" class="spmenu__link">お料理</a></li>
                    <li class="spmenu__item"><a href="hot-spring.html" class="spmenu__link">温泉</a></li>

                </ul>

                <p class="spmenu__info-ttl">information</p>
                <div class="spmenu__tel">
                    <a class="tel-number" href="TEL:000-0000-0000">TEL.000-0000-0000</a>

                </div>
                <address class="spmenu__adress">
                    <span class="post-code">〒000-0000</span>
                    <span class="address">山形県鶴岡市xxxxxxxxxxx</span>
                </address>

                <div class="spmenu__btn__wrapper">
                    <botton class="reserve-btn spmenu__btn"><a href=#">宿泊予約</a></botton>
                </div>
            </div>

        </nav>
コード
```

```scss
.spmenu {
    position: fixed;
    z-index: 999;
    top: 0;
    right: -120%;
    overflow-x: hidden;
    overflow-y: auto;
    width: 100%;
    height: 100vh;
    max-width: 70vw;
    height: 100%;
    background: #373331;
    transition: all 0.6s ease-in-out;

    .spmenu__list {
        .spmenu__item {
            .spmenu__link {
                transform: translate3d(-150px, 0, 0);
                transition: transform .15s ease-in;
            }
        }
    }

    &__inner {
        padding: 50px 20px;
    }

    @include medium {
        display: none !important;
    }
}

/*アクティブクラスがついたら位置を0に*/
.spmenu.panelactive {
    right: 0;
}


//レイアウト
.spmenu__inner {
    padding-left: 15px;
    padding-right: 15px;
    margin-left: auto;
    margin-right: auto;
    min-width: 230px;
    /*ナビゲーション天地中央揃え*/
    position: absolute;
    z-index: 999;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

//タイトル
.spmenu__nav-ttl,
.spmenu__info-ttl {
    opacity: 0.6;
    color: #fff;
    font-size: 12px;
    margin-top: 30px;
    text-transform: uppercase;
}

.spmenu__adress,
.spmenu__tel {
    color: #fff;
    margin-top: 15px;
}

.spmenu__adress span {
    font-size: 14px;
    display: block;
    margin: 0;
}

.spmenu__tel a {
    font-size: 16px;
    font-weight: 700;
    color: #fff;

    &:hover,
    &:focus {
        opacity: 0.7;
        transition: 0.7s;
        color: #978F10;
    }
}

.spmenu__txt {
    color: #FFF;
    font-size: 16px;
    margin-top: 40px;
    font-weight: 700;
}



.spmenu__item {
    margin-top: 15px;
}

.spmenu__link {
    color: #FFF;
    margin-top: 15px;
    font-size: 18px;
    font-weight: 700;
    display: block;

    &:focus,
    &:hover {
        opacity: 0.7;
        transition: 0.7s;

    }
}

.menu--active {
    height: 100vh;
    overflow: hidden;

    .spmenu__list {
        .spmenu__item {
            .spmenu__link {
                transform: translate3d(0, 0, 0);
                transition: transform 500ms ease-out;

                /* Handles items within the slide-out to give them the delayed slide-in */
                &:first-child {
                    transition-delay: .2s;
                }

                &:nth-child(2) {
                    transition-delay: .3s;
                }

                &:last-child {
                    transition-delay: .4s;
                }

            }
        }

    }

}
```

### 試したこと

自分なりにネットで調べたのですが、よくわかりませんでした。

### 補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

アニメーションで文字を１行ずつ時間をずらして表示させたい

社内Webサイトを作成しようとしています。
HTMLや関連のツール類を使用するのは初めてです。

Webサイトの1つのページに対してフォーマットがあり、
その中にある項目の内容を
入力フォームに入力し、Webサイト上へ反映させるためには
なにをどのように使用したら良いのでしょうか？（例：ExcelのVBAを使用して○○○をし、HTMLへ取り込む）
当方、HTMLのつくり方やコードも初心者の内容を勉強段階です。

画像のようなイメージのことをしたいです。
NO.1・NO.2・NO.3・・・・と同フォーマットのページを複製する予定です。


質問の仕方があっているのかわかりませんが、
ご教授お願いいたします。



![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2023-05-23/0278843b-40b5-4ce0-8fa9-c342e54b78cc.jpeg)


超初心者です　入力フォームからテキスト内容をWEBページへ反映させたい

### 実現したいこと
JS初心者で勉強中です。
サムネイル画像をクリックしたらメイン画像を切り替えるところまではできたのですが、
選択している画像のサムネイル画像をもう一度押したらメイン画像を消すことをやりたいのですがうまくできません。
それと、選択中のサムネイル画像の<li>のタグにactiveのクラスの付与させたいです。



### 該当のソースコード

```ここに言語名を入力
<script>
var selectimg = document.querySelectorAll('.select-imgsrc');
for (var i =0 ; i < selectimg.length; i++ ) {
	selectimg[i].onclick = function() {
		document.getElementById('select-img').src = this.dataset.selectimgsrc;
	};
}
</script>
```

```ここに言語名を入力
<div>
	<img id="select-img" src=""> 
</div>
<ul>
	<li class="select-img_list"><img src="selectimg.jpg" class="select-imgsrc" data-selectimgsrc="selectimg.jpg"></li>
	<li class="select-img_list"><img src="selectimg2.jpg" class="select-imgsrc" data-selectimgsrc="selectimg2.jpg"></li>
	<li class="select-img_list"><img src="selectimg3.jpg" class="select-imgsrc" data-selectimgsrc="selectimg3.jpg"></li>
</ul>
```

### 試したこと

googleで色々模索しましたがヒントになるようなものを見つけられませんでした。

HTML5