レスポンシブ対策！電話番号リンク（tel:）をスマホのみ有効にする３つの方法
2024年04月06日非レスポンシブのサイトをレスポンシブ化いたしました。2024年04月05日テーマファイルが編集できない不具合を解消いたしました。2024年04月04日WordPress、テーマ、プラグイン、のバージョンアップを担当いたしました。2024年04月03日不具合で表示されなくなったサイトを表示される状態まで復旧いたしました。2024年04月02日お問い合わせフォームを再構築いたしました。2024年04月01日不具合で表示されなくなったサイトを表示される状態まで復旧いたしました。2024年03月31日サーバー移管に共に表示されなくなったサイトを表示される状態まで復旧いたしました。2024年03月30日WordPressの操作方法をサポートいたしました。2024年03月29日サイドバーに人気記事を表示させる仕組みを導入いたしました。2024年03月28日テキスト等の簡易な修正を
【2023年版】おすすめのリセットCSS（reset.css）3選【CDNのコピペあり】
WEBサイトがブラウザによって見え方が変わってしまうのを無くすリセットCSS（reset.css）。 リセットCSS（reset.css）と一言で言っても、ブラウザ同士の見え方だけを調整したもの、全てのタグをリセットさせるもの、単位が違うものなどなど、種類が多くあります。 そこで今回は、私の独断と偏見でまとめたおすすめのリセットCSS（reset.css）を紹介します。 destyle.css 個人的に一番よく使うのがこのdestyle.cssというリセットCSS（reset.css）。 このdestyle.cssは、h1タグだろうとpタグだろうと全部共通の大きさに設定されるリセットCSS（reset.css）。 全てが同じ大きさになるので、いちいちスタイリングする手間は増えますが、CSSで各タグの大きさ調整が柔軟に対応できるのでお気に入りのreset.cssです。 各タグの表示を紹介する
【2023年版】font-familyの正しい指定方法・タイプ別おすすめフォント設定例
この記事では、フォントを指定するためのCSSプロパティ「font-family」の書き方について一から詳しく解説します。font-familyを設定したことが無い方でも、正しくフォントが指定できるように、プロパティの書き方から、OSごとの設定の違い、おすすめのフォント設定例などもご紹介します。 「font-familyはいつもコピペしている…」なんて方も、正しい知識が有るか無いかは大きな違いです。ぜひこの機会に、font-familyの正しい設定方法をマスターしてください。 ※本記事は、各OSの標準インストールフォントや、ブラウザのアップデート状況などを踏まえて、なるべく最新の情報をお届けできるように、内容を随時更新しています。著者の調査した情報に基づいて執筆しているため、内容に間違いや不備のある可能性もあります。（最終調査日：2023年7月） font-familyの役割とは CSSのf
【Labs】CSSだけでドロップダウンメニュー
6月更新・前月(5月)の人気記事トップ10 06/06/2024 ( 02 ↑) 【Labs】position:absoluteとwidth:100%を指定すると横幅の設定がうまくいかない場合の対処方法について ( 01 ↓) 【Mac】macOSをHigh SierraからMontereyにアップグレード ( 03 – ) 【Mac】Safariでソースコードを見る方法 ( 04 – ) 【jQuery】入門2. jQueryをHTMLに組み込む ( 05 – ) 【Mac】横画面で撮影した動画をYouTubeショート用にMacのiMovieで縦画面に編集する方法 ( 08 ↑) 【Labs】CSSだけでドロップダウンメニュー ( 09 ↑) 【Labs】PHPのエラー表示をなくす方法 ( 06 ↓) 【iPhone / iPad】iPhoneのツイッターアプリでユーザー名をコピーする方
The Shapes Of CSS | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! CSS is capable of making all sorts of shapes. Squares and rectangles are easy, as they are the natural shapes of the web. Add a width and height and you have the exact size rectangle you need. Add border-radius and you can round that shape, and enough of it you can turn those rectangles into
CSSのみで作るドロップダウンメニュー(シングル＆多階層＆メガ) | UNORTHODOX WORKBOOK | Blog
jQueryを利用したものしか作ったことがなくて、今後、使いそうな機運があったので、今さら感は半端ないですけどCSSだけで実装するドロップダウンメニューを作ってみました。 こういうのは使い回しすることが多いので、自分用にHTMLとCSSのコードを載せておきます。使いたい方がいらっしゃいましたら、ご自由にお使いください。 作ったのは、普通のドロップダウンメニュー(シングル)、多階層、メガドロップダウンメニューの3種類で、1つのグローバルナビに全てを詰め込んでいます。1種類だけ使いたいという場合もあると思うので、コード自体は種類によって個別に記載しています。そのために、非常に冗長となっていますがご了承ください。 デモと共通の部分 このドロップダウンメニューのデモは以下のリンクから見れます。 DEMO ドロップダウンメニュー自体は、ul要素でマークアップしています。 各種(シングル・多階層・メガ
CSSセレクタのチートシート｜37パターンを一覧で解説
CSSセレクタのチートシートでは、要素セレクタ / classセレクタ / idセレクタ / 属性セレクタ / 複数セレクタ / 子孫セレクタ / 兄弟セレクタ / 隣接セレクタ / 擬似クラス / 擬似要素 / 全称セレクターから37パターンのセレクタの説明と実際のコードで使い方サンプルを紹介しています。
CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説 | コリス
CSS Flexboxとは水平または垂直に要素を配置し、柔軟なレイアウトを実現できるCSSのレイアウトモジュールです。複雑なレイアウトでも今までより少ないコードで、よりシンプルなプロセスで実装することができます。 CSS Flexboxの基礎知識、Flexboxの各プロパティがどのように機能するのか、Flexboxでどのようにレイアウトを実装するかを視覚的に解説します。 【アップデート: 2022年6月16日】 IEがサポート終了したことにあわせて、修正しました。 【アップデート: 2021年8月1日】 Flexboxの解説を2021年の現状にあわせて、修正しました。 【アップデート: 2020年8月23日】 Flexboxの解説を2020年の現状にあわせて、修正しました。 【アップデート: 2019年3月27日】 Flexboxの解説を2019年の現状にあわせて、修正しました。 【アップ
ideahacker.net - ideahacker リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
CSSのfont-sizeが%とかemとかremとかvwで指定されてると、ビビっちゃう君と僕を救う2分 - Qiita
CSSのfont-sizeが%とかemとかremとかvwで指定されてると、ビビっちゃう君と僕を救う2分HTMLCSSHTML5CSS3 ーーーーーーーーー 追記 2020年10/15 この歳になるとこういう記事のアプトプット怖いですね。。 とりあえず周り見てると、こうやってる人多いです html,body{ font-size:62.5%; } って書いてあげて そうすると 1.0rem が 10pxになるみたい。 そんで例えば24pxにしたい場合は2.4remって指定してあげるみたい。 以上。 ーーーーーーーーー いまだにレスポンシブ怖い、、、、。 なぜなら%とかemとかremのフォントサイズ指定があるから。。。 これらをなんとなくでしてる人。 途中で引き継いだ案件とかでpx以外が指定されててビビってしまった 僕とあなたへ捧げます。 😭 大前提 CSSのフォントサイズ指定方法は次の2つ
CSS3のセレクタ全42種 まとめておさらい使い方リファレンス | WP-E (仮)
こんにちわ。WP-Eイクラこと@ampersand_xyzです。 CSS3のセレクタ、ちゃんと覚えてる？ 普段使わなかったりするようなセレクタって、すっかり脳みそから抜け落ちてしまい、適用されているスタイルを確認したときに あれ？コレなんだったっけ？ というセリフを何度心のなかでつぶやいたか分かりません。 また、場面によって必要に応じたセレクタを使えてるかどうかというところも気になるところ。どんなセレクタがあるのかを覚えておけば、たとえばDOMの動的生成をするときに無駄な分岐処理をしてstyle適用とか、JSでゴリゴリスタイル付与とかしなくてよくなるはずです。 おさらい用チートシート作成を兼ねて、Selector Level3 のSelectorsについて、セレクタの記法と使い方のgistつけてまとめていきたいと思います。 なお、仕様書の日本語訳は以下のページをご参照ください http:/
CSSで作るシンプルな矢印アイコン29個 | 株式会社プレスマン
最近ではCSS3の対応ブラウザが増えたおかげで、画像を使わずともサイト上で色々な表現ができるようになりました。 CSSでデザインの実装を行う場合、｢カスタマイズやメンテナンスが容易」｢レスポンシブWebデザインとも相性が良い」｢画像を読み込まないのでモバイルユーザーにも優しい」｢Retinaディスプレイなど高解像度の環境で見ても綺麗」等、制作側とユーザーの両方にメリットがあります。 今回は、フラットデザインのWebサイトなどでよく見かける、シンプルな矢印アイコンのCSSをいくつかご紹介したいと思います。 目次： 共通HTML＆CSS シンプルな矢印アイコン シンプルな矢印アイコン シンプルな矢印アイコン（大） シンプルな太い矢印アイコン シンプルな太い矢印アイコン（大） 斜めの矢印アイコン 右上向きの矢印アイコン 右上向きの矢印アイコン（大） 右下向きの矢印アイコン 右下向きの矢印アイコン
【5パターン】画像を使わず CSS3 のみで作れる吹き出しを作ってみた – Pure CSS3 Balloons | Stronghold Archive
どうもこんにちは、Honma です。今回の Tips は CSS のみで作れる吹き出しのデモです。簡単なツールチップなどにも利用できるかと思います。 CSSのみの吹き出し 5パターン×4方向 CSS は長くなるので全てデモページに記載してあります。 吹き出しの仕組み自体は :before :after 要素に三角形や円を作ることで表現しています。 Balloon 4 がうまく表示されない場合は z-index による可能性が高いので、吹き出しを囲う container の 値を 1 にするなど各自調節してみてください。 また、簡単に吹き出しを作るジェネレーター もありますので参考までに！ 以上になります。
【ONZE Reset CSS】新しい「スタイルシート・リセット」のカタチ。
今日は「リセット用スタイルシート」について、その概要と私たちの見解、またウェブサイト制作の現場で実際に利用しているオンズ独自のスタイルシート［ONZE Reset CSS］を紹介していきます。 「スタイルシート・リセット」とは？ 各ブラウザにはデフォルトのCSSが設定されていますが、このスタイルはブラウザによって大きく異なるため、注意深くコーディングをしていかないと後々に各ブラウザ毎の表示の違いに悩むことになり、作業が滞る原因になります。 「各ブラウザ毎の表示の違い」は無視できない重要な問題です。 HTMLとCSSでウェブサイトのデザインを構築していくとき、この相違点を考慮せずに作業ができることが理想です。 そこで、その後のコーディング作業が捗るように「各ブラウザのデフォルトのスタイルをあらかじめリセットしておこう」というのが「スタイルシート・リセット」の基本的な考え方です。 普及している
[CSS]横スクロール時にヘッダやフッタが切れてしまう時の解決方法
ヘッダやフッタがブラウザの横幅より広い際に、横スクロールするとヘッダとフッタが切れてしまうのを解決する方法を紹介します。 これはIE6などの旧式のブラウザだけでなく、Firefox3.6やChromeでも起きる現象です。 How to Resolve a Fluid Header/Footer Problem When the Window is Resized デモページ（不具合版） ※キャプチャはFirefox3.6（不具合の確認は横幅を小さくして） この現象が起きる条件は下記のようになります。 ヘッダとフッタのサイズは指定されていない。 →横いっぱいに広がる。 コンテンツエリアのサイズは指定されており、「margin:auto;」で中央に配置。 ブラウザのサイズはコンテンツエリアのサイズより小さい。 →ブラウザに横スクロールバーがでる。 期待される表示は、下記のようにコンテンツが中央
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSで簡単に実装できるクールなアニメーションドロワーメニュー10選【上下左右・階層・スライドメニュー・ハンバーガーメニュー】
https://www.okuni.me/entry/only-css-sidebar-fixed
SassでCSS3のcalcを使えるようにする
要素の横幅と高さの比率を保つ | 集の一期一会
CSS Arrow Please - By Simon Hoejberg - @shojberg