今更といわせない！SASSでCSSを爆速でかけるようになろう。 – ホームページ・デザイン制作のAWESOME | 加古川・姫路・明石
良いプログラマーの口癖は「めんどくさい」という話しを聞きました。 効率よく仕事をサクサクっと終わらせて、仕事を終えたい人がプログラマーに向いているのでしょうか。 最近コーディングを効率的に早く終わらせる方法はないかと思いまして、色々と悩んだ結果SASSを復習しようと決めました。 今更感は否めないですが、便利なのに使ってない記法が色々ありました。 sassを使いこなすことで、メンテナンス性も上がりますし、コーディングの効率もあがります。 「sassって聞いたことも使ったこともない！」 って方でも分かりやすくsassを解説していきます。 sassを使ってCSSを効率よくコーディングしよう！sassとはCSSを効率的に書くことができ、保守性も向上させることのできる技術です。 スゲエCSSといったところでしょうか。 CSSってなに？って方は今回のblogは必要ないのでこちらの記事がおすすめです。
CSSのメタ言語 - Qiita
Less クライアント上でもCSSへ変換できるところが他の２つとの大きな違い。事前にサーバ上で変換を忘れて古いままのCSSを配布してるなんてことがなくなるのかな...一方で、中括弧やセミコロンの省略ができない。この省略できないのは個人的に痒いところです。また、サンプルコードを見る限り文法のラーニングコストが一番高そうかなと思います。しかし、Google TrendsとGithub上ではLessが一番なので、注目度が一番高いのは間違いなしですね。 Sass / SCSS Ruby on RailsではデフォルトでSassが設定されています。Lessと比較すると文法が分かりやすく、私はとっつき易さを感じました。Github上では、Stylusより少しStar数が多い感じです。SCSSは、2010年Sass3から新たに採用された記法です。SCSSではインデント記法が廃止されCSS3互換文法になり
学ぶ、考える、書き出す。
2023年1月1日 2022年の振り返り 今年は良くも悪くも某国際球技イベントに振り回された年だった。 2022年11月23日 eslint-plugin-importによってVitestの設定ファイル上でエラーが発生する場合がある vitest と eslint-plugin-import に依存している環境では、vitest.config.ts内で vitest/config をインポートすると Unable to resolve path to module 'vitest/config'. eslint(import/no-unresolved) というエラーが出る場合があります。 2022年8月24日 Next.js + Vercel + microCMSなどを使ってほぼ無料でブログを運用する 当ブログのシステム構成について紹介します。構成を真似することでほぼ無料（後述）でブログ
日本のWebエンジニアの大半が、変化に対応しきれなくなっている件について。 - 日々、とんは語る。
先週書いた10年のツケを支払ったフロント界隈におけるJavaScript開発環境（2016年4月現在）。という記事がまずまずの反響を得たのですが、僕の予想とは異なり、「こんなに多くのツールやフレームワークを必要とする現状はおかしい」といった、状況批判の意見が多く集まりました。 Mediumなど海外メディアでは、もはやこの種のツールを組み合わせたフロントエンド開発が当たり前として受け入れらており、この半年間ほどは「実際にどの組み合わせがベストか」という議論が行われていました。そして、そういった議論もようやく落ち着きを見せ、おおよそ僕が書いたような組み合わせに帰結しつつあります。 そのため、まさか「フロントは変化が激し過ぎる」とか「保守が大変そう」などといったような、1年くらい前に言われていた意見が、いまだに多くを占めるとは、まったく予想していなかったというのが正直な意見です。ひと昔まえであれ
10年のツケを支払ったフロント界隈におけるJavaScript開発環境（2016年4月現在）。 - 日々、とんは語る。
2015年はCSSが普及した以来となる10年に1度のフロントエンド大変革期で、それまでのツケが一気に回ってきたと個人的に感じていました。目まぐるしく状況が変化していきましたが、2016年になり、個人的にだいぶ落ち着いてきたと感じているので、ここらへんでまとめておきたい思います。 最初に結論を書いておくと、 『React + Redux + react-router + material-ui + axios + ES2015 + Babel + webpack + ESLint + Airbnb JavaScript Style Guide』 という組み合わせが、いま僕の採用しているJavaScriptの環境です。 主要ライブラリは React A JavaScript library for building user interfaces | React 去年、一気に普及したReact
Colorkrew Blog
フロントエンド開発ツールマップみたいな何か。JavaScriptフレームワーク、AltJS、CSSプリプロセッサ、HTMLテンプレートとかまとめ。 2月1日より社員になりましたくぼたなるひとです。初ブログです。つーかいっそ今日から社員なので初業務です。 ちなみにデザイナーです。でもフロントエンドエンジニアになりつつあります。でもデザイナーです。 はい、意味不明な前置きはやめて本題です。 今日はフロントエンド開発ツールについて概観してみようと思います。 「やっぱりフロントエンドエンジニアじゃねえか！」とか言わないでください。 HTML/CSS/JavaScriptだよね。フロントエンド開発の人が扱うものといえば、基本はHTML/CSS/JavaScriptという認識ですよね。 その他ツールとしてはブラウザとエディタさえあれば、極端ですが即開発できます。簡単ですね。 およそ間違ってないですね。
HTML/CSS入門
箇条書き <ul> <li> 項目1 <li> 項目2 <li> 項目3 </ul> 項目1 項目2 項目3 強調、下線、斜体 <b>強調 (bold)</b>, <u>下線 (underline)</u>, <i>斜体 (italic)</i> 強調 (bold), 下線 (underline), 斜体 (italic) このような「見た目」の情報をHTMLに入れるのはあまりよくないとされる。 ソースコードなど <pre> int main(void) { printf("Hello, World\n"); } </pre> int main(void) { printf("Hello, World\n"); } コメント <!-- この部分は表示されない --> 画像 これは <img src="image.jpg" alt="キャピタルドームの写真" /> です。 これは です。 リ
Googleが推薦するHTMLとCSSのコーディング方法
2012年7月12日のGoogle ウェブマスター向け公式ブログの記事「HTML と CSS のコーディングガイドライン」で紹介されていた「Google HTML/CSS Style Guide」に書いてあるコーディング方法と感想を紹介します。 Google HTML/CSS Style Guideの日本語翻訳 Google HTML/CSS Style Guideは英語なのでGoogle Chromeで翻訳して確認していたんですが、すでに翻訳してあるサイトがあったのでこちらも参考に両方を見て確認していきました。 Google HTML/CSS Style Guideを翻訳してある記事「Google HTML/CSS Style Guide」を適当に和訳してみたは、かなり助かり参考になりました。 それではGoogle HTML/CSS Style Guideに書いてあるHTMLとCSSのコ
こんなHTMLとCSSのコーディング規約で書きたい - Qiita
HTML と CSS のコーディングルールを作ろう HTML と CSS のコーディング規約を中心に、メンテナンス性の良い HTML や CSS をコーディングする際に重要だと思うポイントをまとめています。 誰に向けた記事か この記事には、HTML や CSS を書く人に役立ちそうな内容が書いてあります。 特に初級者から中級者の方で、HTML や CSS を一通り学習した方からの反応が良いです。 まだ HTML や CSS の学習を始めて間もないという方は、先に案件やプロジェクトをこなしコーディング経験を積むことをお勧めします。経験を積むとよりこの記事の内容への理解が深まるはずです。 HTML と CSS を書くときに大切なポイント2点 HTML と CSS を書くときに大切だと思うことを書きます。 1. HTML と CSS を書かない あなたがいま書いている HTML と CSS は、
CSS3入門 - Qiita
参考：http://dotinstall.com/lessons/basic_css3 CSS3とは 多彩な表現ができる（影をつけたり角丸をつけたりアニメーションをつけたり） W3C.orgが策定中→各ブラウザによって実装がまちまち ベンダープレフィックスとは何か？ 例 border-radius: 5px; -webkit-border-radius: 5px; 先行的に実装している実験的な機能だと示すもの 種類 -webkit- : chrome / safari -moz- : firefox -o- : opera -ms- : ie 対応状況 caniuse.com ex) border-radiusで検索すると… 実際の装飾 角丸をつける 半径10pxの角丸 border-radius: 10px; 時計周りに border-radius: 10px 20px 30px 40p
Google
世界中のあらゆる情報を検索するためのツールを提供しています。さまざまな検索機能を活用して、お探しの情報を見つけてください。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://twitter.com/designerSaha/status/1518131401857531905?t=xXJpC3x_qKkfhDJdJEVpdg&s=09
Yusuke Nakaya on CodePen
https://cyclone-t.github.io/yc-spinner/
sass scss html5 - Google 検索
Flexbox Defense
google html/css style guide 日本語 - Google 検索
Google HTML/CSS Style Guide まとめ - Qiita
re-dzine.net situs togel online toto 2023 -
いまさら聞けないCSS／スタイルシート入門
