CSSでメディアクエリ(Media Queries)の基本的な書き方、記述の意味を理解し、「何となく使う」を卒業する。 | WEMO
CSSでメディアクエリ(Media Queries)の基本的な書き方、記述の意味を理解し、「何となく使う」を卒業する。 2019 8/15 今回は、レスポンシブで絶対にお世話になるCSSの メディアクエリ（Media Queries）について。基本的な書き方や記述の意味についてまとめていきます。 なんとなく @medeia screen and ... とか書いているけど、 screenってどういう意味？とか、そんなレベルの話です。メディアタイプ・メディア特性・区切り方やそのキーワードの意味など...。 先日、 @media only screen...という書き方を目にした時に onlyの意味がわからず、それだけを調べるつもりが、結構知らないことがあってびっくりしました。 今までがいかに「何となく」だったかを痛感し、せめて基本的なことくらい分かっておこうと思った次第です。 はじめに 今回
吹き出しで会話形式にするのをめっちゃ楽にしてみた【はてなブログ】 - SHIROMAG
2016年10月2日17：53に追記： コード修正したのでそれ以前にコードを貼り付けたかたは貼り直しお願いします。お手数おかけいたします。 2019年12月23日17：20に追記： デザイン、CSSを微調整しました。 CSSとChrome拡張を使って会話形式の記事を書く 今回は、はてなブログで簡単に会話形式の記事を作る方法を紹介します。 吹き出しと画像を使って会話形式にする方法は他の記事でも紹介されているのですが、すごく面倒なのです。 「会話形式の記事書くの面倒」「シロマどうにかしろ」という意見があったので、楽に実装できる方法を頑張って作りました。 最初の設定は少し面倒です。ただ、一度設定してしまえば、後はめちゃ楽ちんになると思います。 見た目はこんな感じ↓↓ 先生、今日は吹き出しを簡単に実装する方法を紹介します。 運動と瞑想の習慣がない者の末路はいつも悲惨だ。恐ろしい恐ろしい。 ・・・
うわっ、私のサイトBootstrapくさすぎ!? たった数文字変えるだけでBootstrapのくさみが抜ける7つのCSSテクニック。
なんか、このサイトBootstrapくさい。そう感じることはありませんか? その理由はズバリ、欧文ベースでつくられたフレームワークを文字構造の違う日本語で適用した際に不都合が出てしまっているからです。 それらが醸し出す違和感を放っておくと、Bootstrapくささを生み出す大きな原因になってしまいます。 そもそもの問題として、欧文と比較して和文は文字の要素が多く、文字自体のリズムも少ないため、どうしても複雑で単調に見えてしまいます。 しかし、和文だからといってあきらめることはありません。BootstrapのCSSを少しだけ変えるだけでグッと見た目がよくなる隠し味をご紹介します。 1. line-heightで行間にゆとりを。明朝やゴシックなど、フォントの種類が言葉の印象を表すように、文字の行間は読みやすさ、文章全体の雰囲気を左右します。 欧文をベースに設計されたBootstrapをそのまま
コピペ可ですぐに役立つ！マテリアルデザインを極めるHTML/CSSスニペット30個まとめ
Googleが2014年に提唱したデザインガイド「マテリアルデザイン」。最近の新しいウェブサイトでも、このマテリアルデザインの考え方や基本原則を取り入れたものが増えています。 今回は、コピー＆ペーストで手軽にマテリアルデザインを再現できるHTML/CSSスニペットをまとめています。 対応しているスニペットは、ナビゲーションメニューやドロップシャドウなど特長的な素材から、ボタンやカード型レイアウト、Preloader、ホバーエフェクト、チャット機能、モーフィングアニメーションなどさまざま。ゼロからスタイリングすると時間のかかってしまう作業を短縮できるものも多く、ぜひ実践の現場で役立ててみてはいかがでしょう。 マテリアルデザインを手軽に！CSS/HTML/JSコンポーネント「Material Design Lite」の使い方まとめ お好みのマテリアルデザイン配色でHTMLスニペットを一発作成で
rem単位を用いたレスポンシブ対応ページの実装デモ
Tweet rem単位を用いたレスポンシブ対応ページの実装デモ はじめに 本技術のポイントは1つだけです。可変にしたい要素すべてのサイズ指定にrem単位を用いることにより、普通にやると面倒なレスポンシブ対応がfont-sizeのみの変更で済むことです。 このサイトがデモです。 （ウィンドウ幅を狭くしたり右上のチェックボックスを切り替えてみてください。） きっかけ 2015年9月ごろにAppleサイトのサポートページ（https://support.apple.com/ja-jp/HT...）を開いたところ、大きな表示崩れが生じていました。 Appleサイトのバグ(左: IE Edgeでの表示 右: Chromeでの表示) 画像提供元: 情報科学屋さんを目指す人のメモ CSSを解読したところ、要素のところどころにrem単位を用いたサイズ指定が施されていました。 これは単なる凡ミスではないと考
CSSの@supportsを使ってCSSのみでスタイルの条件分岐をする方法
2015年10月27日 CSS Webブラウザーによって表示可能なCSSが異なるのは、よく知られていることです。例えばChromeやSafariでは問題なく表示される filter は、Internet Explorerではうまく表示されず、別のスタイルを用意しなければいけません。今回は @supports を使って対応しているプロパティー別にスタイルを変更してみましょう。 ↑私が10年以上利用している会計ソフト！ @supports とは？ 指定した (プロパティー:値) の条件に対応しているブラウザーには {} 内に書かれたスタイルを適用するよ、というもの。新しいスタイルの書き方に対応しているブラウザーにはそれを、対応していないブラウザーには従来の書き方で、かつ見栄えの崩れないようにコンテンツを提供できるよう、CSSを記述していけます。「プログレッシブエンハンスメント」というやつですね
ZendEngine勉強会で「拡張ライブラリでなるべく簡単に構文を追加する方法」というタイトルで喋ってきました
ご無沙汰しております、アシアル笹亀です。 ブログを書くのは、大変久しぶりになります。実はアシアルでは最近、noteもはじめております。アシアルの仕事の取り組み方、考え方、様々なメンバーについて知ることができます！是非、ご興味があるかたはこちらも一読いただけますと嬉しいです。 https://note.asial.co.jp/ 久しぶりにiPhoneアプリをアップデート申請をするときありますよね？ iPhoneのアプリを継続的に保守管理をしていると、申請作業をクライアント様におまかせして、あまりエンジニア自身で長い間、アップデート申請をしてこなかった方々は何気に多いのではないかとおもい（自分もその１人）、ブログにも残しておこうとおもいました。 こまめに改修などを加えており、その度にアップデートの申請をされている場合には、あまり実感はないかもですが、１年振りとかにアップデートの申請をしたりする
[CSS]最近のWeb制作でよく使う、Sassのmixinのまとめ
15 essential Sass mixins 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 Sassやってみたい、と考えてる人には下記の本をオススメします。 Sassの初心者からもっと使いこなしたい人まで、Sassを確実にマスターできるオススメの本 -Sassの教科書 box-sizing（ボックスサイズ） opacity（不透明度） column-width（カラム幅） circle（円形） font-size（フォントサイズ） box-shadow（ボックスシャドウ） xPos（要素の座標） vertical-align（天地の中央に配置） flexbox（フレックスボックス） flex（モダンブラウザの旧仕様にも対応したflexの指定） flex-order（表示の順番） flex-direction（表示の方向） gra
![[CSS]最近のWeb制作でよく使う、Sassのmixinのまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/41a2e814247663ad1040b747f3c634ccd698a028/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201404%2F2014111701.png)
Adobe Brakets - Webデザインの勉強 | Webサイト制作科 6月15日開講クラス
ツールAdobe BraketsBracketsは、HTML／CSS／JavaScriptで開発されている、HTML／CSS／JavaScript用の新しいオープンソースコードエディターです インストール後の画面（文字サイズは大きく変更後） プロジェクトのルート化Dreamweaverでの「サイト管理」に相当ローカルサーバーにも対応しており、プロジェクト毎にローカルホストURLを入力、ローカルサーバー側にて設定も行うとPHPやSSIも動かす事が出来ます「Getting Started」をクリック 「neko」フォルダーを選択した場合 クイックエディットクイックエディットは主に4種類ありますショートカットは全てCtrl+Eで共通で、実行する場所によりそれぞれのクイックエディットが展開します HTMLのクイックエディットid名/class名/HTMLタグ名上で実行すると適用されているスタイルを
LESSで3倍ラクするスマートフォンコーディング 記事一覧 | gihyo.jp
運営元のロゴ Copyright © 2007-2024 All Rights Reserved by Gijutsu-Hyoron Co., Ltd. ページ内容の全部あるいは一部を無断で利用することを禁止します。個別にライセンスが設定されている記事等はそのライセンスに従います。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【図解】CSSだけで画像の縦横比を維持したサムネイルを表示する - Qiita
HTML5 Boilerplate: The web’s most popular front-end template