🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
Google

Googleは、アメリカ合衆国に位置する、インターネット関連のサービスや製品を提供している企業です。検索エンジンからアプリケーションの提供まで、多岐にわたるサービスを提供しています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

939閲覧

添付したコードの言語を教えてください

sakomaiamokas

総合スコア2

Google

Googleは、アメリカ合衆国に位置する、インターネット関連のサービスや製品を提供している企業です。検索エンジンからアプリケーションの提供まで、多岐にわたるサービスを提供しています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

1クリップ

投稿2021/03/19 12:52

前提・実現したいこと

  初学者なので質問におかしな点があってもお許しください。HTML/CSSとGoogle
マテリアルデザインコンポーネントを勉強しています。
「progress indicator」を実装できるようになりたいのですが、それについてのGoogleサイトを読んでも実装方法がわかりません。以下のコードが書かれていましたが、HTMLに貼り付けてみてもブラウザはそのコードが文字で書いてあるだけです。
ですから、見たことない記法でもありますし言語が違うのかなと思い質問させていただきました。
もし可能であれば、実装する手順まで教えていただけたら大変ありがたいです。
よろしくお願いします。

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

エラーメッセージ

該当のソースコード

ソースコード

import 'package:flutter/material.dart';

void main() {
runApp(App());
}

class App extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Theme Progress Indicator Demo',
debugShowCheckedModeBanner: false,
theme: _buildShrineTheme(),
home: Scaffold(
appBar: AppBar(
title: Text('Theme Progress Indicator Demo'),
),
body: Center(
child: Column(
children: [
Divider(),
LinearProgressIndicator(),
CircularProgressIndicator(),
],
),
),
),
);
}
}

ThemeData _buildShrineTheme() {
final ThemeData base = ThemeData.light();
return base.copyWith(
colorScheme: _shrineColorScheme,
toggleableActiveColor: shrinePink400,
accentColor: shrineBrown900,
primaryColor: shrinePink100,
buttonColor: shrinePink100,
scaffoldBackgroundColor: shrineBackgroundWhite,
cardColor: shrineBackgroundWhite,
textSelectionColor: shrinePink100,
errorColor: shrineErrorRed,
primaryIconTheme: _customIconTheme(base.iconTheme),
textTheme: _buildShrineTextTheme(base.textTheme),
primaryTextTheme: _buildShrineTextTheme(base.primaryTextTheme),
accentTextTheme: _buildShrineTextTheme(base.accentTextTheme),
iconTheme: _customIconTheme(base.iconTheme),
);
}

IconThemeData _customIconTheme(IconThemeData original) {
return original.copyWith(color: shrineBrown900);
}

TextTheme _buildShrineTextTheme(TextTheme base) {
return base.apply(
fontFamily: 'Rubik',
displayColor: shrineBrown900,
bodyColor: shrineBrown900,
);
}

const ColorScheme _shrineColorScheme = ColorScheme(
primary: shrinePink100,
primaryVariant: shrineBrown900,
secondary: shrinePink50,
secondaryVariant: shrineBrown900,
surface: shrineSurfaceWhite,
background: shrineBackgroundWhite,
error: shrineErrorRed,
onPrimary: shrineBrown900,
onSecondary: shrineBrown900,
onSurface: shrineBrown900,
onBackground: shrineBrown900,
onError: shrineSurfaceWhite,
brightness: Brightness.light,
);

const Color shrinePink50 = Color(0xFFFEEAE6);
const Color shrinePink100 = Color(0xFFFEDBD0);
const Color shrinePink300 = Color(0xFFFBB8AC);
const Color shrinePink400 = Color(0xFFEAA4A4);

const Color shrineBrown900 = Color(0xFF442B2D);
const Color shrineBrown600 = Color(0xFF7D4F52);

const Color shrineErrorRed = Color(0xFFC5032B);

const Color shrineSurfaceWhite = Color(0xFFFFFBFA);
const Color shrineBackgroundWhite = Colors.white;

試したこと

bodyタグの中に上記のコードを貼り付けました。

<!DOCTYPE html> <html lang="ja">  <head>   <meta charset="utf-8">   <title>コンポーネントGoogleMaterialDesign</title>   <link rel="stylesheet" href="styles.css">  </head>  <body>

 </body>

</html>

補足情報(FW/ツールのバージョンなど)

テキストエディタ:Atom

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

言語はDartで、
フレームワークはFlutter
ですね

もし可能であれば、実装する手順まで教えていただけたら大変ありがたいです。

まずはFlutter 入門とかで調べてみて下さい。

「progress indicator」を実装できるようになりたいのですが、

ただ単に「progress indicator」をブラウザ上で表示させたいだけなら
HTML5 progress indicator
とか
プログレスバー javascript
とかで調べてHTMLなりJavaScriptで実装する方が早いです。

投稿2021/03/19 14:10

tanat

総合スコア18727

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

sakomaiamokas

2021/03/20 08:55 編集

tanatさんご回答ありがとうございます。 ”Dart”は初めて聞きました。 ”Flutter”は「AndroidとiOS を一つのコードで開発できるツール」くらいの知識しかなかったです。 こんなところに使われているんですね。 ”HTML5......”やってみて、できました。 tanatさんに教えていただけたおかげで、自分の足りてないところがわかりとても勉強になりました。
tanat

2021/03/20 09:04

解決してよかったです。 フィードバックありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問