メインカテゴリーを選択しなおす
【JavaScript】カラフルなオリキャラをランダムに描画する
こんにちはです。あっちのそららです。前回、HTMLとCSS(ウェブ制作などで使う言語)で、オリキャラを描画しました。 acchinosorara.hatenablog.jp 今回はそのアレンジで、大量のオリキャラをランダムに描画するコードを書いてみました。「Result」で確認、右下の「Rerun」で再描画できます。描画はランダムなので、毎回違った結果になります。 See the Pen Fairy-rain by あっちのそらら (@acchinosoraranocode) on CodePen. JavaScriptで乱数を生成、かつ値が被らないようにし、下記内容をランダムに設定しています…
【WordPressなどで使えます】スライムが現れたけど、触ったら逃げ出すソースコード!
WordPressのブログや、ホームページなどに、スライムを登場させるソースコードです。HTML,CSS,JavaScript、遊びで書いた簡単なコードですが、興味が沸いたらコピペして使ってみて下さい。
【WordPress】CocconでYouTube動画がサイズ変更できない?ときの追加コード設定!
YouTube埋め込み動画のサイズ変更が出来ねー!解説ブログと同じにやってるのに上手くいかない!と困り果てた末に、やっと辿り着いた解決方法です。
https化ってなんじゃい???常時SSL化ってなんじゃい???これってどっちも同じ意味なんですね。httpはセキュリティに良くないらしく、みんなhttpsになっていってるんだってさ。って事でライブドアの無料ブログもhttps化してみました。
【CSSイラスト】発光するオリキャラのアニメーションを作ってみた
こんにちはです。あっちのそららです。今回は、HTMLとCSS(ウェブ制作などで使う言語)で、オリキャラのアニメーションを作ってみました。「Result」で確認できます(レスポンシブ対応済)。 See the Pen Shine-Fairy by あっちのそらら (@acchinosoraranocode) on CodePen. アニメーション用の正円を作り、大きさや不透明度を徐々に変化させることで、発光を表現しています。また、正円は同じものを3つ重ね、各々のアニメーション開始のタイミングをずらし、波紋のような動きにしました(下記参照)。 正円1のアニメーションを開始 正円1の開始から0.3秒…
CSS(スタイルシート)を更新したときにキャッシュを自動で読み直すために対応した話
今回はCSSファイルを更新したときにだけ、最新のCSSを読み直させるための対策をご紹介したいと思います。
Googleカレンダーをサイトに表示させる方法。-その1-デフォルトタイプ
今回はGoogleカレンダーをサイトに表示させたいというご要望を頂きましたので、マニュアル代わりに記事として公開させて頂きたいと思います。
備忘録 CSSだけでSPの時はアコーディオン風でPCの時はタブ切り替えを実装する方法
CSSだけでSPの時はアコーディオン風になり、PCの特はタブ切り替え風になる方法をご紹介したいと思います。
このページでは、HTMLとCSSのみで要素の表示非表示をクリックやタップで切り替えられる方法についての覚え書きをまとめています。 デモはこんな感じ。 DEMO 映画やゲームの感想...
こんにちはです。あっちのそららです。今回は、HTMLとCSS(ウェブ制作などで使う言語)で、雪うさぎのアニメーションを作ってみました。「Result」で確認できます(レスポンシブ対応済)。 See the Pen Snow Rabbit by あっちのそらら (@acchinosoraranocode) on CodePen. CSSのアニメーション機能(@keyframes)で、下記の処理を順に実行させています。 雪うさぎを画面外に配置(スタート位置) 雪うさぎの縦位置を移動し、落下を表現 雪うさぎの縦横比率を交互に変え、着地時のぷるぷる感を表現 雪うさぎの横位置を移動+角度を変更し、転がり…
ウェブページは、「表」と「裏」でできています。ブラウザに表示されるウェブページが「表」ならば、HTML文書は「裏」です。ホームページの作成は、「表」のウェブページを「裏」で作成していくこと、つまり「タグ」を使って文字や画像などを「表」に表示させていきます。ところが、中にはウェブページに表示する役割がないタグもあります。
前回は、「誰でもゼロからホームページを作成することができる」という概略を説明しました。本来ならすぐにウェブページを書き始めたいところですが、事前準備をしなければせっかくのホームページがめちゃくちゃな構造になり、訪れたユーザーが迷子になってしまいます。そこで、最初にホームページの「設計図」を書いて全体の構造を把握します。
はてなブログで、カスタムしたHTMLやデザインCSSを間違って消してしまい、バックアップも取っていなかった…というミスをしたことはありませんか? はてなブログにはこれらのソースコードを復元できる機能がないため、バックアップがなければ一からコードを書き直す必要があります。そんなときには、Google検索の「キャッシュ」を使うと復元できる可能性があります。
初心者のためのHTML入門ガイド:HTMLの基礎をホームページを作成しながら勉強しよう
初心者向けHTMLガイドで自作ホームページの作成やホームページのカスタマイズに挑戦しませんか?HTMLの基本的な作法やタグの説明から公開方法まで、手順を追ってご紹介します。一緒にデジタルスキルアップを目指しましょう。
WordPress上のリンクをクリック中に現れる黒枠を消すCSS設定
WordPress ブログ内の テキストリンク をクリックしている最中、 黒い枠 が現れるようになりました。ブラウザに依らず発生するこの黒枠を、どのブラウザでも消えるような CSS 設定を調べてみます
WEBサイトを印刷した時、改行の位置が思った通りにならないことはありませんか?このページでWEBページの印刷時に、指定した位置で、文字を改行させる方法についてご紹介しています。
こんにちはです。あっちのそららです。今回は、HTMLとCSS(ウェブ制作などで使う言語)で、オリキャラを描画してみました。描いたのは、うちの子「ナムナムくん」。「Result」でイラストを確認できます(レスポンシブ対応済)。 See the Pen namunamu by あっちのそらら (@acchinosoraranocode) on CodePen. 単調なデザインと甘く見ていましたが、どっこい。パーツの多さもあり、頭が痛くなるコード量に。特に髪は、地味に複雑な形のため、なかなか思ったとおりにならず悩みました。髪と口は、複数の円を組み合わせ、一部分を消すことで、一つの線に見えるようにしま…
こんにちは。 今回の記事ネタはHTML。HTMLっていうのはWEBページ上の文書の構造を書いたものでページの元になっているもの。ブラウザにchromeを使っている人ならページの上で右クリック→ページのソースを表示と選ぶと表示されるやつです。はてなブログで記事を書くときはHTML編集という項目から編集ができますね。それからブラウザゲームもHTMLだったりします。 今回このHTMLを編集することでブログの文章を2列にしてみます。 ※一応の注意書き。HTML・CSSはプログラミングではありませんがJavaScriptに関係するので当サイトでのカテゴリーはプログラミングに分類しています。 ブログサイト…
Webデザイン初心者がprogateのHTML&CCS初級編をやってみた感想【Webデザイナー入門日記#1】
こんにちは、星ノ宮です! 皆さんはprogateというサイトをご存じですか? 私はつい最近まで知らなかったのですが、どうやら無料でWebデザインのコーティングについて学べるなんとも素晴らしい代物らしく、 「こりゃあやるっきゃねえ!」 と意気
こんにちは。 ここ数日はオンラインイベント(クリエイターズ文化祭)に向けて専用ページを作成してます。って言っても大したもんじゃなくて出展するものの説明だったり挿し絵を載せてるだけのフツーのページなんですけどね。 その作成ページでやってみたことをネタにします。 やってみたことは背景の変更です。ブログに慣れた人にとっては当たり前のことかもですが、まぁ知らない人は知らないだろうし一応メモ的な感じで(´・ω・)b ※一応の注意書き。HTML・CSSはプログラミングではありませんがJavaScriptに関係するので当サイトでのカテゴリーはプログラミングに分類しています。 まず はてなブログの場合、背景画…
可愛いデザインの囲み枠の作り方!CSSとHTML簡単コピペでオシャレに作れる
サイトやブログをオシャレにしたい方の救世主は、おしゃれなデザイン囲み枠や可愛い囲み枠です。少しポイントで使うだけでも、読みやすくなったり目を引き付ける役目があります。WordPressの囲み枠をオシャレにしたいけど、初心者には難しいと諦めて
WordPressおしゃれな点線ドット囲み枠をCSSコードをコピペで作る
WordPressの文章を彩るブロック、囲み枠・装飾枠はどうやって作るの?wordpressをオシャレにしたいのに出来ない方の必殺技!かわいい囲み枠をコピペで作ろうです。CSSのコードをコピペするだけなので、初心者さんにも簡単にできます。オ
【HTML】戻るボタンでブラウザバックをする方法と次のページに進む方法
この記事ではHMTLでブラウザの戻る機能をボタンに実装する「戻る」ボタンや「次へ」ボタンを作成する方法をご紹介しています。戻るボタンはお問合せフォームの確認画面等でよく見かけますが、作成自体は簡単ですのでご興味のある方は是非お試し下さい!
こんにちはです。あっちのそららです。今回は、HTMLとCSS(ウェブ制作などで使う言語)で、夏にピッタリなひまわりの花を作ってみました。「Result」でイラストを確認できます(レスポンシブ対応済)。 See the Pen Sunflower by あっちのそらら (@acchinosoraranocode) on CodePen. 今年、CSSで三角関数がサポートされたので、試しに花びらの部分に取り入れました。三角関数の表現のひとつとして、要素を円周上に並べることができます。以下、今回の三角関数の工程をざっくり解説します。まずHTMLで、花びらの数に応じた番号を付与します。今回は10個なの…
cssで3D & 回転Design コードを確認&コピペできます。
デザインで遊んでみました。このままの形で実際に、使うことが少ないかもしれませんが、ややこしい部分はHTMLと.cssのSource Codeをご覧いただけま…
誰でも無料でホームページが作れます|ゼロからのホームページ作成#1
今はほとんどの会社やお店が、ホームページを持っています。また、新たに起業した方やお店を開店した方にとっては、広く認知してもらうため必須のものです。実は、ホームページを作ることは、そんなに難しいことではありません。無料のツールで、誰でもホームページを作ることができます。
色見本・RGB値とHTMLカラーコード-Easy App for converting RGB to Color codes
HTMLやLaTeXなどを使っているとフォントやグラフの色指定でHTMLカラーコードによる色の調整が必要な場合
影で表現力UP!CSSシャドウのデザインテクニックまとめ【box-shadow】
CSSのbox-shadowプロパティは、要素に奥行きや立体感を加え、デザインをより魅力的にすることができます。影の位置や強さ、色などを調整することで、ウェブアプリケーションやウェブサイトに現代的な雰囲気を持たせることができます。
【CSS】改行の位置は指定したいけど出来れば一行に表示させたい
画面幅を縮めるとボックスの幅も同時に縮まり、ボックス内のテキストが折り返してしまう。改行タグ<br>を使ってもいいんだけど、画面幅が広ければ出来れば改行してほしくない。改行禁止を使うとボックスからはみ出してしまう…でも、1文字だ
【初心者向け】CSSのbackgroundプロパティの基本backgroundは、CSSのプロパティであり、要素の背景に関連する設定を行います。Webデザインにおいて、背景の設定は非常に重要な役割を担っています。その中でもCSSプロパティの
display:flex; フレックスボックスを使ったWebデザインの基本
フレックスボックス(display: flex;)は、Webデザインにおいて広く用いられているレイアウト方式です。極めて自由度が高く、様々なレイアウトを実現できるため、多くのデザイナーにとってなくてはならない技術の一つと言えます。しかし、初
【CSS新機能】text-wrap: balance;テキストのバランスを自動調整用スタイルを試してみた。
参考記事 coliss.com2023年5月30日に安定版がリリースされたGoogle Chrome 114(セキュリティの脆弱性により2023年6月14日 Chrome 114.0.5735.133/134がリリース。)では、複数行のテキ
【CSS】グローバルメニューを2段にしてみる(; ・`д・´)
こんにちは。 最近3Dモデリングをちょこっとさわってみたことでブログのカテゴリーが増えました。 なのでトップ絵の下にあるグローバルメニューっていうやつにカテゴリーが入りきらなくなり、なんとかすることにしました(PC表示のみ)。 グローバルメニューに項目をたくさん入れる手段としてドロップダウンリストがありますが、それを使うほどの数でもないのでメニューを2段にするという選択をしました。 こういうWEBページのデザインを変えるのはCSSってやつをいじることになるのですが難しいんですよね(;´Д`) ちなみにCSSはプログラミング言語ではありませんがこのサイトでのカテゴリーとしてはプログラミングに分類…
数日前から適用しているのですが、記事ページに「更新日」を追加表示しています。これはJavaScriptとCSSを追加適用することで実現しています。たまに自分のブログの過去記事を見返すのですが、少し古くなった内容や、表現がイマイチだったものを見直して更新しています。ですが、更新日を表示していなかったので記事ページからは更新した旨が分からない状態でした。更新日を表示しているサイトにはちょくちょく遭遇していました。 なので自分のブログでも更新日を表示したいなと思い、対応してみました。ということで、変更内容や適用手順について書いていきます。
NFTゲームを開始しましたがプログラミングも学びたいと思い、ブログでも役立つHTML/CSS/JavaScriptの学習にPythonから変更しました。
HTMLの始め方と書き方について説明します。 HTMLはテキストエディタがあれば誰でもすぐに書き始めることができます。 書き方を覚えて自分だけのWebページを作成してみましょう!
4月がようやく終わりますね。 長かった…。 今年の4月はなんかやたらと長く感じました。 いつもは1ヶ月なんてあっっ!という間に過ぎるのに、 まだ2週間しか経ってないの!?と、月半ばで、 もう半年分ぐらい働いてんじゃね?と思ったりしました。 新人さんも入って来て、 いろいろ教えたり、コミュニケーションとったりして、 日々気疲れがハンパなかったですが、 きっと、世の先輩社会人の皆さまも、 同じようにお疲れだったのではなかろうかと思います。 4月、頑張りましたよね。 えらいよ、よくやった。Good Job わたし! さて、4月のブログを振り返りますと、 けっこうひとり言が多かったな~と。 しかも、 …
Visual Studio CodeでHTMLを瞬時に整形する方法
Visual Studio CodeでHTMLやCSSのインデントを整えるには、 option(⌥) + shift(⇧) + F を使います。これはMacのショートカットなので、Windowsの方は、Shift + Alt + F になります。
ブログカスタマイズの記事まとめ(CSS、JavaScript、デザインテーマ)
ブログカスタマイズに関する記事をいくつか投稿したのでまとめて見ようと思います。 カスタマイズ目線で自分のブログを見てみると、あっちも気になるし、こっちも気になる。みたいになってしまっていました。せっかくHTML5の資格を取得したので、、ということもあり。 ここ数日はブログカスタマイズが楽しくなっていました。それがちょっと落ち着いてきたので、一区切りとしてまとめてみようかなと。 とはいえまたどこかカスタマイズの余地がありそうなところ見つけたらすぐ適用して記事書きそうではありますが。 それではこれまでに投稿したブログカスタマイズに関する記事を挙げていきます。
数日前から適用しているのですが、強調したい部分のテキストを蛍光ペンみたいな感じにしています。これはCSSを追加適用することで実現しています。通常の太字や斜体でも目立たせることはできるのですが、蛍光ペンみたいな感じにすることでより強調できます。 ただなんでもかんでも蛍光ペンで強調するとポイントが散らかるので、最低限の使用に気を付けつつ。CSSによるカスタマイズはいくつか記事にしてるので、こちらも良ければぜひ。 カテゴリーリンクのデザインを変更してみる カテゴリーリンクのデザインを変更してみる(その2)
またしてもブログカスタマイズに関してです。数日前から適用していますが、デザインテーマをカスタマイズしてみました。 私はSilenceというデザインテーマを使用しています。ブログを始めてすぐ、テーマストアから好みのデザインテーマを探してSilenceに辿り着きました。 最初は「好みのデザインテーマが見つかった。よかったよかった。」で満足していたんですがSilenceのページをよく見るとカスタマイズに関するご案内が色々と書いてありました。 テーマストアで他のテーマも見てみたんですが、カスタマイズの案内があるかどうかはまちまちみたいです。自分のはたまたまカスタマイズの案内があってラッキー。といった感…
ちょっと前にカテゴリーリンクのデザインを変更したのですが、またしても変更してみました。ちょっと最近ブログカスタマイズが楽しくなってきてます。 そのうち落ち着きそうですが楽しいうちに色々と投稿してみます。今回のデザイン変更はこちらのサイトを参考にさせて頂きました。 ありがとうございます。 はてなブログで使えるアイコンフォント全125種 - フジブロっ!ではどんな変更をしたか書いていきます。
【わかりやすく解説/初心者用コピペ】横スクロールで画像をスライドさせる方法
✅実装例 HTML?CSS?わからない~ こんにちわ!(ゆう)です。 本日は「横スクロールで画像をスライドさせ