イイダリョウのブログ。CSSフロントエンド開発環境の続きです。前回はHTMLHintでHTMLの構文チェックしました。今回はAutoprefixerでCSSのベンダープレフィックスを自動で付けてみます。CSS構文チェック系の続きです。前回はESLintでJSコードの構文チェックを事始めました。今回はStyleLintでCSSコードの構文チェックを事始めます。JSフロントエンド開発環境の続きです。前回はESLintでコードチェックをしてみました。今回はコードフォーマッター「Prettier」でコードの整形をしてみます。JSだけでなくHTML、CSSなどもできるみたい。CSSGulpの続きです。前回はHTMLテンプレートエンジンのEJSをコンパイルしました。今回はAltCSSのSass(SCSS)をコンパイルします。JS先日、Youtubeで初ライブ配信を行いました!いつも愛用しているCodePenを紹介しつつ、HTML、CSS、JSの基本を解説しました。こちらに概要とソースコードを掲載します。CodePenのおすすめ設定やYoutubeでライブ配信する方法についてもご紹介。それではどう...CodePenでHTML、CSS、JSを体験しよう【クモコツ一人もくもく会-1】2019-08-31【CSS】scroll-snapでスナップ(引っかかり)のあるスクロールがまったくカン・タン・だ!CSSスナップ(ひっかかり)のあるスクロールをするのに昔はJSを利用してましたが、CSSのscroll-snapだけでも実現できるようです。実際に作ってみたら、まったくカン・タン・だった。HTMLフォームのCSSって結構手間がかかったり、効いてくれなかったりで苦心しますね。TwitterでTAK(@tak_dcxi)さんがフォーム用のリセットCSSをツイートしていたので、実際に試してみました。JSHTML5から追加された「カスタムデータ属性」。data-hogeといった形式で独自の属性を作れます。これを使うと、これまでCSSやJSの中に直接書いていたテキスト情報をHTMLに集中させて、CSSやJSはカスタムデータ属性からテキストを読み込む形にできます。テキス...カスタムデータ属性をCSSやJSで読み込む(テキストをHTMLに集中させる)2019-08-04【CSS】conic-gradientで放射状の光線を放つ太陽を作るCSSCSSのグラデーションで最近追加されたconic-gradient。これを使うと放射状の光線を表現できるようなので、前々から存在は気になっていました。光線ということで「太陽」を作ってみました。それでは、いきましょう!【CSS】conic-gradientで放射状の光線を放つ太陽を作る2019-07-17縦書きCSSやってみた(writing-mode、text-orientation、text-combine-upright)CSS前からやってみたかった縦書きCSS。業務でやる機会もまだなさそうなので概要だけでも体験したく触ってみた。縦書き(writing-mode)、文字回転(text-orientation)、縦中横(text-combine-upright)の3つのプロパティがあります。JSWordPressの前回の記事でGutenbergのブロックを使いコードを1行も書かずにペライチページを作りました。Nineteenは...クセが強い!CSSとJSのカスタマイズ、テーマのphpファイルをいじらずにダッシュボードだけで完結できました。これまでちゃんと触ったことがなかったのでトライしてみた。Gridとグリッドシステムは相性がいいのではないか?と思い実際に作ってみた。間はどのくらいグラデーションになるかCSSCSSで色を指定するときによく使う#fff、#eeeなどの3桁コード。便利だけど色の差が若干激しい?16進数ではどのくらいのグラデーションになるか調べてみた。HTMLタイポの道も一歩から。文字のデザイン「タイポグラフィ」。様々な要素がありとっても奥が深い世界です。HTMLスマホの小さい画面でメニューをしまっておくのによく使われるハンバーガーメニュー。これまではJSのクリックイベントでclass名を追加して実現してました。擬似クラス:targetを使うとCSSだけで実現できると知って試してみた。HTMLフォームの送信ボタンのinputタグにアイコン(擬似要素)を加えたかったのですが、できませんでした。それで、ボタンの外をdivで囲んで擬似要素を加えました。したら、なんということでしょう。CSSドット絵マリオシリーズ、前回のあらすじ。グラフィックソフトを使わずCSSオンリー打つべし打つべし!でドット絵を描いた(書いた?)マリオ。CSSHTML5で新たに追加されたfigure要素とvideo要素。なんとなく画像はfigure要素、動画はvideo要素というイメージを持っていたが、figure要素はもっと広い用途に当てはまり、video要素も内包する要素でした。JSソフトウェア開発プラットフォーム「GitHub」。バージョン管理システム(Git)によって複数人数での開発ができます。「黒い画面」を叩いて開発するイメージがありますが「SourceTree」というGUIツールもありますよ。JS「前編」の続きです。前編ではフォルダ作成(mkdir)、ファイル作成(touch)・複製(cp)・移動(mv)・削除(rm)を行いました。後編ではいよいよテキストエディタを使わず、黒い画面だけでコーディングを行います。JS「初めての黒い画面」以降、ちょいちょい黒い画面(ターミナル)に触れてきましてだんだんと慣れてきています。ここらで新たな試みをしてみます。JSWebサイト制作で欠かせないChrome「デベロッパーツール」。HTML、CSS、JSのリアルタイム修正から入るのがおすすめ。まとめあるとイイね!なフロント代替言語「HTMLテンプレートエンジン」「AltCSS」「AltJS」。少ない記述量のコードで済みます。残念ながらそのままではブラウザに表示されません。HTML、CSS、JSに変換(コンパイル)するための開発環境が必要です。そこで...HTMLテンプレートエンジン、AltCSS、AltJSの総まとめ(3記事)2018-10-30【CSSドット絵】マリオ立ちポーズとジャンプポーズの切り替えCSS以前、CSSだけでドット絵がかけるのか、というシリーズをやってて、中断していたのですが、ツイッターで素敵なドット絵マリオ作品に出会ってまたモチベーションが湧いてきました。幾何学模様】CSS背景などでいつもお世話になっているCSSグラデーション(linear-gradient)。他にもいろいろな模様を描くことができます。そのなかでも「ストライプ(縞模様)」はよく知られています。これを応用して「斜線」を作れないかなー、と試行錯誤してみました。JS以前、「書ける前に読む!HTML、CSS、JSの書式」*1という連載記事を書きました。コードを書くにはまず読める方が先という考えから、コードの読み方をHTML→CSS→JSにステップアップ方式で解説しました。JS前回、タブレットだけで技術ブログが書けるのか検証した結果、もしかしてだけどこれならスマホだけでも技術ブログが書けるんじゃないの?という気になってきたので、実際にやってみる。textというスタイルだった。このスタイルで出来ること、出来ないことを検証してみました。textで背景を文字形に切り抜いてさらにグラデのアニメにする2018-09-06もしかしてだけどCSSのvwやvhを使うとメディアクエリ無しでレスポンシブ対応できちゃうんじゃないの?(オマケにvmin、vmaxも)CSSタイトルのようなことをふと思ったのでCSSのvw、vhをいろいろ試してみました。PCは横長、スマホは縦長とまったく異なる縦横比率なために生じるレスポンシブ対応。JS以前、JSで図(チャート)を作るライブラリとしてCanvasベースの「Chart.js」をGettingしてStartedしました。そのときにもう一つSVGベースのライブラリ「D3.js」も候補で考えていたのですがChart.jsと比べて少し敷居が高く感じてました。はてなブログProフロントエンドエンジニア。神奈川に住まう四十路のオジキ。DTP→Webデザイナーから転向し今に至る。引き続きコツコツの日々。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。