シングルクラスとマルチクラスのメリット・デメリット
順次更新予定シングルクラスメリットスタイルの適用範囲がわかりやすい視認性が良い詳細度が高くなりにくいデメリットコード量が多くなるデザインを変更するときは新たにコードを追記する必要があるマルチクラスメリットコード量が少なくなる設定を用意していれば、クラスを追加することでデザインの変更が可能デメリットスタイルの適用範囲がわかりにくい視認性が悪くなりがち詳細度が高くなりやすい（例：.bg-redが.btn...
View ArticleJSとCSSを使って文字をサインカーブさせる「作業おばけの記事」
今回作ったやつの動画を載せました。https://t.co/8v5gnoRuTYpic.twitter.com/BQ9qy8veEe— 作業おばけ@プログラミング学習中 (@oocf8) January 29, 2020ソースコード<!doctype...
View ArticleHTML5プロフェッショナル認定試験レベル1でHTML5を学んでみた
はじめにHTML5プロフェッショナル認定試験のレベル1に合格しましたのでメモをまとめておきます。受験の動機ここのところフロントの開発をすることが少なく、知識のアップデートができていなかったので、勉強がてら取得を目指しました。試験概要試験概要や試験範囲は以下です。試験概要｜Web資格なら「HTML5プロフェッショナル認定試験」公式サイト試験時間80分で60問のため、厳しそうに感じますが、数秒で判断でき...
View ArticleClik here to view.
CSS Flexbox / Grid layout チートシート
FlexboxとGridを使うとき、ちら見できるようなチートシートを作成してみました。手元に置いておくと便利だと思います。Flexbox 日本語版チートシートFlexbox cheat sheet / English versionGrid 日本語版チートシートGrid cheat sheet / English versionPDF版については作成中のブログに掲載する予定です。
View ArticleClik here to view.
コピペで簡単、html+cssだけでLoadingグルグルマソを実装する方法
概要JavaScriptを使わずにコピペで済んでhtml+cssだけのLoadingグルグルを実装したい？・・・あるよ投稿しようと思ったきっかけ業務でLoading画像にグラデーションしたいって言われて勿論IE対応なのでfilterやmask-imageは使えない為...
View Articlepointer-events: none と cursor: not-allowed を同時に使う
やりたいこと一部機能の提供廃止に伴い、既存のボタンをクリックできないようにする。また、そのボタンがクリックできないことを視覚的にもわかりやすくしたい。最初に調べたこと/やったことボタンのクリックをできなくする pointer-events: noneというCSSを使えば一発らしい。（JSかなんかでやると思ってた）クリックできないことを視覚的にわかりやすくする cursor:...
View Article簡単にできる！Canvas要素を使ったデジタルアート「作業おばけ」の記事
「HTML,CSS,JavaScriptでデジタルアートを作りました！」僕のパソコンのスペック不足で多少カクカクしていますが、見れないほどではないです笑30秒程度の動画ですので見てみてくださいm(_ )m ↓↓↓↓↓↓↓↓↓↓↓→https://t.co/JqO3xPuB3W← ↑↑↑↑↑↑↑↑↑↑↑ pic.twitter.com/KjRFpGoBn0— 作業おばけ@プログラミング学習中...
View ArticleJavaScriptで複数の四角形を使ったデジタルアートを作ってみた「作業おばけ」
こんにちは〜作業おばけです。１６８０万色の四角形を使ってデジタルアートを作った。 ↓↓↓↓↓↓→https://t.co/JqO3xPd0co ← ↑↑↑↑↑↑ pic.twitter.com/ilR7q5UevA— 作業おばけ@プログラミング学習中 (@oocf8) January 30, 2020ソースコード <!doctype...
View Articlejavascriptのキー入力で図形を動かす方法 作業おばけ
みなさんこんにちは〜作業おばけです。JavaScriptのCanvas要素を使ってキーボードで図形を動かす。↓↓↓↓↓↓https://t.co/JqO3xPuB3W↑↑↑↑↑↑ pic.twitter.com/pXUD1Fr0SP— 作業おばけ@プログラミング学習中 (@oocf8) January 30, 2020ソースコード<!doctype...
View ArticleClik here to view.
たまにはCSSについて考えてみる(簡易アニメーション編)
はじめにCSSはWEBページを作成する際に必要不可欠なものです。多くの方はHTMLとセットでCSSも学習したと思います。文字の色や大きさを変えるなどのシンプルな使い方はプログラミング初学者の方でもとっつきやすいですが、少し複雑な装飾(アニメーション等)を実装するとなるとかなり難しいように感じます(少なくとも私は)。幸いにも最近では少し調べればコピペで使えるコードがネット中に溢れかえっているので、実装...
View Article単純なコードで作るCanvas要素を使ったデジタルアート 作業おばけ
pic.twitter.com/qK5JtXR7d7— 作業おばけ@プログラミング学習中 (@oocf8) January 31, 2020<!doctype...
View ArticleProgate 上級編
今回はProgateでHTML css の上級編と道場コースもやりました。学んだ内容はレスポンシブデザインについてです。内容自体はそんなに難しいものではなかったです。具体的にはメディアクエリやフロートを消すことなどをまなびました。
View Articlefilter: drop-shadow() の影を濃くする
透過pngにもオブジェクトの形に沿ってドロップシャドウをかけてくれるdrop-shadow()関数。ただ、ぼかしを1〜2px、影の色をblackにしても「なんかちょっと弱いな」と感じることがあったので、もっと濃くできないか調べてみた。https://developer.mozilla.org/ja/docs/Web/CSS/filterどうやらfilterは組み合わせて使えるらしい。なのでdrop-...
View Article駆け出しマークアップエンジニアのためのWebサイト制作フロー
はじめにこの記事を書いた背景TwitterなどのSNSを眺めていると、副業もしくは転職のために、プログラミングを勉強されている方が増えている印象を受けます。（自身がエンジニアの方を多くフォローしているからかもしれませんが）そのような方向けに、プログラミングスクールやオンラインスクール、オンラインサロンも充実しており、独学で技術を身に着けるハードルは年々下がってきています。ただ、もちろんそれらのサイト...
View ArticleClik here to view.
【初心者向け】Bootstrapを使って簡易的なWEBサイト作成してみた。
Bootstrapの特徴？使用するメリットとは？実際にBootstrapを少し使用してみた感想としては、（前提条件：ある程度html、cssの知識がある前提で）・Wordpress並みに便利・記述の仕方によっては、メンテナンス性と可読性が良くなり、CSSの記述量が減るとにかく便利！使える部分は使い倒していきたいなと思いました。学習用に参考にさせて頂きます。たにぐち先生（やはり動画、めっちゃわかりやす...
View ArticleClik here to view.
background-imageの取り扱い一覧
HTML、CSSでdivを作成して、そのdivの背景にimageを入れたいときってありますよね。でも、ぴったりサイズの画像だったら良いんですが、、、大体の場合は全くぴったりじゃなくて、表示させてい部分そこじゃないよ！ アップ過ぎるよ！...
View Article30代からの留学、転職そしてPyhon系エンジニアへ
30代からの留学、そして希望職のエンジニアへ転職した話初めまして！ここでは高卒30代のクレーン運転士がどの様にしてエンジニアへ転職したか書いていきます！そして私の様な、割と今までのほほんと生きてきた人でもエンジニアになれるかもと思って頂けたり、同じ道を選んで学習している人に勇気を持ってもらえたら嬉しいです。自己紹介私は昨年の６月に10年以上働いていた会社を退職して、10月から12月末までフィリピンの...
View Article初心者によるプログラミング学習ログ 226日目
100日チャレンジの226日目twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。すでに100日超えましたが、継続。100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。226日目はおはようございます226日目・youtubeみながらjavascriptでおみくじアプリ作成・htmlとcssで、skillbar作成#早起きチャレンジ#...
View ArticleClik here to view.
意図的にfloatを利用する
プログラミングを学び始めた頃、横並びにするプロパティとしてfloatを学びました。実際にコードを書くとビューがよくわからなくなった。こんな経験ありません？僕は経験しました。そこでfloatに対する苦手意識みたいなのがつき「float使うならflexboxでしょ」みたいな感じでfloatを使ってきませんでした。今回、ポートフォリオサイトを使う際に意図的に使う機会がありfloatに対して苦手意識がなくな...
View Article
