4 Ways to Remove Unused CSS
Image by Ron Porter from PixabayCSS files can easily gain redundant KBs over time. It may happen due to leftovers from historic stylings or simply because you’ve used a large CSS framework like Bootstrap (147 KB when minimized) and most probably have used only a fraction of what it has to offer. Unused CSS slows down page loading and makes maintenance much more difficult than it has to be. Unused
うわっ、私のサイトBootstrapくさすぎ!? たった数文字変えるだけでBootstrapのくさみが抜ける7つのCSSテクニック。
なんか、このサイトBootstrapくさい。そう感じることはありませんか? その理由はズバリ、欧文ベースでつくられたフレームワークを文字構造の違う日本語で適用した際に不都合が出てしまっているからです。 それらが醸し出す違和感を放っておくと、Bootstrapくささを生み出す大きな原因になってしまいます。 そもそもの問題として、欧文と比較して和文は文字の要素が多く、文字自体のリズムも少ないため、どうしても複雑で単調に見えてしまいます。 しかし、和文だからといってあきらめることはありません。BootstrapのCSSを少しだけ変えるだけでグッと見た目がよくなる隠し味をご紹介します。 1. line-heightで行間にゆとりを。明朝やゴシックなど、フォントの種類が言葉の印象を表すように、文字の行間は読みやすさ、文章全体の雰囲気を左右します。 欧文をベースに設計されたBootstrapをそのまま
フロントのチーム開発効率を最適化するワークフローと SPA 設計 | Nagisaのすゝめ
ちょっと意識高そうなタイトルを付けてしまいましたが、皆さんどのような開発でお過ごしでしょうか。 Nagisa では現在フロントエンドエンジニアは1人です。長きに渡って1人で開発してきましたが、最近は iOS エンジニアやデザイナーも開発に参加することでスピードとクオリティを担保しています。 そこで今回はスキルや役割の違うメンバーで効率よく開発を進める。そしてコードをカオスに落とさず秩序を保つために行ったワークフローの改善や、取り入れたデザインパターンなどを紹介したいと思います。 複数人でチームを組んで開発をするのは、1人のときよりも難しいです。雰囲気で開発を進めていけばコードはカオスに陥り、スピードも品質も担保できなくなります。 他人のソースコードを引き継いだ時や3ヶ月前の自分 (殆ど他人) のコードを改修している時も似たようなことが起こります。 逆に、1人で開発して1人で継続的にメンテし
SPA + サーバーサイドレンダリング、そのダルさに関する私見
いわゆる SPA + サーバーサイドレンダリングがダルい 唐突ですがおさらいです。 なぜサーバーサイドレンダリング（SSR）が嬉しいかと言えば 初期表示の Critical Rendering Path を短縮できる SEO における保守信仰にやさしい（） 古いブラウザ・低性能マシンにやさしい yahoo/fluxible による SPA + Server Rendering の概観 ::ハブろぐ であり、特に SPA + SSR の文脈においては Universal Architecture による SPA + SSR は、技術的には過渡期の歪なキメラっぽさが拭いきれませんが、昨今の Web フロントエンドにしては珍しくビジネス的な説得力があります。 SSR なのでSNSや検索からの流入による初期表示が速い SPA なので回遊時のページ遷移も速い SSR なので古いブラウザでも CSS
オンラインでさくっと簡単！HTML, CSS, JavaScript, C++, Java, Pythonなどのコードを見やすくする無料サービス
HTML, CSS, JavaScript, C++, Java, Pythonなどのコードをコピペするだけでさくっと簡単に、ブラウザ上で見やすく表示する無料のオンラインサービスを紹介します。 Sublime TextやDreamweaverなどのエディタに備わっているシンタックスハイライトが、オンラインで利用できるのはいいですね。 SlidesCodeHighlighter SlidesCodeHighlighter -GitHub 表示コードは「HTML5でWebページを作成する時のベースになるシンプルなコードで書かれたテンプレート」のHTMLです。 SlidesCodeHighlighterはオンラインのブラウザ上で、コードをコピペするだけでシンタックスハイライトを適用して見やすく表示してくれます。現在、対応しているコードは下記の通り。 C++ Java JavaScript XML
Web上からソースコードの圧縮・整形・変換など190以上のツールを利用可能な「BeautifyConverter」を徹底解説！ - paiza times
どうも、まさとらん（@0310lan）です。 今回は、ブラウザ上からWeb制作などで便利に使えるミニツールを190以上も搭載した異色のWebサービスをご紹介しようと思います！ 特に、ファイル関連のジェネレーターやコンバーターが豊富に揃っているのが特徴で、コンソールからタスクランナーなどを起動する必要もなく、フロントエンド側だけでちょっとした制作を行うのに最適だと思います。 【 BeautifyConverter 】 「BeautifyConverter」は、主にファイルの「圧縮」「整形」「変換」などから「構文チェック」「画像変換」「各種ジェネレーター」…など、多種多様な便利ツールが揃っています。 登録不要で、誰でも今すぐブラウザから利用できるので、ブックマークしておいて損はないでしょう！ ■基本的な使い方！ 「BeautifyConverter」の基本的な使い方を実際に試しながら、どのよう
Web界隈で最近気になるWebサービスとか集めてみた【2016年7月版】 - Brian'z Imagination
2016年もいよいよ下半期突入。 歳を取るごとに1年が過ぎるスピードがますます加速するように感じるけれど、全然悲観的じゃない。むしろ毎日新しくて新鮮なことが向こうからどんどん飛び込んできて、毎日エキサイティングだ。 そんなわけで、今回も先月に引き続き最近気になるWebサービスやアプリケーションなどを紹介していきたい。前回は海外サイトを中心に紹介したけれど、今回は海外編・国内編と2本立てで紹介していく。ほとんどのサービスは無料だけれど、とんでもなく便利なものも多いので、きっとあなたの役に立つはずだ。 ちなみに前回の6月版の記事はこちら。 海外編 Real Time Users Real Time Usersは、1分(60秒)以内にサイトを閲覧しているひとの数を表示するカウンターのjavascriptプラグインだ。CSSで表示部分をカスタマイズすることができる。数行のコードではてなブログにも設
Bootstrapの画面を手軽に作れるツールまとめ
業務システムの画面やWebサービスの管理画面にBootstrapを採用するケースが増えていますが、それでもBootstrapならではの書き方を覚えないといけません。バージョンが上がるごとに書き方が変わるので習得が面倒と感じる人も多いでしょう。 そこで使ってみたいのがBootstrap用のUIビルダーです。ドラッグ&ドロップで画面が設計できれば作成も簡単ですよね。 lollytin beta 1.4 – A yummy HTML5 blockouterer! Bootstrapのデザインをドラッグ&ドロップで作っていくのですが、見た目はデフォルメされています。その分、細かいところにこだわりすぎずにさくさくと作っていくことができます。 Pingendo – web authoring with comfort PingendoはBootstrap専用のオーサリングソフトウェアです。Mac OS
2016年に取り入れていきたい、CSSのテクニック・ライブラリのまとめ
2016年は、1月12日に古いバージョンのIEのサポートが終了します。 IE8, 9, 10などの古いブラウザへの対応に時間を割く必要がなくなり、今まで躊躇していたCSSやJavaScriptが多くの人に利用されるようになると思います。 これからどんどん取り入れていきたいCSSのテクニック・ライブラリを紹介します。 イラスト: Girls Design Materials 2016年1月12日からIEの対応は実質IE11に レイアウト関連のCSS アニメーション関連のCSS ユーティリティ関連のCSS 2016年1月12日からIEの対応は実質IE11に 2016年1月12日(米国時間)に、IEの古いバージョンのサポートが終了します。 各Windows OSごとの対応バージョンは、下記の通り。 Internet Explorer サポートポリシー変更の重要なお知らせ Vistaユーザーはほぼ
ブログ記事のコピーと右クリック禁止でパクリ転載防止する方法
右クリック禁止とコピー禁止のCSSを紹介します。これでブログの記事をパクられた。画像を勝手に利用された、というのが多少防げる。頑張って書いた記事や画像がパクられたくないって人は参考までにどうぞ。抜け道は多いので本当に多少レベル CSSでテキストのマウスドラッグでの選択とコピー禁止 CSSのエリアに以下内容を記述することで、テキスト選択とマウスのドラッグを禁止してコピーを防止することが出来ます。 body{ user-select:none; -moz-user-select:none; -webkit-user-select:none; -webkit-user-drag:none; -khtml-user-select:none; -khtml-user-drag:none; } これはFirefoxとsafariとGoogleChromeで有効で、あの憎きIEには通用しないので別の対処
WebエンジニアがスキルアップのためにKindle 50%還元セールで買っておくべきIT技術書 50選【6/1まで】
--この記事は約 8 分で読めます。--こんにちは、きるいっとです。 現在、キンドルストアでIT技術書1700冊以上が50%還元セールを実施中です。 キンドルストアIT技術書50%還元セール セール中の書籍の中から、本日は、 「Web系新人エンジニアがスキルアップのためにKindle 50%還元セールで買っておくべきIT技術書 50選」をお届けします。 Webエンジニアとして心得 Webサービスのつくり方 ――「新しい」を生み出すための33のエッセイ Software Design plus HTML/CSS/JS HTML 現場のプロが教えるHTML＋CSSコーディングの最新常識 知らないと困るWebデザインの新ルール4 スラスラわかるHTML＆CSSのきほん CSS スラスラわかるCSSデザインのきほん スラスラわかるきほんシリーズ Web制作者のためのCSS設計の教科書 モダンWeb
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Page Not Found - NxWorld
新着記事
解放新聞による在特会関連の虚報について - 在日特権を許さない市民の会 - ニュース