HTML

皆さん、こんにちは、パパ薬です！アメブロのブログ記事作成もだいぶ慣れてきて、もっと上手に書きたいと思ってきました。今回は、HTMLとCSSを使って、アメブロ無料版でも使える「おしゃれなプロフィールボックス」を紹介します！まずは完成イメージから！こんな感じのプロフィールボックスが、HTMLをコピペするだけで作れます👇※画像はご自身のものに差し替えてくださいね！ぱぱ薬隙間時間で夢を追う薬剤師パパ！副業と家族時間の両立に全力奮闘中。もっと読むコピペOK！貼るだけ

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

先月のある日、タイトルのサービスが終了するとのお知らせメールが届いたのです。あれっ、まだアカウントあったっけ、すっかり忘れてましたよ。思えばホームページなんてものを作るきっかけも、このサービスでした。こんばんは。トロンボーン吹きで作編曲家、吹奏楽指導者の福見吉朗です。ケータイでWebむかしむかしのことじゃった…まだスマホなどというものが存在しない時代、携帯電話はガラケーと呼ばれていたのじゃ。ガラケーとはガラパゴスケータイの略。はて、なんでそう言うのだったかのう…昔

カシンです。これはアタシ(50代・男)が、適当に書くブログです。サムスンからのメール、の巻ずもヤー！ワイはズモ！みなさまこんにちはゆおです日曜日はカシンさんに代わってこの二人で担当していますゆおずもカシンはGalaxyを使ってる！スマホですねゆおずもだからSamsungからの宣伝メールも来る！配信停止しない限り、毎週来ますカシンさんはこれまで気にせず単に無視してましたゆおずも4/3に来たのが、これ！

「Firefoxのブックマークを他のブラウザに移したい」「パソコンの買い替えでブックマークをバックアップしたい」そんな時に便利なのが、ブックマークのエクスポート機能です。Firefoxでは、HTML形式やJSON形式でブックマークを保存し、他のブラウザやPCに移行できます。本記事では、✅Firefoxのブックマークをエクスポートする方法✅エクスポートしたブックマークのインポート方法✅ブックマークを管理しやすくする便利なツール紹介などを詳しく

唐突に「ブログカードって何？」って聞かれて答えられますか？筆者は、仕事柄よく利用しているので答えられますけど今回は、そのブログカードに関することについて掘り下げてみます。知っているとお友達の記事を自分のブログで紹介する時に便利ですね目次ブログカードとはWordPressの場合のブログカードプラグインを使ったブログカードプラグインなしでブログカードを挿入する方法アメブロのブログカードはてなブログでのブログカードまとめ：ブログカードとテキストリンクの使い分けアメブロ関連

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

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

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

今回のお題：チャットの文字の色こんにちは。夢ある魔術師フェイです。元素騎士オンラインや他のMMORPGにおいて、チャット欄で、他と色が異なるメッセージを見たことはないですか？実は、これ、自分で変更できるかもしれないです。今回は「チャットの文字に色を付ける方法」を簡単に解説します。この記事を読めば、どなたでも、文字に色を付けてメッセージを発信する方法を習得できます。※PCでの操作がおすすめですが、アプリ版でも同じことが

画像を縦に並べていくとブログがどんどん長くなってしまうし、たくさん貼ると画像が見にくくなってしまうなので、横にも並べてぱっと見た時に全体を見やすくしたいって思いましたネットで検索して私がみつけたのは、画像の横幅を調整して並べる方法HTMLで並べる方法です。CSSも使えればもっとやりやすそうですが、私の選んだブログのデザインではCSSはいじることができないので、今回はその方法は使えません。私が調べたことをはてなブログにまとめました。【アメブロ

七並べ(pyxel版)の改修版をapp2htmlでhtmlに変換したファイルの中身をGoogleドキュメントに載せました。大半は何が書いてあるか分かりませんが、コピペしてブラウザで開くと七並べが実行されます。七並べhtml版の中身(Googleドキュメント)使い方1.リンク先の内容を「CTRL+a」(全選択)→「CTRL+c」(コピー)2.メモ帳等のテキストエディタを開いて「CTRL+v」(ペースト)3.拡張子を「html」にしてデスクトップ等のファイルを開ける場所に保存

【学習に最適】天気予報をHTML・CSS・Javascriptだけで作る目次概要開発環境の準備HTML/CSSを作成する(前編)HTML/CSSを作成する(後編)Javascriptを使って天気の情報を取得する画像を使ってイイ感じのデザインにする【応用編】地域を変更できるようにしよう今回のタイトルは長編になるためシリーズ化します。第一回の今回は、何をやっていくか説明していますので、興味を持っていただいた方はブックマークするなりお願い致します。

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

今日は昨日の続き、P47～77CHAPTER2HTMLとCSSのきほんを学ぼうのSECTION03CSSで見た目を整えようのCOLUMNショートハンドプロパティから同じCHAPTER2のCHAPTER04基本的なスタイル調整をしようのフォームのラベルを指定するー<label>までやりました。予定としては、「CHAPTER3スマートフォンのきほんを学ぼう」まで終わらすつもりでしたが、一昨日昨日と寝るのが遅かったせいもあり、作業中眠くなってしまい、あまり集中でき

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

pyxelにはhtmlに変換してブラウザ上で動かす機能があります。ところが、やってみるとhtmlファイルに変換されるんですが、実際に動かそうとすると「CLICKTOSTART」のクリック後にエラーが発生してゲームが起動しない場合があります。原因を調べてみると、pyxel以外のimportで取り込んだ機能がhtmlに変換する際に何かしらの不具合を起こしているみたいです。何が使えて何が使えないかまでは把握出来ていないんですが、少なくとも私の環境では七並べの場合は「random」と

HTMLでtextなどにid属性もしくはname属性をつけるけど、その違いを整理してみました。基本的な違いとして、そもそもidは重複しないnameは重複する可能性あり。<inputtype="text"name="DATA1"id="DATA1">となっているtextの値をjavascriptで取得したい場合(1)idを利用letdata1=document.getElementById("DATA1");//idは単一なので、返却も一つ(Element)(s

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

素晴らしいWebslidesWebSlides—MakingHTMLPresentationsEasyWebSlidesisabeautifulsolutionfortellingstories.Justtheessentials.Goodkarma.webslides.tvwebslidesを使ってみて、とてもいいことがわかりましたホームページのコンテンツに適用できますひとつ問題が利用できるコンポーネントがたくさんありますの

DownloadOrReadPDFTheArtandMakingofHogwartsLegacy:ExploringtheUnwrittenWizardingWorldFreeFullPagesOnlineWithAudiobookOverviewTheArtandMakingofHogwartsLegacy:ExploringtheUnwrittenWizardingWorldWallStreetJournal

今日のアメブロカスタマイズは記事を書くときにコピペだけで使えるdivの囲み枠のデザインをご紹介します！目立たせたい場所や見出し、お知らせ、サイドバーなどにお使いください。どのテンプレートをご使用中でも使えます。以下サンプルから使用したい囲み枠を選んでHTML編集囲み枠コードをコピーしてお使いください。初心者Tips!-----------------------コピペする場合は必ずブログ記事を『HTML表示』編集にして貼り付けてくださいね。-------

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

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

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

MoonWolf（むーんうるふ）です。今回の記事は、これからプログラミングを始めてみたい人向けの記事です。コンピュータ・プログラミング言語と一言でいってもたくさんあります。コンパイル型言語：（最終成果：実行ファイル）C言語、C++、C#、Rust、Go、Lazarus(Pascal)[さららす]、Delphi(Pascal)[でるふぁい]インタープリター型言語：（プログラムコードを一行一行実行）Pytohn（ぱいそん）、Ruby、Perl、JavaScri

基本的なアプローチは、スプレッドシートの現在の行数を特定し、その後に新しい行を追加することです。以下に、そのための簡単なスクリプトを示します。目次末尾に行を追加する(insertRowAfter)シート名を指定する末尾に行を追加する(appendRow)カスタムメニューを追加するまとめ末尾に行を追加する(insertRowAfter)スプレッドシートの最後に新しい行を追加します。functionaddRowToEnd(){varsheet=Spreadsh

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

【やらかした】アメブロ本文に「Pick」などで、アフィリエイトを挿入すると下の写真のように縦に並んでしまう。スマホはこれでいいのだろうけど、パソコンだと。。。横に並べたいなあ。きっかけは、その程度の理由でスタート！ところで、みらい（私）は、ハードいじりは大好きなので、少々の知識は普通の人よりはある方だとおもっているのだけど、ソフトウェア関係は。。。嫌いではないが、せいぜい他の人の記事を探して、実行するくらいエンドユーザーレベル横に並べるくらい、難しい話ではない

こんばんは！難病フリーランスの圭介です僕は、指定難病である「アジソン病」、及び「下垂体前葉機能低下症」を抱えながら、フリーランスとして働いています。最近、行動のコツだったりAIの話だったりが続いたので、今日はアメブロの記事で使える技術について紹介します。HTMLとCSSを使うので少し難しそうに聞こえるかもしれませんが、コピペで簡単に実装できるのでご安心ください。「必要だったらコピペしよう」くらいの軽い気持ちで読んでみてください目次記事に目次を