自作のCSSコミックを紹介するcomiCSSをリリースしたよ
Original article:https://dev.to/alvaromontoro/introducing-comicss-1amh 以下はCSS大好きエンジニアAlvaro Montoro( Twitter / GitHub / Youtube / dev.to / Webサイト )による記事、Introducing comiCSSの日本語訳です。...
View ArticleGopherくんの動く壁紙を作ったｗｗｗ
動く壁紙とは？ Windowsでゲームをプレイする方なら知っているかもしれませんが、Wallpaper Engineという壁紙を設定するアプリがあります。(Steamで300円程度) このアプリでは、自分好みの壁紙をダウンロードしたり、自分で壁紙を作成することもできます。 そして壁紙として登録できるのは画像だけでなく、動画やUnityで作成したプログラムなんかもあります。 Wallpaper...
View ArticleCSSだけでPinterest風レイアウトを作る
概要 Pinterestっぽいレイアウトを実装する 高さが異なるカードを縦方向に敷き詰める 今回は2列で、左右の高さを不揃いに並べる Masonryレイアウトとも呼ばれているらしい 参考 : ピンタレストっぽいMasonryレイアウトをCSSだけで簡易的に実現する | blog.ojisan.io 失敗例 (実行結果が見にくいのでCodePenに移動するか下部の「0.5x」ボタンを押してください)...
View ArticleドットインストールでCSS 変数編をやってみた
ドットインストールCSS 変数編です 要点だけまとめてみたので、後で振り返り用としておきます CSS変数とは スタイルにおいて同じ値を一箇所で管理することが出来る仕組み ※最近導入されつつある機能なので、 caniuse.com というサイトでブラウザの対応状況を見ておく 変数の宣言時のルール 必ず--から始める var()関数を使って、そちらに変数名を渡してあげる...
View ArticleWindi CSS (カラー)
Windi CSSを使用するに当たって、見やすくまとめてみました。 Colors(色) pink(ピンク) 50 #fdf2f8 100 #fce7f3 200 #fbcfe8 300 #f9a8d4 400 #f472b6 500 #ec4899 600 #db2777 700 #be185d 800 #9d174d 900 #831843 rose(ローズ) 50 ＃fff1f2 100...
View ArticleHTML5のアウトラインを理解する方法
はじめに 何年前に読んだか記憶にないくらい昔「HTMLのアウトライン意識してますか？ - QiitaのSEO事情」を読みましたが「HTMLのアウトライン 何もわからない」でした。 分からないことが何年も気になっていました。最近になってHTMLが分かるようになってきました。HTMLのアウトラインが分かるのではないかと思ってHTML仕様書などを見て学習しました。学習を通して多くのことを学べました。...
View Articlecssとjavascriptで軽度なアニメーションを実装してみよう！
はじめに こんにちは！GrowGroup株式会社の岩内と申します。 こちらの内容はcssとjavascriptを使って軽度なアニメーションを実装する内容となっており、 「アニメーションでどんなことができるのか」というイメージを掴んでいただくというのが今回の趣旨です。 ですのでエンジニア向けというより、ディレクター、デザイナー向けです。 後半で実際に手を動かします！ 下準備 vscodeのダウンロード...
View ArticleドットインストールではじめてのJavaScriptをやってみた
ドットインストール はじめてのJavaScript編です 要点だけまとめてみたので、後で振り返り用としておきます JavaScriptを書いてみよう JavaScriptを書ける場所 Script タグの場合 body の中身を読み込んでから、それらの操作をする処理を書くことが多いので、 body の閉じタグの直前に書くのが一般的 'use strict'; 厳密なエラーチェックをしてくださいね...
View Article自分なりに最適化したSCSS
2年の間ほぼ毎日SCSSを書いていたので、備忘録みたいな感じで自分なりのSCSSを書いておきます。 使用する想定はWordPressの場合です。 必要ファイル _reset.scss _variables.scss _mixin.scss _base.scss common.scss 最低限用意するファイルは上記の通りです。 _reset.scss...
View Articleプログラミング初学者や個人開発未経験者にこそお勧めしたいchrome拡張機能開発
dアニメストアでウォッチパーティーをする拡張機能を公開しました 唐突に宣伝から入ってしまい申し訳ないのですが、dアニメストアでもオンラインで友人と同時に視聴（ウォッチパーティー）を実現するChrome 拡張機能『d-party』を公開しました。 chrome ウェブストア 開発リポジトリ 私含めアニメオタクの多くが加入しているdアニメストアですが、...
View ArticleGoogle reCAPTCHAの中央寄せ
Google reCAPTCHAを設置しようとすると、 <div class="g-recaptcha" data-sitekey="" data-callback="" data-expired-callback="" style=""></div> こんなようなソースを貼れと言われる。...
View Articlecssのcalcが動かない時
解決策 ✖️：min-height="calc(100vh-200px)" OK：min-height="calc(100vh - 200px)" 空白が重要みたいです
View Article【Laravel】Web開発初心者が1週間で入門チュートリアルを実施した記録(1)~(3)
実施したのは、以下。 2018年の記事だが、少しの読み替えで問題なく稼働するTodoアプリを作成することができた。 Laravelの概観を掴むことができたので、筆者のMasahiro Haradaさんには感謝しかない。 自身の備忘とこれからLaravelを学んでいきたいというかたの参考になればと思い、ここに記す。 入門Laravelチュートリアル (1) イントロダクション...
View ArticleIT業界1年目のコーダが使ってみて、作業効率爆上がったと感じたおすすめツール
IT業界に未経験から入って早1年程。。。 未だにマークアップくらいしかまともに出来ないぺーぺーぱーぱーが、おすすめするツールやサイトをまとめました。 使ってみると喉にささった魚の小骨が取れるくらい、スッキリしながら作業進められますよ！(??) 参考にしているサイト エラーの英文読めない！ 公式ドキュメントオール英語読めない時はコピペ翻訳です笑 google翻訳より好き deepl...
View ArticleJsでボタンを押して文字を入力する方法
はじめに こんにちは！web系エンジニアを目指いしているLionです。 最近Laravelを使ってwebアプリを作っているのですが、ユーザーに文字を打ち込んでもらうのは面倒だし検索にも引っ掛かりにくい感じたのでボタンを押して入力できるものを作成いたしました。 insertAdjacentHTMlを使った方法 JsのinsertAdjacentHTMl("位置", '入れたい文字');...
View Articleiphoneアイコンの角丸半径 対応表
iphoneのアイコンの角丸をcssで表現しようとすると border-radius: 27px; とかじゃキッチリ同じにはならないそうです。 .smooth_corner_r27 { background: ...; border-radius: 27px; } @supports (mask-image: paint(smooth-corners)) { .el.is-loaded {...
View Article【Laravel】Web開発初心者が1週間で入門チュートリアルを実施した記録(4)
以下の続き。 フォルダ一覧までは作成できた。 ■(1)〜(3)の復習： ・環境構築と設計 ・開発のざっくり流れ ①ルーティング設定(web.php) ②コントローラーの作成・記載 ③マイグレーションファイルの作成・記載 ④マイグレーションの実行 ⑤モデルクラスの作成 ⑥テストデータの挿入 ⑦コントローラーの追記・修正 ⑧テンプレートの作成 ・ルーティング設定(web.php)の記載方法...
View Article【３日目】電卓の見た目にこだわる
１．本日の課題 今日は前回までにできた電卓を普通の電卓のように近づけるためにHTMLとCSSを活用する。 レイアウトはCSSのFlexboxとgridをどちらとも調べて実装してみてという指定があった。 まずは前回のプログラムを修正し、Flexboxとgridを試してみる。 HTML <html> <head> <title>電卓</title>...
View ArticleBootstrapをモバイル端末で見たとき小さくなる時の対処法
症状 スマホなどの端末で見るとアイコンが小さくなる。 解決法 before <head> <meta charset="UTF-8"> <title>〇〇〇</title> <link rel="stylesheet" href="/resources/css/bootstrap.css"> <script...
View Articleフロントエンドにおけるコンポーネントとは
TL;DR ついこの間。 ジュニアのマークアップエンジニアの話を聞いていて、 「意外とこの基準わかりづらいものなんだな」と思ったので、 ここ最近身につけた知識ベースで、直感的ではなくなるべく言語化する形で 「コンポーネントとはなんぞや」 「その粒度について」 示しておこうと思いました。 本題 コンポーネントとは コンポーネントとは、部品、成分、構成要素などの意味を持つ英単語。...
View Article