Clik here to view.
RailsでCSS読み込もうとしたらエラー吐かれた
やろうとしたことRailのビューファイルは、デフォルトでそのコントローラのCSSファイルを読み込むようになっているが、別のCSSを指定したくなった。吐かれたエラーそこで、<%= stylesheet_link_tag 'post'...
View ArticleWEBサイト制作
WEBサイト制作に役立つコードを記述・コピー&ペーストで使用可能・本ページの記述は全てモバイル端末を優先としている(レスポンシブでPCにも対応)・学習するとともに随時更新を行うHTML StartUphtml制作に必要な初期テンプレート使用可能：jQuery, bootstrap, fontawesome, googlefonts<!doctype...
View ArticleClik here to view.
「JavaScriptでゲーム制作」 蛇口を作ってみる。「作業おばけ」
今回はHTML,CSS,JavaScriptを使って「蛇口」を作ります。実際に動作するサンプルはこちら...
View Article[jQuery]押下したボタンのページ内リンクに飛ぶ。
押下したボタンのページ内リンクに飛ぶご覧いただきありがとうございます！ jQueryを使用してページ内リンクへ飛ぶソースコードについて解説していきます。まず、全体のコードがこちらです。 $(function(){ $('header a').click(function(){ var id = $(this).attr('href'); var position =...
View Articleプログラミング学習スタート！
大学３年生をしています、あんぬです！自分でWEBサイトを作れるようになりたくて、プログラミングを勉強することにしました！QUIITA では、ラフに、その日に勉強したことをアウトプットしていこうと思います！今日は、ドットインストールで、HTML/CSSの学習環境を整えました！VS code がちょっと分かっただけで感動してます。（笑）これからレベルアップしていきます！えいえいおー
View ArticleClik here to view.
html,css,javascriptで文字数計測器を作る「作業おばけ」の記事
はい、どうも皆さんこんにちは〜「作業おばけ」です。今回は「文字数計測器」というものを作っていきます。実際の動作サンプルはこちら https://www.o--o.cf/それでは早速ソースコードを載せます。<!doctype...
View ArticleClik here to view.
[メモ]1文字ずつスライドして現れるCSSアニメーション
概要CSSアニメーションでこんな動きを実現したい。実装1文字ごとにアニメーションさせるため1文字ごとに要素を区切る。空白から文字をスライドさせるためspanを2重にしている(後述)。<pclass="animation"><span><span>A</span></span><span><span>N</spa...
View ArticleClik here to view.
CSSとJavascriptで縦書き多段組み表示
日本語は縦書きの方が読みやすそうだし、新聞や雑誌のような感じで表示できないかと模索してみた結果と問題点。デモ・ソースコード： - CodePen - React版 ( ソース...
View ArticleClik here to view.
overflow-wrap: break-word; や word-break: break-all; が万能の改行処理だったなら、こんなに苦労していない
はじめに今回解決したいのはこれです。「overflow-wrapかけたのに改行されないしテーブルwidthもなんか勝手に伸ばされちゃってる問題」です。こんなんHTML /...
View ArticleClik here to view.
jQueryでドラッグ＆ドロップで画像ファイルをアップロードするフォームをつくりました
1週間前のjQueryよくわかってない自分に向けて書きます。参考にさせていただきましたいまさらHTML5 （FileAPI編） - Qiita意外と知らないHTML5 API - Drag & Drop APIとは | CodeGridWeb アプリケーションからファイルを扱う - Web API | MDNDragEvent - Web API |...
View ArticleClik here to view.
サイトに別のサイトを埋め込むの使い方 「作業おばけ」の記事
HTML要素の一つであるインラインフレームを使えば簡単にサイトに別のサイトを埋め込むことができます。動作サンプルはこちら https://www.o--o.cf/ソースコード<!doctype...
View Articleランダム色を60fpsで表示して暴走族のカスタム車っぽい文字を作る
皆さんこんにちは、作業おばけです。語彙力がなくてタイトルが変になりました。。。笑今回作ったのはランダムで色が変わる文字プレートです。実際に動作するサンプルがありますので、こちらを見たほう早いかと思います。 URL https://www.o--o.cf/ソースコード<!doctype...
View ArticleHTML CSS アイコン 要素の透明化
HTML上でTwitterなどのアイコンを表示する方法HTML上でTwitterやFacebookなどのアイコンを表示するにはFont Awesomeというものを使用します。使用方法の手順としては、まず初めにhead内でFont...
View ArticleClik here to view.
Bloggerのテーマ編集をXMLではなくHTMLで編集する方法
はい、どうも皆さんこんにちは〜「作業おばけです」XML編集ってコードの最後にバックスラッシュが必要で面倒ですよね笑そこで、「Bloggerのテーマ編集をXMLではなくHTMLで編集する方法」を紹介します。やり方はとても簡単です。１左サイドバーの「テーマ」というところをクリックします。２画面右上の縦点をクリックします。３「クラシック...
View Articleタグとタグの違いを超簡潔にまとめてみた「作業おばけ」の記事
簡潔にまとめてみた。<b>タグと<strong>タグどちらも全く同じ見た目しかし検索エンジンは<strong>タグを重視する<strong>タグが使われているところは重要なものだと判断する※<strong>タグを多用しすぎるとペナルティを受けることがある作業おばけのWEBサイト https://www.o--o.cf/
View Article一番簡単なリセットCSS 「作業おばけ」の記事
忘れないように覚え書き<style>*{margin:0;padding:0;}</style>ちなみにこのリセットCSSはすべての要素をリセットするので動作が重くなるらしいです。作業おばけのWEBサイト https://www.o--o.cf/
View ArticleClik here to view.
30分で瞬発的にコーディングする。(メモ)
背景朝にカフェで勉強などしているんですが、気分が乗らなかったので30分という時間制限でコーディングをしました。そこでの気付きをここにまとめておきます。目標これをCSSに実装元Tweethttps://twitter.com/InfinityLoopGIF/status/1221289968099823616?s=20結果こちらになります。色々未完成…Codepen See the Pen half...
View Article