たった3行で実現できるCSSの上下中央揃え（Flexbox） - Qiita
この記事は大幅に加筆・修正して「上下中央揃えのCSSまとめ。Flexboxがたった3行で最も手軽 - ICS MEDIA」に引っ越しました。 10万PV、370いいねとフロントエンド界隈でご好評いただいた内容です。ぜひご覧ください。 ※ Google検索で辿り着いた方にリンク切れとなっては申し訳ないので、元の記事を残しています。ご了承ください。 Register as a new user and use Qiita more conveniently You get articles that match your needsYou can efficiently read back useful informationYou can use dark themeWhat you can do with signing up
Autoprefixerが進化してCSS GridのIE 11対応がバリ楽になった（2017年〜2018年） - Qiita
CSS Gridは便利なレイアウト手法ですが、IE 11にも対応する場合はベンダープレフィックスの付与や古い記法への対応が必要です。ベンダープレフィックスの付与や古い記法への対応を自動で行うのがAutoprefixerなのですが、2017年から2018年にかけてIE 11向けのGrid対応が大きく向上したことをご存知でしょうか？ 最近のAutoprefixerを使えば、次のようなメリットがあります。 IE 11向けに手動で書いていた-ms-grid-column-span、-ms-grid-row-spanを手動で書かなくてよい IE 11で非対応のgrid-template-areas、grid-areaを変換可能 gap（旧名grid-gap）をIE 11向けに書き出し可能 repeat()をIE 11向けの旧仕様で出力可能 ▲ AutoprefixerによるCSS GridのIE 1
貂が可愛い！ 新フォント貂明朝のイラストをウェブページで表示する方法 - Qiita
2017年11月28日、Adobeが新フォント「貂明朝（てんみんちょう）」を発表し、その可愛らしいフォントが話題になっています。 ※ 「貂」とはイタチ科の動物のこと また、可愛らしいイラスト文字も楽しめます。 貂明朝はAdobeが提供しているサービス「Typekit」に含まれているため、Creative Cloudユーザーであればウェブページ上のフォントとして表示することが可能です。本エントリーでは、貂明朝とそのイラスト文字をウェブページで表示する方法について紹介します。 貂明朝をウェブフォントとして使う Web サイトへのフォントの追加の手順に従って、貂明朝をウェブフォントとして追加します。これを行わないと貂明朝は使えないのでご注意ください。 設定後、HTMLの<head>タグに次のように記述します。 <script src="https://use.typekit.net/fya1sw
全モダンブラウザで使えるJavaScriptのdynamic import（動的読み込み） - Qiita
JavaScriptでは他のJSファイルを読み込みES Modulesという仕組みがあり、Chrome、Edge、Safariなどブラウザのサポートが拡大しつつあります（参考記事「JavaScriptでモジュールを使う時代に！ ブラウザで覚えるES Modules入門」）。 さらに、モジュールをimport()を使って「関数のように」呼び出すためのdynamic importという仕組みが2020年に公開されるECMAScriptの仕様で導入されます（tc39/proposal-dynamic-import）。Google Chrome、Firefox、Safariではではモジュールのdynamic importに対応しており、ブラウザでその挙動を確認できます。 dynamic importのメリットは、任意のタイミングでモジュールを読み込めること。たとえば、ページの初期表示に必要なJav
iOS端末のユーザーエージェントの判別コードは多分これが一番短いと思います(35文字) - Qiita
/iP(hone|(o|a)d)/が「iPhone、iPod、iPad」を表現します。test(対象の文字列)を使うことで、対象の文字列に「iPhone、iPod、iPad」が含まれているかどうかを判定できます。判定部分だけで見ると43文字のコードで充分短いように見えますが、もっと短くすることはできないのでしょうか。 /[ \(]iP/でiOS端末は判定できる ユーザーエージェントの一覧が記載されている「歌うキツネ : User-Agent (ユーザー エージェント) 一覧」（※1）を見ると、iPhone、iPodは「(半角スペース)iP」が含まれているか、iPadは「(iP」が含まれているかどうか（※2）で判定できることがわかります。したがって、iOS端末のユーザーエージェント判別は、次のようなコードで実現可能となります。 [ \(] : 半角スペースまたは(が含まれる iP : iPが
iPhone Xを購入せず、無料でウェブページの表示確認を行う方法 (macOS) - Qiita
今年10月に発売が予定されているiPhone Xは、その独特なディスプレイの為にセーフエリアを意識したウェブデザインが必須です。iPhone Xで意図せぬ表示にならないように実機の購入が必要だと考えるかもしれませんが、実はmacOSユーザーであれば、iPhone Xを購入せず無料でウェブページの表示確認を行えます。このエントリーでは、iPhone Xでの表示確認方法について紹介します。 ▲ iPhone Xでの表示確認をしている様子 iPhone Xで起こりうる意図せぬ表示 たとえば、画面最下部にコピーライトを固定表示しているサイトをよく見かけますが、iPhone XのSafariではメニューバーを表示する為のボタンで隠れる可能性があります。また、横持ちでコンテンツの左右が途切れてしまう可能性もあります。 ▲ 「iOS Human Interface Guidelines」より これらの表
Photoshop・Illustratorの新規ドキュメント作成を一瞬で爆速にする方法 - Qiita
Adobe Photoshop CC、 Adobe Illustrator CC(共にCC 2017)で新規ドキュメントを作成すると、最近使用したファイルやテンプレート・プリセットが表示されるため、表示はあまり早くありません。 渋谷Stocker.jp / Spaceで開催された「スマートフォン時代のWebデザインスクール」の体験レッスンに参加した際、この新規ドキュメント作成を高速化する設定を教えていただき、ストレスフリーなドキュメント作成ができるようになりました。主催者様より許可をいただきましたので、シェアします。 従来のドキュメント作成インターフェースで起動を高速に CC 2017の新しいドキュメント作成機能では、豊富なテンプレートやプリセットを選択してドキュメントを選択できるようになりました。しかし、案件によってはテンプレートやプリセットが不要な場合も多いことでしょう。この新機能を使
EmmetでHTML 5.1のレスポンシブイメージを効率よく記述しよう - Qiita
HTML、CSSを短い文字数で打てるプラグインEmmetを使いこなせば、コーディングの時間は大きく短縮されます。昨今のEmmetでは、HTML 5.1のレスポンシブイメージ(※)を効率的に記述できることをご存知でしょうか？ 本エントリーではEmmetでレスポンシブイメージのコードを効率的に記述する方法を紹介します。 ※ 参考記事「レスポンシブイメージで画像の表示を最適化 〜CSSもJSもいらないHTML 5.1の新機能 - ICS MEDIA」 srcset の記述 レスポンシブイメージでは、デバイス環境に応じた最適なファイルサイズの画像を表示するためにimg要素のsrcset属性を用います。Emmetでは次のように記述します。
FlexboxでAndroid 4未対応のボックス折り返し(flex-wrap)を実現する方法 - Qiita
CSS3のFlexboxを試した人からよく聞くのが「Android 4系でボックスの折り返しができない」という声です。本記事ではポリフィルを使ってAndroid 4でもflex-wrapによるボックスの折り返しを実現する方法を紹介します。 なお、Flexboxの基本については記事「初心者でも始められるFlexbox入門 - ICS MEDIA」を参照ください。 Android 4におけるflex-wrapの挙動 Android 4におけるボックスの折り返しができないとはどういうことなのか、まずその挙動を確認してみましょう。 flex-wrapプロパティにwrap値を指定すると、親要素の横幅を超えたときにボックスが折り返し、複数行のレイアウトが可能になります。 下記のようなHTML・CSSコードを例にして考えてみます。リストで並べたボックスに対して、Flexboxレイアウトと折り返しを指定し
無駄なコード入力を今すぐ辞められるWebStormのLive Templatesが便利 - Qiita
プログラミングで頻出するfor文、皆さんはどう書いていますか？ WebStormにはfor文、for in文、use strictといった、JavaScriptや他の各言語で使用するテンプレート文を即座に挿入できる「Live Templates」機能があります。 for文の挿入はitar for文の挿入には、JavaScriptファイルにてitar(※)と入力後、Tabキーを押します。 ※ 「Iterate elements of array (配列要素の反復)」の略語 また、事前に配列を定義していた場合は、その配列についてのfor文が挿入されます（下図ではmyArray）。 様々なテンプレートの挿入が可能 自動挿入できるのはfor文だけではありません。 itinでfor..in itinの略語でfor..in文が挿入されます。 ritarで逆順のfor ritarの略語で逆順のfor文が
[正式版対応] 5分で導入できるBootstrap 4 超入門 〜タブの作り方〜 - Qiita
この記事は大幅に加筆・修正して「最新版で学ぶBootstrap 4入門 - タブの作り方 - ICS MEDIA」に引っ越しました。 Google検索で辿り着いた方にリンク切れとなっては申し訳ないので、元の記事を残しています。ご了承ください。 最新版で学ぶBootstrap 4入門 - タブの作り方 - ICS MEDIA Register as a new user and use Qiita more conveniently You get articles that match your needsYou can efficiently read back useful informationYou can use dark themeWhat you can do with signing up
![[正式版対応] 5分で導入できるBootstrap 4 超入門 〜タブの作り方〜 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/d7f57f8f463111ad8924edcbc3a98aaa2c53b03d/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9JTVCJUU2JUFEJUEzJUU1JUJDJThGJUU3JTg5JTg4JUU1JUFGJUJFJUU1JUJGJTlDJTVEJTIwNSVFNSU4OCU4NiVFMyU4MSVBNyVFNSVCMCU4RSVFNSU4NSVBNSVFMyU4MSVBNyVFMyU4MSU4RCVFMyU4MiU4QkJvb3RzdHJhcCUyMDQlMjAlRTglQjYlODUlRTUlODUlQTUlRTklOTYlODAlMjAlRTMlODAlOUMlRTMlODIlQkYlRTMlODMlOTYlRTMlODElQUUlRTQlQkQlOUMlRTMlODIlOEElRTYlOTYlQjklRTMlODAlOUMmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZ0eHQtY2xpcD1lbGxpcHNpcyZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPWQ1Njk1MDdkNDU2MWU3YmY1YjdlYzhlMjMwYTM1ZmUw%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwdG9ua290c3Vib3lfY29tJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz0xNTZjNzQwNmRmOTMyOWVhODNlOThjODZjZjhhMGJkMQ%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3D98330414268d2d595889667663ad6192)
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
