html

今回のHTML講座はいつか寛斗様にコメントいただいたフォントの件についてになります。前提条件は先日の記事「【HTML】アメブロで縦書き記事を書きたい」と同じです。早速本題に移りたいところですが、もう少し。・非推奨(廃止)タグであることを考慮の上使用すること⇒今回紹介するタグは定義上とっくに廃止された古いものです。互換性が考慮され現在も有効ですが、将来性は期待できません。ブラウザアップデートのタイミングで、折角変えた筈のフォントがデフォルトフォントに戻ってしまった、という事態があり得ます(

​6000文字制限アメブロ記事を書いていてこのような表示見たこと無いですか？？普通に文字を打ってて6000文字ってありえへんやろ？って思いますが、HTMLの文字数になります。HTMLはなに？ってところは調べてください笑簡単に言うと文字の大きさ、色、改行などを指示するパソコン言語ぐらいで思っていただければ笑HTMLの文字数の確認の仕方はこちら​なぜそんなにHTMLの文字が多くなるの？普通に文字を打ってるだけやったらまぁまぁ6000文字まで到達しにくいですが、文字の大きさや色を変え

アメブロを運営しているとデザイン性を高めたいと思うことはありませんか？特に「囲み枠」を活用すれば重要な情報を目立たせたり記事の構成を分かりやすくしたりできます。今回ご紹介するのはChatGPTを使ったオリジナル囲み枠の作り方です！ChatGPTで簡単！アメブロ囲み枠の作り方囲み枠を作る前の疑問や不安ChatGPTでプログラムが書けると聞くけど精度が心配プログラミングの知識がなくても本当に作れるの？固定記事で囲み枠を試したけど、うまく表示できなかっ

ま～た何かと問題のあるHTML今回、このエラーが出て、最初に参考にしたサイトはMiyalogさん。そんなに難しい問題じゃないよ、という事が分かりました。ただ、内容が同じという訳ではなかったので自分のサイトのどこが問題なのかをサチコ(サーチコンソールの略)で見る必要がある。これは余談だが、サチコって略が好きで言いたい傾向にある。わざわざカッコ使うなら略さなければいいのに。でも言いたいので仕方がない。さて、話は戻って自分の

前回Webサイトの余白を調整する方法を紹介させて頂きました。➡【CSS】Webサイトにて余白を調整する(margin)ただ、余白を調整しようとしても・ソースにおいてどの部分を修正したらいいのか分からない・余白を消したつもりなのに、やっぱり余白が出来ている・・・ということが発生します。そこで今回は、デベロッパーツールを使った余白の消し方を紹介させて頂きます。デベロッパーツールとは？GoogleChromeで使用することが出来る、デバッグ用のツールになります。

第二回の今回は、開発環境構築と今後の執筆予定内容を掲示します☆【学習に最適】天気予報をHTML・CSS・Javascriptだけで作る目次概要開発環境の準備HTML/CSSを作成する(前編)HTML/CSSを作成する(後編)Javascriptを使って天気の情報を取得する画像を使ってイイ感じのデザインにする【応用編】地域を変更できるようにしよう開発の流れを理解するシステムエンジニアの役割の方々は、プロジェクト全体を成功に導くため、開発環境

PC引っ越し作業の続き。🔍このブログ内を検索する画像加工ソフトは、相変わらずMacromedia社のFireworks3を使っていて、これをインストール。HTMLエディター（Web作成ソフト）は、マイクロソフトの「MicrosoftExpressionWeb4日本語版」というのを使っています。商品画像をページ内に貼り付けるだけの作業しかしていないので適当なソフトでよいのですが、このソフトは多機能なわりに使いやすいし何といっても無料なので好んで使ってきました。それで今回も

Webデザイナーを目指して職業訓練に通っているめーぷるです！☺️訓練校の授業でjQueryを使用してアニメーションを制作いたしました。jQueryライブラリの組み込みは以前したのですが、スクリプトを書き換えるのは今回初めてだったので、なかなか苦戦しました。制作時間は約８時間でした。授業の最後に発表の時間があったので、一緒に授業を受けているみなさんの作品も見せてもらったのですがそれぞれ個性的で楽しかったですし、刺激を受け

今日は、CSSで画像を枠の中に綺麗に収める方法を教えていただきました。HTMLタグではimgタグを<div>で囲っておいて、CSSで下記のようにコードを書く！例：【HTML】<div><imgsrc="〜”></div>【CSS】div{border:solid1px#000（枠の縁の指定。この部分は任意）width:100%;height:100px;}img{object-fit:contain;width:100%;height:10

HTMLから入力データを得る、HTMLでデータを送る例出典：Manajob[マナジョブ]越境型IT学習サービスですwww.manajob.jp↑これはわかりやすいが、↓これのほうが実用的かつ論理的である。【Flask,Python】formタグの使い方|理系エンジニアによる雑記ブログ【Flask,Python】formタグの使い方|pythonフレームワークのFlaskにおけるformタグの使い方について解説しています。request.methodsの設定（POST、GET）や

第三回の続きです！やっとHTML/CSSを書きます☆【学習に最適】天気予報をHTML・CSS・Javascriptだけで作る目次概要開発環境の準備HTML/CSSを作成する(前編)HTML/CSSを作成する(後編)Javascriptを使って天気の情報を取得する画像を使ってイイ感じのデザインにする【応用編】地域を変更できるようにしようHTML/CSSを書くはい、ようやく本題に参りました。HTML/CSSファイルを追加するま

今回はchart.jsで高さを固定する方法をご紹介■Chart.jsとはJavaScriptのフレームワークです。HTMLのcanvas上に、JavaScriptを用いて折れ線グラフや円グラフ等を簡単に記述するものです。基本的に横幅でheightのサイズが決まるので、CSSから高さの指定が出来ない仕様となっています。(多分)今回はその高さをJavaScript側から設定してしまう方法です※今回はちょっとややこしい&ニッチな内容なので、コードだけ置いておきま

CSSにおいて、疑似要素::beforeと::afterは、要素の内容の前後にコンテンツを追加するために使用されます。これらの疑似要素の重なり順序については、通常、次のようになります。目次疑似要素の重なり順序具体的な例親要素.boxの相対的な位置に配置する::beforeと::afterを重ね合わせる::afterを::beforeの下に配置するスタッキングコンテキスト疑似要素の前面に要素が表示されないまとめ疑似要素の重なり順序::before疑似要

Webデザイナー目指して職業訓練校に通うめーぷるです！今日はjQueryの授業だったのですが、HTML/CSSでの重なり順が上手くいかなかったのできちんと理解しようと思います！！！！！長くなってしまったので、前編、後編でお送りします。Z-indexはみなさんご存知ではないでしょうか。CSSで設定すると重ね順を前面にしたり、背面にしたりできるプロパティですね！これが今回、うまく働かなかったのです。。。その理由は

こんにちは、ミーコです。74年間軌跡のサクセスストーリープロフィールはこちらから前回は、ブログのジャンルによっては恐ろしいこと・・・・・が起こる事が分かったと思いますトレンドブログを書くときは十分に注意してくださいね！内容によっては訴訟問題に発展することもあります！ブログの１記事だけで何千万も支払う結果になることも…このような事は、本当にあるらしいです実際に経験した私も納得です！楽しい記事を書けば、記事を書いて

RaspberryPiPicoWのWiFi機能はサンプルプログラムでチェックできました。PicoWでWebserverを動かし，wifi接続でPCやスマホからコントロールしたいので，まずは自分で分かる範囲の基本的なHTML（HyperTextMarkupLanguage）だけで，シンプルなのを試してみました。試行中の様子です。USBでプログラムを入れているので，wifiでwebからコントロールしているようには見えないですね(^^;;;Web上のコントロール画面です。クール

第三回の今回は、いよいよHTML/CSSの実装に入ります☆【学習に最適】天気予報をHTML・CSS・Javascriptだけで作る目次概要開発環境の準備HTML/CSSを作成する(前編)HTML/CSSを作成する(後編)Javascriptを使って天気の情報を取得する画像を使ってイイ感じのデザインにする【応用編】地域を変更できるようにしよう今回の目的と方針今回の目的今回は「HTML/CSSを作成する」訳ですから、言い換えれば「画面を作成

様々な言語に対応するエディターVisualStudioCode（以下、VSCode）ですが、ホームページを構成するHTMLファイルの編集時にもとても便利に使えます。通常、HTMLファイルをVSCodeで開くと共にWebブラウザにそのHTMLファイルを表示させ、コードを編集するたびにWebブラウザを更新してその表示を確認していました。しかし、Microsoftが提供するVSCode拡張機能「LivePreview」をインストールすれば、編集中のHTMLファイルをVSCo

HTMLのみで4個のボタンを横並びのデザイン・HTMLコードみなさん、こんにちは。今日はHTMLのみを使用して4つのボタンを横並びにし、それぞれをページ内の異なるセクションにリンクする方法をご紹介します。さらに、各ボタンに異なる背景色を設定して、視覚的に区別しやすくします。それでは、早速見てみましょう。デザインButton1Button2Button3Button4HTMLコード<tablewidth="100%"><tr>

選挙の街宣車やら何やらに殺意を覚えながら、このブログを書いています。とくに立憲民主党がひどくうるさいです。日本共産党は、この間、怒ったからまだまし？にはなったけど、まだうるさいようにも思います。静けさは権利です。前回までのあらすじPythonとElectronを使って、GUIアプリを作る方法を調べていたら、tauriという、もっと早い実行速度でGUIを作れるものを見つけました。tauriとは？Electronの代理を目指した、Rustというプログラム言語で作られたElectron

スクロールして要素が画面内に入ったときに、ふわっと表示されるアニメーションを実装する方法について説明します。このアニメーションは、ユーザーの視覚的な興味を引くために多くのウェブサイトで利用されています。以下に、基本的な実装方法を紹介します。目次HTMLの準備CSSの設定CSSプロパティの詳細アニメーションの流れJavaScriptでスクロールイベントを設定JavaScriptコードの詳細まとめHTMLの準備まず、アニメーションさせたい要素にクラスを追加します。このクラスは

フォントサイズを指定する単位「px」と「rem」についてWeb制作でフォントサイズを指定する際には、いくつかの単位がありますが、今回はpxとremについて初心者向けに分かりやすく説明します。私自身、以前はすべてpxで統一してフォントサイズを指定していました。しかし、あるときremの便利さを知り、「これを使えば簡単に管理できるじゃん！」と感動した経験があります。この記事では、pxとremの特徴や使い方の違いをまとめましたので、ぜひ参考にしてください！pxを使うメリットとデメリット

PAD（PowerAutomateDesktop）からブラウザでドロップダウンリストを選択しようとした時に「・・・を持つドロップダウンリストが見つかりません。」とエラーになって困っていました。PAD上のツールの「レコーダ」でブラウザのドロップダウンリストを選択したのに、、、何度やってもエラーになる。色々、ネットで調べたけど、中途半端な情報が多くうまくいきませんでした。しかも、同じmicrosoftの兄弟サービスの「PowerAutomate」で作った画面が操作できないな

GAS（GoogleAppsScript）を使ってWebアプリを作成し、私共の会員サービスに利用しています。少し前から、そのWebページに挿入していた当団体のロゴマークが表示されなくなってしまいました。（下図）いろいろネット検索してみると、Googleドライブに格納した画像ファイルをWebページに差し込むURLの形式が変ったようです。おさらいも含めGoogleドライブに格納した画像ファイルのURLについて見てみましょう。画像ファイルを開いてそのURLを確認する

FlaskからWEBへ情報（値、リストなど）を渡して表示出典Flaskでクライアントサイドに変数(値・リスト・辞書型配列)を渡して表示させるこの記事の著者データサイエンティスト/ブロガーたぬtanu詳しいプロフィールプロフィール福岡在住のデータサイエンティスト。Pythonでルーチンワークを瞬殺する仕組みを作ることやデータを視覚化することが得意です。...tanuhack.com↑わかりやすい。要は・・・Flask側から、fromflaskimportFl

●このメールの画像は非表示になっています。このメールは不審なメールまたは迷惑メールの可能性があります。まいどです。田渕です。「このメールの画像は非表示になっています。このメールは不審なメールまたは迷惑メールの可能性があります。」こんなメールが届いたら、危険でしょうか？迷惑メールでしょうか？実は、誰が、どんな内容で、どんな方法で出しているか？次第です。実は、このエラーメッセージは、Gmailで、メルマガを受信した時に表示されました。・私が望んで取ったメルマガ・いつも読んでいるメ

Googleドライブの動画をウェブページに埋め込む手順です。目次動画の準備動画のプレビューを開く新しいウィンドウで開く権限を変更する埋め込みコードを取得埋め込みコードをウェブページに貼り付けるまとめ動画の準備まず、Googleドライブに埋め込みたい動画をアップロードしておきます。Googleドライブにアクセスし、埋め込みたい動画を探します。動画のプレビューを開く動画を右クリックし、「アプリで開く」>「プレビュー」を選択します。新しいウィンドウで開

この一年プログラムってのを弄っているわけですが初めのころは作りたいものがあるがなにからやっていいものかって事で色々まよた。プログラムの最初の取っ掛かりなんだが結構何やっていいか悩んじゃうので僕のケースを伝えとこ。よく言われている事だけどある程度「やりたい事」を具体的にあげた方がいいね。例えば「ホームページを作りたい」だとか「こんなサービス」を作りたいだとか。それによって進むべき順路は大きく変わってくる。HTML&CSSとWeb

擬似要素の画像サイズを変更するbeforeやafterはwidth指定をしても変更されません。.〇〇:before{content:url(../img/〇〇.png);display:inline-block;width:100px;height:100px;}【本日実装したいこと】擬似要素の画像サイズを変更したいその実装方法は背景画像として表示させれば変更可能になります！サルワカさんのサイトから使わせても

HTML画面をテキストベースで作るのは慣れていないと大変です。ボタンやテキストボックスをペタペタと張りながら画面イメージを作りたいと思いますが、ホームページビルダーとかはお金がかかるのでためらっていました。なんと、VisualStudioは個人利用なら無料で使えるみたいですね早速VisualStudioをダウンロードして使ってみました。少しカスタマイズが必要でした。①https://visualstudio.microsoft.com/ja/downloads/からダウ