サイトを37倍に高速化した7つの手法 - オールアバウトTech Blog
今回はオールアバウトのnnmrが弊社サイトAll About Japanの速度を高速化した経緯についてまとめます。 All About Japanとは そもそもAll About Japan（以下AAJ）とは何かといいますと、弊社が提供している訪日外国人向けの日本紹介サイトです。 外国人向けサイトで、英語、中国語（繁体字）、中国語（簡体字）、タイ語、韓国語の5か国語に対応しております。 「Anime」「Izakaya」「Ninja」といったような特集や、実際に観光する人向けのモデルルート記事が特色です。 ■ 特集 (url : http://allabout-japan.com/en/tag/sushi/ ) ■ モデルルート記事 (url : http://allabout-japan.com/en/article/222/ ) 技術的な紹介 LAMP環境です。 （サーバー構成は後に記述
touch-actionでスクロールやズームを止める（知名度が低いウェブ標準ひとりAdvent Calendar 2021 – 12日目） | Ginpen.com
知名度が低いウェブ標準ひとり Advent Calendar 2021 – 12 日目 今日は CSS の touch-action プロパティです。指操作の制御をします。 touch-action – CSS: カスケーディングスタイルシート | MDN デモ：https://codepen.io/ginpei/pen/gOGLrgG デモはタッチ対応端末でご覧ください。主にスマホ。 基本的な使い方 だいたいこんな値です。 auto – 通常 none – 反応しない pan-y – 縦方向スクロールのみ pinch-zoom – ズームのみ manipulation – スクロールとズームのみ（ダブルタップでの拡大を無効化） 他に下方向のみの pan-down とかいくつかあるので MDN をご覧ください。 Pointer Events 関係の仕様です。IE でも動きます。 使いどころ
ぜろちゃんねるプラス
ぜろちゃんねるプラスは、２ちゃんねる互換スレッドフロート型掲示板スクリプトであるぜろちゃんねるの上位版(高機能版)として提供しています。 見た目も「２ちゃんねる風」で、一目見ただけでは違いがわからなくなるまでこだわりました。是非サンプルで体験してみてください。 Let's try it! » ぜろちゃんねるプラスは、見た目だけではなく、内部も２ちゃんねるとの互換性を高めた結果、JaneStyleやBB2Cなどの２ちゃんねる専用ブラウザを使用して閲覧・書き込みを行うことができるようになりました。 これによりさらなる快適な掲示板ライフをあなたに提供してくれます。 Browser List » ぜろちゃんねるプラスProjectでは、掲示板運用に必要なウェブサービスを独自に開発し、ぜろちゃんねるプラスをご利用の方々、またご利用で無い方でも無償で提供しています。 是非ご利用いただき、掲示板運用など
独学の人でも大丈夫！CSS Flexboxの使い方を基礎から学べるチュートリアル
CSS Flexboxの基礎となる考え方や構造、各プロパティの使い方を一通り学べるチュートリアルを紹介します。チュートリアルはステップ形式で、簡単なものから始まるので独学の人、そして初心者にもオススメです！ 30日分のチュートリアルですが、1日分は3分くらいなので、正味1,2時間でCSS Flexboxをマスターできると思います。 Flexbox30 -GitHub by Samantha Ming 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 1日目: Flexboxとは Flexboxの前は、レイアウトをするためにfloatを主に使用していました。CSSのデベロッパーは、floatは古い方法で限界があり、フラストレーションが貯まることをよく知っています。 しかし、現在は違います！ レスポンシブ対応の柔軟なレイアウトはもちろ
Masonryの使い方：サイズの異なるBOXをタイル状に整列 [ホームページ作成] All About
Masonryの使い方：サイズの異なるBOXをタイル状に整列大きさの異なる複数のブロックを、うまい具合に隙間無くタイル状(レンガ状)に自動整列してくれる「Masonry」の使い方を解説。横幅や高さの異なるボックスがいくつあっても、できるだけ無駄な隙間ができないように詰めて配置してくれます。当初の「jQuery Masonry」とは違ってjQueryなしで動作可能になり、CDN経由で読み込めるようにもなって手軽になりました。
![Masonryの使い方：サイズの異なるBOXをタイル状に整列 [ホームページ作成] All About](https://cdn-ak-scissors.b.st-hatena.com/image/square/2d598cb7c9e1437f59a7459deffaf32757e9eedb/height=288;version=1;width=512/https%3A%2F%2Fimgcp.aacdn.jp%2Fimg-a%2F1200%2F900%2Faa%2Fgm%2Farticle%2F4%2F0%2F2%2F5%2F4%2F9%2Ftopimg_original.png)
初心者でも分かる！モーダルウィンドウの作り方
特にスマホで活躍する、ダイアログのように浮かび上がるモーダルウィンドウ。初心者でも1から作れるよう、解説します。
HTML minifier
Case-sensitive Treat attributes in case sensitive manner (useful for custom HTML tags) Collapse boolean attributes Omit attribute values from boolean attributes Collapse inline tag whitespace Don't leave any spaces between display:inline; elements when collapsing. Must be used in conjunction with collapseWhitespace=true Collapse whitespace Collapse white space that contributes to text nodes in a d
PHPテンプレートエンジンまとめ 一覧と構文例（随時追加中）
データベースから引き出したデータはなるべくきれいに表示したいものです。 とはいえ、いまどきechoを使いまくってPHP内からデータを書き出すのはナンセンスです。MVCの分担もできません。 そんなときにはテンプレートエンジン！！ データを渡せば簡潔な記述でhtmlに変換してくれます。また、コードとデザインを明確に分けることもでき、複数人での作業分担も可能になります。ということで今日はPHPのテンプレートエンジンをまとめてみました。 すごい数が出ていますので、とりあえず一覧と例文を載せておきます。（すべて試している訳ではありませんし知識も低いので、間違いがありましたらツイッターなどでご指摘ください。FF外歓迎。） Follow @LandscapeSketch 有名どころはBlade、Twig、Smarty、PHPTALあたりでしょうか。 ちなみにぼくはBladeとDIVを愛用しています。Bl
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
STP^3