HTMLとCSSだけで描く簡単D言語くん(描き方解説つき)
はじめにHTMLとCSSだけで描いたミニマムD言語くんです。D言語くんは過去に様々な技術を使って召喚されていますが、こういった組み合わせで書いた例が見つからなかったのでチャレンジした次第です。ノードもスタイルも少なめで簡単な構成にしているので、CSSお絵描きの取っ掛かりになればと思います。申し訳のため、ポイント解説つきです。完成形かわいい(自画自賛)動作版はこちらです。Codepen...
View ArticleJSで簡単なゲーム作ってみた
今まで授業で習ってきた内容を活用して、JavaScriptで簡単なゲームを作ってみました。ゲームについてダウンロードこちらからダウンロードできます。https://drive.google.com/file/d/1zp9tvFvftziMUGV-gTdD2AS15D4vkZM9/view?usp=sharing「Game.zip」を解凍し、その中にある「index.html」を開くことで、ゲームをプ...
View Articleメディア特性を使用したhoverの設定
はじめに日常的にhover設定を使っていると思います。リンクにマウスを重ねた時の変化の設定です。a:hover{...}デスクトップやノートPCでは問題無いのですが、スマホなどのタッチデバイスでは問題が起こることがあります。それは、タップ後にhoverの効果が残ってしまうことです。aタグ(ハイパーリンク)で他のページへ遷移する場合は良いのですが、ページ遷移をせずhoverの効果を使用したい場合、この...
View Article緑と黒のチェック柄の羽織りアイコンをCSSで作る
できたものこういうものを作ります。作り方作り方を3ステップで解説していきます。Step1. チェック柄の背景を作る様々な方法がありますが、今回はconic-gradient(...
View Articleposition: fixed;で中央に揃える方法と、モーダル内の画像を縦最大に表示する
はじめにタイトルについて記事にしました。この記事で得る内容は以下の通りです。・ CSSの基礎知識が増える・ position: fixed;で中央に揃える方法・...
View ArticleCSSの基本的なところ
最初にカレンダー企画2020の6日目プログラミングの勉強を始めて3ヶ月程経ったので学んだことのメモをアウトプットとして記事に残します。これからプログラミングの世界に入る人の手助けになれたら嬉しい限りです。間違っていたり、言葉が違っていたり、表現が誤解されるような言葉があったら教えて下さい^^言葉を長々と読みづらかったら申し訳ありません。少しずつなれてがんばります。CSSの基本的なところCSSとは?C...
View Articleアイキャッチ画像のサイズ固定化をやめたい
はじめにWordPressのテーマ作成にあたってダミーの投稿表示しようとしたところ、アイキャッチ画像が思っていたように表示されなかった。原因はthe_post_thumbnail()第一引数にメディア設定のサイズをmediumやlargeなどの文字列で渡すことによって、設定の値をimgの属性に設定してくれる。the_post_thumbnail('medium')とすることで、メディア設定の中サイズ...
View Article走る!音が出る!HTMLでミニゲームをつくりました
会社非公式な感じの、シンプルなランゲームを作りました。https://hasegawa-campfire.github.io/fire-runner-san/こちらから遊べます。...
View Article::before擬似要素で間違いがちなポイント3選
::before::after擬似要素に関して誤りがちなポイントを3つまとめました。1. 擬似要素はどこに挿入されるか::after擬似要素について調べると、 * 「タグの直後に挿入される」 * 「要素の直後に挿入される」と解説している記事がたまにあります。が、これは誤りです。正しくは、 * 「要素の最後の子要素として挿入される」 *...
View ArticleVue.jsの基礎をまなぼう!
あいさつ初めての人は初めまして!知っている人はこんにちは!中学生バックエンドPGのAtieです!今回はVue.jsについて学んできたのでアウトプットします!「え?バックエンドがVue.jsをなんで勉強してるの?」これはフレームワークに慣れておくためとSPAを開発したかったからです実際Vue.jsを学んだ感想は少し難しかったですしかしコードがシンプルだったので読みやすく書きやすかったですでは!環境構築...
View Article知識ゼロでもHTML.CSSでアラートとボタンを作る方法
HTML.CSSのコピーアンドペースト手順の備忘録です。大枠な流れ・Bootstrap使い方まとめリンク先コピー:CSSのみheaderコピー:Components の Alertsボタンコピー:Components の Buttons全体の中央寄せ:Layout の containerボタン真ん中寄せ:Utilities の Flexスペースのバランスを整える:Utilities の...
View Articleレスポンシブ対応について
最初にカレンダー企画2020の7日目プログラミングの勉強を始めて3ヶ月程経ったので学んだことのメモをアウトプットとして記事に残します。これからプログラミングの世界に入る人の手助けになれたら嬉しい限りです。間違っていたり、言葉が違っていたり、表現が誤解されるような言葉があったら教えて下さい^^言葉を長々と読みづらかったら申し訳ありません。少しずつなれてがんばります。レスポンシブ対応って何?PCやタブレ...
View ArticleCSS:基本編
CSSについて考えるまずは自己紹介私は、およそ6年間のプログラマ経験のほとんどをフロントエンド開発をしてきました。そのなかで得た知識をアウトプットしようと思います。CSSとははじめにスタイルシート用の言語で、HTMLとセットで記述する。レイアウトや色付け、サイズの変更はもちろん、アニメーションだってできちゃうすごいやつです。...
View Article【Ruby】Railsを利用して画像にリンクを貼りたい【link_to】
背景Bootstrapを用いてリンクを装飾しようと意図したとき、適用されずあれ?ってなったので備忘録です結論「link_toメソッド内にclassを指定するオプションが存在した」事象そもそもなぜこの問題が起こったかですがa要素にclassを適用して、a要素の中にlink_toメソッドを記載していました。(以下のコード)問題のコードindex.hetml<aclass="nav-link"hre...
View Articleプログラミング用語辞典
インスタンスインスタンスという言葉と一緒に・クラス・オブジェクトの二つも出てくるそれぞれの意味はクラス・・・設計図インスタンス・・・設計図から実際に作ったものオブジェクト・・・クラスとかインスタンスをふんわりさせたものインスタンス化=new演算子で「newする」とも言うインスタンス化=実際にものをつくるメソッドメソッドとはプロパティに入っている関数の事であるvarsumple{プロパティ:値,プロパ...
View Articleマジミラ2020プロコンで使用したものまとめ1(背景)
概要相生葵の Advent Calendar 2020 7日目の記事です。初音ミク「マジカルミライ 2020」プログラミング・コンテストに参加したので使用したもののまとめ記事です。再生はこちらでできます。コードはこちらにあります。目次縦スプライト黒幕丸エフェクト1....
View Articleflexboxで作るレスポンシブ対応のwebサイトレイアウト
初めにこんにちは!Ateam Hikkoshi samurai Inc.× Ateam Connect Inc. Advent Calendar 2020の7日目は、最近コーディングをやる機会に恵まれているデザイナーの@futa_326がお送りします。本記事は、CSSの中でも基礎に当たりますが、レスポンシブ対応サイトをコーディングする機会があったので、...
View Articlenotion.soの横幅が狭い気がするのでなんとかした
notion.soを使い始めてみたけれど,横幅が900pxより大きくならず,表とかが見にくいので1200pxまで引き伸ばしてみた.アップデートが活発なのですぐ使えなくなりそうだけど..notion-frame>.notion-scroller>div:first-child>div,.notion-page-content{width:1200px!important;max-wi...
View Article