【2018年版】フロントエンドエンジニアがよく使うWebサービス・アプリまとめ - たこさんちゃんねる(別枠)
[CSS]スマホで要素を高さいっぱいに表示したいのに、期待通りに表示されない時の解決方法
ビューポートを使った単位（vw, vhなど）は、特にスマホの各ブラウザにおいて複雑です。例えば、vwのスクロールバーを考慮する必要がありますか？ サイトのナビゲーションやページコントロールはどうでしょうか？ それらは計算に含まれますか？ スマホで要素をビューポートの高さいっぱいに表示したいのに、期待通りに表示されない時の解決方法を紹介します。 The trick to viewport units on mobile 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 ビューポートの高さ（vh）の仕様 高さいっぱいの要素を表示する方法 ビューポートのリサイズにも対応する ビューポートの高さ（vh）の仕様 W3Cの仕様では、ビューポートの単位をどのように計算するかは漠然としています。スマホでは高さが重要になることが多いので、ビューポー
![[CSS]スマホで要素を高さいっぱいに表示したいのに、期待通りに表示されない時の解決方法](https://cdn-ak-scissors.b.st-hatena.com/image/square/8a5cf0a3bb9540d4d9f77cfb193ce39e28e90836/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201803%2F2018080401-02.png)
フロントエンドのコーダーの頭の中、デザインを見た時にどんなことを考えるのか
フロントエンドのコーダーがデザインを見た時にどんなことを考えるのかを紹介します。デザインカンプを手がかりに、そのデザインが意味する仕様上のさまざまな可能性やそれらを実現するための実装方法を考えるなど、コーダーとして最も楽しい時間の一つです。 Your Brain on Front-End Development 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 デザインがあがってきた！ 複数行のテキストの長さに沿った背景 ヘッダはFlexboxで レイアウトはCSS Gridで 縦書きの要素 テキストの省略 カスタム フォント 画像上のテキスト SVGアイコン・レイティング ハンバーガーメニュー デザインがあがってきた！ フロントエンド デベロッパーの仕事は、さまざまなテクニックとテクノロジーを使用して望まれるUIとUXを引き出す
【2018年度決定版】レスポンシブデザインのブレークポイントはこれで決まり！
こんにちは（・∀・） 以前【Labs】レスポンシブデザインのブレークポイントは！？でブレークポイントをいくつも作ると管理が大変だからメジャーブレークポイントを一つ作って... という投稿をしましたが、 全部じゃなくてもいいので、現在市販されているデバイスサイズをなるべくカバーしたい...というお願いを受けることもあると思います。 今日はそんなオーダーを受けた時にピッタリ、ブレークポイントを細かく設定してみます。細かくと言っても今回作ったブレークポイントはたったの10個です。 あ、やっぱりちょっと多いですか⁉️ でもご安心ください。メジャーブレークポイントは1つです。 それでは最初にサンプルをご覧ください。ブラウザサイズを変えると見出しの後ろに指定してある画面サイズが表示されます。 Result サンプルデモはこちら モバイルファーストでCSSの記述していきます。@mediaで囲われていない
簡単すぎてびっくり！CSSグリッドをレスポンシブデザインに活用するための詳細手順を紹介
Webデザインを行う際に、複数の閲覧デバイスを想定してデザインを行うのは今では当たり前になっています。オンラインでのWebページの閲覧の4分の3はモバイルなので、モバイルでも快適に閲覧できるように、デザインを考えていかなければなりません。 Webデザインで段組を行う手法はさまざまありますが、現時点で最も手っ取り早いのはCSSグリッドを利用する方法です。CSSグリッドは見た目の段組を想定してコーディングできるので、より直感的な段組を行うことができます。 そこで今回は、CSSグリッドをレスポンシブデザインに活用するための詳細手順を紹介していきます。何かと概念的なCSSグリッドですが、ここでレスポンシブ対応するにはどうすればよいか、まとめておきましょう。 CSSグリッドでレスポンシブデザインを実装しよう イメージ画像 floatやflexboxのような「1次元」レイアウトに対して、「2次元レイア
コピペで実装OK、最新トレンドを押さえたすごい HTML/CSS スニペット40個まとめ
ますます進化するウェブデザインの世界を体感でき、コピー&ペーストで利用することもできる HTML/CSS スニペットをまとめてご紹介します。ただいま流行中のWebトレンドの実装を可能にする最新レイアウトから、どんなプロジェクトにも活用したくなるエフェクトやテクニックなどを中心にまとめています。 「Run Pen」をクリックすることで読み込みが開始されます。右下に表示された「Return」で再読み込みし、左上のHTML/CSS/JSタブを切り替えることで、それぞれのスタイリングを確認できます。実際にカスタマイズしたいときは、右上の「Edit on Codepen」をクリックしましょう。 詳細は以下から。 コピペでOK、最新トレンドを押さえたすごい HTML/CSS スニペット40個まとめ 01. Fixed Images That Fades as You Scroll 画面を２分割し、スク
背景デザインを楽しくする、参考にしたい HTML/CSS スニペットまとめ
CSS3 が主要ブラウザに対応したことから、これまではむずかしかったアイデアやコンセプトも、手軽にスタイリングできるようになってきています。今回は、背景デザインにスパイスを加えるエフェクト用コードスニペットを、コード共有サイト CodePen からピックアップしまとめています。 コピペで利用できる手軽なものから、これってどう表現するんだろうという面白スタリングまで、注目をあつめるテクニックを中心に揃えています。デザイン制作に悩んだときに活用してみてはいかがでしょう。 詳細は以下から。 背景デザインを楽しくする、参考にしたい HTML/CSS スニペットまとめ ※ デモが動かないときは、「RETURN」ボタンをクリックすることで、再読み込みされます。 ※ ページの読み込みに多少時間がかかります、すこし待ってからスクロールするとスムーズに表示されます。 Pure CSS Cinema Effe
CSSの@supportsを使ってCSSのみでスタイルの条件分岐をする方法
CSSの@supportsを使ってCSSのみでスタイルの条件分岐をする方法Webブラウザーによって表示可能なCSSが異なるのは、よく知られていることです。例えばChromeやSafariでは問題なく表示される filter は、Internet Explorerではうまく表示されず、別のスタイルを用意しなければいけません。今回は @supports を使って対応しているプロパティー別にスタイルを変更してみましょう。 @supports とは？指定した (プロパティー:値) の条件に対応しているブラウザーには {} 内に書かれたスタイルを適用するよ、というもの。新しいスタイルの書き方に対応しているブラウザーにはそれを、対応していないブラウザーには従来の書き方で、かつ見栄えの崩れないようにコンテンツを提供できるよう、CSS を記述していけます。「プログレッシブエンハンスメント」というやつですね
PSDデザインカンプのスライス不要！DreamweaverでのHTML/CSSコーディングを爆速化する方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、デザイナーの佐藤タカアキ（@sato_tkaaki）です。 僕の主な業務は、Webや紙などのさまざまなものをデザインしていくことなのですが、最近は今まで以上にマルチな動きを求められるようになりました。 何事もそうですが、自分自身が次のステップにいくためには、今までと同じ時間の使い方をしていたらいけません。 つまりは「効率化」することが必須になるわけです。 そこで今回は、アドビさんにお聞きした「WebデザイナーがDreamweaverのExtract機能を使って、PSDファイルから効率よくデザインする方法」をご紹介させていただきます。 そもそもExtract機能とは？ Dreamweaverは聞いたことあるけど、Extract機能ってなんぞ？！と、Extract機能を初めて聞いた方は首を傾げることでしょう。 以下に公式サイトの文言を引用させていただきます。 コンテキストに応じたコ
Free Online CSS Beautifier / Formatter - Styleneat
What does Styleneat do exactly? It organizes and standardizes your CSS - selectors, sub-selectors and properties - in a structure that makes it easier to define page areas and see how they relate to each other. So, for example, it turns this: #id1 { property: value; } #id1 .class1 { property: value; } #id1 .class1 a { property: value; property2: value2; property3: value3; } #id1 .class1 a span { p
オンラインでHTML,CSS,JavaScriptのソースを読みやすく整形してくれるWEBツール
オンラインでHTML,CSS,JavaScriptのソースを読みやすく整形してくれるWEBツール 2013.03.05 他人から受け取ったサイトデータが、 HTMLの記述でインデントされていなくて読みづらい･･･ CSSファイルのプロパティ順もバラバラで気になる･･･ JavaScriptは圧縮されていて読みづらい･･･ そんなご経験ございませんでしょうか。 オンライン上でHTML,CSS,JavaScriptのソースをコピペするだけで、サクっと読みやすく整形してくれるWEBツールをご紹介します。 1.JavaScript 圧縮されているJavaScriptを整形する[ Online JavaScript beautifier ]。 サイト内の入力フィールドに整形させたいソースをコピー＆ペーストし、“Beautify JavaScript or HTML”ボタンを押すだけです。 [ LEF
[CSS]フォームの各ブラウザ間の相違を整え、好みのデザインで美しく表示させるスタイルシート -FormHack
デモページ: フィールドセット FormHackの使い方 FormHackはSassベースで、フォームのデザイン（フォント、幅、高さ、カラー、ボーダー、角丸など）を簡単に好みのスタイルに変更できます。 カスタマイズは、Sassファイルの上部にまとめられています。 /* FormHack v1.0.0 (formhack.io) */ // Config ----------------------------- // Font $fh-font-family: 'Raleway', sans-serif $fh-font-size: 16px $fh-font-color: rgb(40, 40, 40) // Borders $fh-border-radius: 5px $fh-border-width: 1px $fh-border-style: solid $fh-border-co
![[CSS]フォームの各ブラウザ間の相違を整え、好みのデザインで美しく表示させるスタイルシート -FormHack](https://cdn-ak-scissors.b.st-hatena.com/image/square/db8b9840475a6890e8fd894a96d4d6cf1d2d7f90/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201502%2F2015060801.png)
displayプロパティを使ってレスポンシブウェブデザインのtableレイアウトを変化させてみる | バシャログ。
こんにちは。まだ何一つ夏を感じていないmackyです。 今日は、RWDでdisplayプロパティを使ってtableレイアウトのデザインを変化させる方法をまとめてみました。 RWDでテーブルレイアウトを定義リスト風に変化させてみよう tableタグのdisplayの値はデフォルトではtable、thとtdタグはtable-cellとなっていますが、この値をblockやlist-itemなど他の値に変えてみます。 (1) (2) (1)の状態から(2)の状態へデザインを変化させます。 メディアクエリ―を使ってブレイクポイント（480px）を設定し、その中に上書きするCSSを書いていきます。 今回はこんな感じです。 HTML <table border="1" cellpadding="5" cellspacing="0"> <tr> <th>項目A</th> <td>この文章はダミーです。</
position: absolute; の指定で要素が上下左右中央配置になる理由
人様の人気エントリーに乗っかる感じで恐縮ですが、「CSSで block 要素を上下左右中央寄せにする、イマドキの方法。 ： バシャログ。」 という記事が話題になっていたので、なんでその指定で上下中央配置になるのか補足してみます。 詳しい話は下記のリンク先をご覧ください。 CSSでblock要素を上下左右中央寄せにする、イマドキの方法。 ： バシャログ。 何でこういうことを書くかというとですね、例えば CSS でこういう指定をするとこう表示されるっていう話に関しては、仕様書を基準に話して欲しいのです。 「なんかよくわからないけどこういう風に書いたらこういう表示になった。よかったね」 で終わらせるのは個人の自由ですが、仕様書を基になぜそうなるのかの根拠を知るとより一層理解が深まると思いますので。 なので余計なお世話なんですが、下記に小難しく書きます。 解説のためのサンプルソース 例えば、下記の
動くCSSのためのメモ。
CSSでできる事がどんどん増えてます。JavaScriptを使って実装するようなレイアウトやUIも、CSSだけで作れちゃうほど、便利なプロパティがじゃんじゃか増えましたね。ここでは、要素にアニメーション効果をつけるためのCSSを使ったエフェクトについて、まとめてゆこうと思います:)。 CSSで動かす 「動く」といっても、自由自在にぐにゃぐにゃ動かせるわけではなくて、CSSアニメーションでは、プロパティの数値をスムーズに増減させることで、要素のスタイルを滑らかに変化させます。 例えば、下のサンプルでは、p要素にカーソルを合わせた時に、font-sizeの値を、1emから2emに、スムーズに変化するように指定しています。 p { transition: font-size 1s; } 動かすためのマストプロパティ CSSでアニメーションさせるために必要不可欠なのがtransitionプロパティ
[CSS]OS X Yosemiteのように背景が透ける美しいパネルを実装するスタイルシート
昨日発表された2014年秋リリースのOS X 10.10 Yosemiteで採用予定の背景を半透明のブラーで透けさせる美しいパネルを実装するスタイルシートを紹介します。 記事は一日遅れですが、スタイルシートは当日で、仕事が早いですｗ OS X Yosemite Style UI ※Chrome, Safari, Firefox, IE11でどうぞ。 コードは、簡略化するとこんな感じになります。 実際のコードは上記ページを参考にしてください。 HTML タイトルのバーとコンテンツをdivで実装し、articleで内包します。 <article> <div class="title"> <h1>タイトル</h1> </div> <div class="content"> <p>コンテンツ</p> </div> </article> CSS 半透明のパネルのスタイルシートです。 *, *:aft
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
codeofduty.me
ブルマがすごい！外部CSSを一つ加えるだけで今時のコンポーネントやエレメント、レイアウトが簡単に利用できる -Bulma
Icons | Font Awesome
なんでCSSすぐ死んでしまうん
