たった3行で実現できるCSSの上下中央揃え（Flexbox） - QiitaDeleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
AMP(Accelerated Mobile Pages)ってなんで速いの。 - Qiita
##そもそもAMPってなんだ？ ACCELERATED MOBILE PAGES PROJECT Google主導のモバイルページ高速化プロジェクト。 AMP仕様にそってWebページを記述することでモバイルページを高速化させようというもの。 モバイルページということもあって、描画速度そのものだけでなく通信データ量の削減も重視されている。 2016年2月にはGoogle検索が対応予定らしい。Twitter,LINE等も追って対応するとか。 ##3つの構成要素 ###AMP HTML 拡張されたHTML。等、AMP specに従ったHTML ###AMP JS AMP HTMLで記述されたコードを解釈し、レンダリングを行うJavaScriptライブラリ。各AMP要素は非同期に描画される。 ###AMP CDN AMP JSを配信するCDN。 AMPコンテンツを発信する全てのページはこのCDNか
Bracketsの7つ道具的エクステンション Brackets Tools - Qiita
Brackets Toolsとは Bracketsのエクステンションの1つで、これを入れるだけでコーディングやプログラミングが捗る様々な機能が使えます。 派手なものではありませんが、どれも使えると何気に便利なものばかりですので、ぜひ試してみてください。 それぞれ、GIFアニメで解説して参ります。 →エクステンション公式GitHub →基本的な使い方 →他のエクステンション 機能紹介 一部を除き、各機能へはメニューバーの「Tools」またはエディタ欄で右クリックでアクセス出来ます。 空白行の削除 英名：Remove Empty/Blank Lines 改行の削除 英名：Remove Break Lines 行頭の連番を削除 英名：Remove line numbers 重複行の削除 英名：Remove duplicate lines 単語リストを配列に変換 英名：Word To Array
SMACSSによるCSS設計 - Qiita
前案件でBEMチックな書き方をして、あまりのクラス名の長さに キィェエエエ！！ってなった後で、 CodeGridさんでSMACSSについてのステキ記事を見つけたのでメモ。 ※以下、CodeGridさんの記事に書いてることを、自分が後で見るようにプチ要約したものです。 本記事をまだ読んだことが無い人はここよりも、本記事の方をじっくり読むのをお勧めします。 SMACSSによるCSSの設計 - ベースとレイアウト | CodeGrid CSSカテゴライズ 5つにカテゴライズして、それに準じた名前を付ける 1.ベース 2.レイアウト 3.モジュール 4.状態（ステート） 5.テーマ 1.ベースルール サイト全体で要素そのもののデフォルトスタイル
Brackets おすすめエクステンション集・解説 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? Qiita上の内容を集約し、大幅に修正・加筆したものを本として出版しました。 →ブログ：Bracketsの解説書を出版しました 基本的な使い方 こちらにて別途紹介しています。 →[Bracketsの機能紹介、使い方解説] (http://qiita.com/assialiholic/items/c8137321c7599a168b16) →Bracketsショートカット集 カテゴリ一覧 必ず入れておきたいもの ソースコード関連-全般 ソースコード関連-HTML/CSS ソースコード関連-JS/PHP、その他 画像・デザインデータ連携系
Bracketsの機能紹介、使い方解説 - Qiita
Qiita上の内容を集約し、大幅に修正・加筆したものを本として出版しました。 →ブログ：Bracketsの解説書を出版しました Bracketsとは Webによる、Webのための次世代エディタ Brackets自身がHTML・CSS・Javascriptで出来ており、まさに「Webによる、Webのためのエディタ」と言えます。 オープンソースであり、アップデートも約2.5週間に1度行われるなどとても活発に開発されています。 →Sprintから公式バージョンになり、アップデート間隔が伸びたようです。 テキストエディタとIDEの中間 デフォルトでライブプレビューを備えていたり、Adobe公式エクステンションによりPSDの読み込みが出来たりとなかなか高機能ですが、IDEほど機能は多くなくまた動作も重くありません。 とてもバランスが良く、シンプルなテキストエディタと高機能なIDEのちょうど良い中間あ
SEO嫌いにお送りするSEO策。これでもうSEOについてしばらく考えなくて良いぜ！！ - Qiita
SEO好きですか？私は嫌いです。そんな事に取り組むよりも仕組みやコンテンツの改善に取り組みたいです。今回はそんなSEO嫌いにお送りする、SEO対策集です。やってられないSEOは１日で終わらせてもっと生産的な仕事に集中しましょう！ まずは結論から 下記をテンプレートにしていただければ良いです。google検索表示もfacebook表示も上手くいきます。twittercardの表示だけは公式サイト（日本語）より申請がいるのでそれだけしておきましょう。 <title>Qiita - プログラマの技術情報共有サービス</title> <meta content="Qiita - XXX" name="title"> <meta content="ブログ記事詳細. 120字以内を心がけよう。その中でも最初の４０字は大事。" name="description"> <meta content='キーワ
inputのズレを揃えるCSSまとめ - Qiita
ブラウザ間でインプットやチェックボックスの表示がズレるのを自分なりに修正したCSSのまとめメモ。 ちなみにIE6ではinput[type="text"]や、input[type="checkbox"]の標記が無効？のようだったので、もしやんごとなき事情でIE6に適用させるためにはチェックボックスやラジオに対して別途クラスを当てる必要。 ・buttonには overflow:visible;を入れる。 ・vertical-alignを指定する ・positionをrelativeにして、高さを相対的に揃える（topは各フォントサイズにより変更する） ・font-familyに日本語フォントを指定する こんな感じで書くと書くブラウザでズレが軽減されます。 body, form { margin:0; padding:0; border:0; outline:0; font-size:100%;
Webフロントエンド表示速度、最速化手法まとめ - Qiita
やりすぎても無駄になることがあるので、必要十分なバランスを見極めて実施する。主に社内のプログラマ向けのまとめ資料。他にもあれば追記していく予定。 ページの状態を調べる まず対象のページが、どういった状態なのかを調べる。 Google PageSpeed Insights これを100点満点にする必要はないが、赤くなっている項目に関しては、なるべく対応したほうが良い。モバイルサイトにも対応しているので便利。 https://developers.google.com/speed/pagespeed/insights/?hl=ja pingdom 実際にページにアクセスしてスピードを計測できる。海外サーバなので、けっこう遅い…。最適化前と最適化後で比較するのに使うといい。 http://tools.pingdom.com/fpt/ Chromeデベロッパーツール コンテンツの読み込み順序／速度
SublimeTextの教科書で紹介されてるプラグインまとめ - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? via Impress Japan: Web制作者のためのSublime Textの教科書 今すぐ最高のエディタを使いこなすプロのノウハウ サンプルPDF4章の目次より ※説明は私の調べたものなのでかなり適当です。 SideBarEnhancements サイドバー右クリックのメニューを拡張 titoBouzout/SideBarEnhancements LineEndings 改行コードの変更。 SublimeText/LineEndings ※現状、SublimeText3で動かないです。143Pのコラムで動かし方について言及がある
SublimeText3+MarkdownでPDF文書やスライドを作る - Qiita
SublimeTextはとっても便利で見た目も最高です。 簡単に書けるMarkdownで学校のレポートやスライドが作れたらもっと嬉しいですね。 バージョンを2から3に上げたのでMarkdownを書く環境も整えてみました。 インストールしたものと出来ること MarkdownExtended: シンタックスハイライトで見た目を良い感じにします MonokaiExtended: MarkdownExtendedと合わせて見た目を良い感じに MarkdownPreview: ブラウザでプレビューします Pandoc: MarkdownやTexやWordを相互に変換してくれるヤバイ級ツールのpandocとsublimetextを連携させてpdfを作ります Evernote: MarkdownをHTML出力したものをEvernoteに保存します シンタックスハイライト まずPackage Contro
Markdown記法 チートシート
Markdown記法のチートシートです。 記法はGitHub Flavored Markdownに準拠し、一部拡張しています。 Qiitaでシンタックスハイライト可能な言語一覧については、 シンタックスハイライト可能な言語 をご覧下さい。 Code - コードの挿入 Code blocks - コードブロック たとえば、「Ruby」で記述したコードをファイル名「qiita.rb」として投稿したいときは、 バッククオート（`） か チルダ（~） を使用して以下のように投稿するとシンタックスハイライトが適用されます。 コードブロック内でコードブロックを書きたい場合は異なる記号を使うことで書けます。
フロントエンジニアになってから５ヶ月間で欠かせなくなったツールを晒す - Qiita
概要 今年からフロントエンドエンジニアにシフトチェンジして5ヶ月がたち、これがないと仕事にならんわレベルのツールを整理がてらに晒していこうと思う。 スペック的にはJava歴が10年くらい。 割とツール好きで、できればキーボード（カーソルキー以外）だけですべての操作を完結したいと思っている。 そんなおっさんがお送りします。 5ヶ月間のお仕事内容 PC/タブレット向けのAngularJSを使ったフロントエンド開発 HTML/CSS(SASS)/Javascript PCはIE8~、Chrome。モバイル端末はiPad、Nexus7 職場での開発環境 mac mini (2011) 19インチのシングルモニタ GUI系ツール Sublime Text 2 プログラマ向けのテキストエディタ。 これがないと仕事にならない。 以下、必須なPackage。 Vintage vimっぽいキーバインドにする
Google HTML/CSS Style Guide まとめ - Qiita
Google HTML/CSS Style Guide（2019年9月時点） より意訳とまとめ。訳が間違っていたらごめんなさい。 プロトコル imageやmedia、scriptなどを指定するときに、可能な限りhttpsを利用する。 <!-- 非推奨：プロトコルの省略 --> <script src="//ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script> <!-- 非推奨：httpの利用 --> <script src="http://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script> <!-- 推奨 --> <script src="https://ajax.googleapis.com/ajax/libs/jquery
lessがわからない人のBootstrap簡単カスタマイズ方法 - Qiita
はじめに デザインに手をかけず、とりあえずアプリを動かすためにBootstrapを使っています。 デフォルトのまま使えるかと思ったら、やっぱりちょこちょこ調整したくなったのでメモ。 2つのやり方 場合によって次のやり方を使い分けています。使い分けは後述します。 CSSを上書きする カスタマイズ用のcssファイルを作ってbootstrapのCSSより後から読み込みます。 <!-- Bootstrap --> <link href="/xxx/public/bootstrap-3.0.3-dist/dist/css/bootstrap.min.css" rel="stylesheet"> <!-- カスタマイズ用CSS --> <link rel="stylesheet" media="screen" href="/xxx/public/stylesheets/bootstrap-custom
SublimeText2/3 環境設定とか（基本3） - Qiita
{ "color_scheme": "Packages/Theme - Flatland/Flatland Dark.tmTheme", "draw_white_space": "all", "ensure_newline_at_eof_on_save": true, "flatland_square_tabs": true, "font_size": 18, "highlight_line": true, "ignored_packages": [ "Vintage" ], "itg_small_tabs": true, "tab_size": 2, "theme": "Cobalt2.sublime-theme", "translate_tabs_to_spaces": true, "font_options" : ["gray_antialias"] } ちなみに設定ファイルは js
schema.orgに準拠してクローラと会話しよう - QiitaのSEO事情（後編） - Qiita
前編ではHTML5のアウトラインを綺麗にする、というお話でした。アウトラインを綺麗にすれば、検索エンジンにコンテンツの階層構造がどうなっているのか、正しく教えることができます。 けどそれだけでは1つ1つのまとまりが一体何を表しているのかが不明です。 schema.orgに準拠することで、そこに何が書かれているのか、を検索エンジンに教えることができます。 schema.orgとは schema.org はGoogle, Microsoft, Yahoo!などの検索エンジンベンダーが集まってマークアップ方式を標準化している組織とその標準化された仕様を文書化しているサイトです。 例えば「ここは著者のことを書いています」「これは著者の名前です」「この記事が公開されたのはこの日時です」などなど、HTMLの機能だけでは伝えきれない詳細な情報をクローラに伝えるための手段が色々定義されています。 ちなみに
HTMLのアウトライン意識してますか？ - QiitaのSEO事情（前編） - Qiita
「最近Qiitaを検索結果でよく見るようになったなぁ」と感じる人はいませんか？ SEOを頑張ってるWebサービスは数多存在しますが、Qiitaもその中の1つです。 SEOっていうとやれキーワードがどうだこうだ、サイト内リンクがどうだこうだ、という話になってしまいがちですが（そういうのが不要と言っているわけではないですよ）、今回はQiitaがSEOの一環として行なっている数多の取り組みの中で、比較的Web上での言及数の少ない印象のある、HTMLのマークアップについて、外に出せる範囲で、前編と後編に分けて解説したいと思います。 後編はこちら 免責事項的な SEOというのは完全に結果論でしか語ることのできないものです。また時と共に効果的とされるテクニックは変わっていきます。この記事はQiitaの中の人が「効果あるんちゃうか」と試行錯誤しながらあれこれ行なっていることの一部を紹介するものであって、
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Bracketsショートカット集 - Qiita
Qiita