どの環境でも綺麗なゴシック体、明朝体のフォントを指定する | GRAYCODE HTML&CSS
ブラウザやOSによって異なるフォントですが、どの環境でも綺麗に表示されるゴシック体／明朝体を指定する方法について解説します。 この記事のポイント 様々な閲覧環境におけるフォントの表示を確認する どの環境で閲覧しても近い見た目のフォントを選ぶ Windows環境でも綺麗な明朝体を表示する 閲覧者の環境によって見え方が異なるフォント HTMLのフォントはfont-familyプロパティで指定することができますが、サイトを閲覧する人のOSやブラウザによって表示はかなり異なります。 それでも制作の都合上、可能な範囲で表示を同じように見えるよう整えたいものです。 そこで今回は、環境ごとのフォントの見え方を確認しつつ、ゴシック体や明朝体に整える方法について解説していきます。 Webフォントについては、別記事「Webフォントを使う」をご覧ください。 環境ごとのフォントの表示例 まずは、font-fami
【入門向け！】独学に最適なHTMLを学べる学習サイト20選
【入門向け！】独学に最適なHTMLを学べる学習サイト20選 初心者向けにHTMLを独学で学習できるサイトをまとめて紹介しています。入門向けでかつ無料で利用できるので、これから始める人におすすめです。自分に合った学習スタイルでHTMLの勉強を始めてみてはいかがでしょうか！ テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査 Web開発やデザインをやってみたいけれど、何から手をつければ良いか分からないという方もいらっしゃるかもしれませんね。 Web
[jQuery]別ページから特定のタブにダイレクトリンクする方法
jQueryを使うと簡単にタブを実装することができます。しかし、ただタブを作るだけではなく、他ページから任意のタブにアクセスしたい・・・なんて事はありませんか？ 例えばタブが3つ並んでいる場合に、他ページから遷移して2番目のタブをアクティブにしたい・・・等。 今回は、jQueryを使用して特定のタブにダイレクトリンクする方法をまとめてみました。 [jQuery]別ページから特定のタブにダイレクトリンクする方法 [サンプル] ここではリンク元ページをtab.html、タブページをtab2.htmlとしています。 tab.htmlにあるhrefの「#」以下を取得して、リンクに応じたタブを表示させる方法を記述します。 デモページはこちらです。 2016/04/07[追記]：ダイレクトリンクではなく、特定のタブをアクティブにするだけが良い場合はこちらの記事をご参考までに。 [jQuery]パラメー
![[jQuery]別ページから特定のタブにダイレクトリンクする方法](https://cdn-ak-scissors.b.st-hatena.com/image/square/35747428cb8fbf7cd31b60fc72cc5256327a2eca/height=288;version=1;width=512/https%3A%2F%2Firohacross.net%2Fwp-content%2Fuploads%2F2015%2F02%2Fi_wp_tab.png)
画像を使わない！CSSだけで矢印を作る方法【初心者向け】現役Webデザイナーが解説
画像を使わない！CSSだけで矢印を作る方法【初心者向け】現役Webデザイナーが解説 初心者向けにCSSだけで矢印のアイコンを作る方法について解説しています。画像を使わずにCSSで矢印を作れるようになればサイト制作にも役立つはずです。実際にコードを書きながら例をもとに説明しているので、ぜひご覧ください。 テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査 今回はCSSで矢印を作る方法を説明します。 今まで画像を使って矢印をつけていたという方も、自
【CSS】デバイス幅に合わせたサイズ可変のメニューボタンをbackgroundで作る
こんにちは。転職して、コーディングする機会も増えてきましたコーダー初心者井畑です。 今回はスマホのコーディングで苦戦したところがあったので、備忘録としてメモしておきます。 同じような悩みをもっている方の助けになれば幸いです。それではどうぞ! 今回作りたいもの 今回作りたかったのは、上図のようにデバイスの幅にあわせてサイズ可変するメニューボタンです。 問題は、メニューボタンを背景画像(background)として表示することです。これが難しかった… 問題点:背景画像の高さ指定がうまくいかない… 背景画像(background)の幅はデバイスの幅サイズによって可変できるので問題ないのですが、高さは基準となるサイズが無いので、指定しないと高さが0になってしまいます。 だからといって高さを100pxのように指定してしまうと、デバイス幅が変わった時に画像が切れたり、無駄な余白ができてしまいますX(
プログレッシブエンハンスメント（Progressive Enhancement）という考えかた｜ウェブユーザビリティ向上を支援するWebsite Usability Info
公開日 : 2010年6月6日 (2021年2月2日 更新) カテゴリー : アクセシビリティ 最近、プログレッシブエンハンスメント（Progressive Enhancement）という言葉をよく目にするようになりました。Webユーザーの増加、ユーザーの閲覧環境の多様化（パソコンだけでなく、携帯電話やスマートフォン、支援技術など）、ユーザーの抱える身体的状況の多様化（障害、加齢、怪我、など）、といった背景を踏まえて、より幅広く、多くの人が情報にアクセスできるようにすることを目指したWebサイトの開発理念です（Webアクセシビリティを実現するための技術的方法論のひとつとも言えますね）。以下、簡単にご紹介したいと思います。 基本的な考えかた あらゆるユーザーに対して、基本的な体験ができるようにします（たとえば、そのサイトが伝えたい情報には、どんな閲覧環境下にいるユーザーでもちゃんと到達できる
もう、class名やid名で悩まないんだからっ！！｜CSS HappyLife
class名やid名って付ける時悩みませんか？ 今でもボクは結構悩むんですが、そんな悩みを解決する為に、人さまのソース覗きまくってよくあるclass名とid名を拾ってきました。 これで、チョットだけ作業効率アップ！？ 2010年6月10日追記： この記事自体、2007年 1月15日に書かれてるんでかなり古いです。 あくまでも参考程度に留めてもらうのが良いかと思います。 今だったら、html5の要素を参考にしたりして付けるのが、今後の事を考えると良いのかなーと思います。 また、善し悪しの判断はせずに公開しているものですが、位置に関するのは仕様変更に弱くなるのでオススメはしません。 全体に使えそうな感じ wrap wrapper top-wrapper wrapperAll frame mframe all-frame container page pagetop all allContent
hail2u.net - Weblog - floatで並べたリストのセンタリング
ページング・ナビゲーションなどでリスト項目をfloat: left;で横に並べるというのは割りと良く使われると思う。並べること自体は特に難しいわけではないが、その並べたリスト全体をセンタリングしようとするとちょっとややこしい。display: inline-block;を使う手法やdisplay: table;を使う手法という黒魔法的(私見)な手法で実現可能だが、position: relative;でもいける。 ややこしい理由は簡単で、センタリングでよく使われるtext-align: center;やmargin: 0 auto;といった手法が通用しないから。検索するとすぐ出てくる比較的メジャーなdisplayで頑張る方法もわかりやすいし悪くはないのだけど、同一セレクタ内で複数のdisplayを駆使する必要があることやzoomマジックなどを併用する必要があることからコードがややこしくなる
liタグの中に<p>タグやら<dl>を入れるのはあり？ - OKWAVE
#1 ORUKA1951です。 #1の説明は、すこし専門的過ぎたかなということと、なぜリストにするかを含めて説明しておきます。 まず、UL-unordered list 順不同リストは、文字通り順番の無い並列リストです。 ★複数が同列でたくさん並ぶのでtableはおかしいですね。画像の数だけ横に長いのならtableでも良いですが、 ★携帯端末では縦に並びます。 ディスプレイの幅が狭いときもtableのように、はみ出ません このように、写真とそのタイトルと説明を羅列したい場合、文書構造上は最適なのはリストだと思います。リストに何を使うかとなると悩むところですね。 OL ordered list 序列リストは、順番が必要なとき以外は使わないでしょう。 DL definition list 定義リストでも良いかな？ ・・・そして、なによりもリストにしておけば、携帯端末や読み上げソフト、あるいは検
見出しタグh1など :検索エンジン最適化で順位アップ ::SEO塾(旧)
CSSソース h1 { font-size: 175%; line-height: 1.2em; } h2 { font-size: 150%; line-height: 1em; } h3 { font-size: 125%; line-height: 1em; } 文字サイズは、「font-size」を用いる。またサイズは、パーセントなどで、相対指定にしておく。「20pt」「16px」など、絶対指定するとアクセシビリティとして難あり。 最後に、行間が空き過ぎないように、「line-height」を。こちらも値は「1em」などの、相対指定で。 見栄え h1・h2・h3は、順位アップ効果が非常に高いが、そのまま使っては、文字の大きさや改行など、表示のうえで問題が出てくる。 だから、スタイルシートが本領を発揮するのだ。また見出しタグは、CSSを用いてこそ、構造的記述としても
ドラッグによるテキストの選択をキャンセルする【CSS, HTML, JavaScript】 - Programming Magic
Webページでは普通、マウスでドラッグするとテキストを選択することができるが、JavaScriptやスタイルシートを使うことで選択を防ぐことができる。 ただし、これはサイトの文章をコピーさせない目的で使うことは推奨しない。 紹介する方法でドラッグによる選択を防いだとしても、Ctrl+Aの全選択を防ぐことができないことが多く、ソースを表示させればコピーできてしまう。 さらに、文章をコピーできないサイトは不便で、ユーザに不快な思いをさせてしまう可能性が高い。 このドラッグによる選択をキャンセルする方法は、JavaScriptなどでドラッグで特殊な効果を表現する際に、通常の選択はしてほしくないという場合などに使うと良い。 例えば、テーブルのセルをドラッグで選択するサンプルのような場合がある。 これでテキストを選択してしまうと、おかしく見えてしまう。 ドラッグによる選択をキャンセルす
CSS HappyLife
もう放置して長い当ブログ...なので、Adsenseの自動広告ってのを試してみようかと思ってONにしたら、すごいことになった！ これは中々に酷いですね。 とまぁそれはさておき、すごい久しぶりに個人の趣味っぽい感じのサイト作りました。 - 探そう！好きな恐竜 なんで恐竜！？って感じしますね。 正直、恐竜には全然興味なかった側の人間です。 もう完全にただのお知らせや告知ブログ...！ 初版の発売から4年経ち、ありがたいことに改訂のお話を頂いたので、6月～8月辺りに森田 壮さんと執筆を行い、2017年9月15日に改訂2版が発売しました。 かなり頑張って加筆・修正などを行ったので思ってたより大変な執筆でした。 初版と改訂2版の詳しい違いに関しては、サポートサイト に載せておいたのでそちらを見て頂けるとありがたいです！ 初版と改訂2版の違い | Web制作者のためのSassの教科書 改訂2版 - 公
Bos138
Selamat datang di Bos138, situs games online terkemuka yang siap memberikan Anda pengalaman bermain terbaik dan paling menguntungkan. Sebagai salah satu situs games online yang paling terpercaya, kami menawarkan berbagai macam permainan mulai dari taruhan olahraga, kasino, poker, hingga permainan slot yang seru dan mengasyikkan. Kami memahami bahwa kenyamanan dan keamanan adalah prioritas utama ba
ASCII.jp：Web制作会社が作った！超使えるJavaScriptライブラリ
「Webサイトを作るときに本当によく使う機能を、自分で作らずにさくっと実装したい」――。そんなワガママな願望をかなえてくれる JavaScriptライブラリが登場した。ミツエーリンクスが今月オープンソースとして公開した「MJL（MITSUE-LINKS JavaScript Library）」は、Webサイト制作に必須の“最小限の機能”に絞ったJavaScriptライブラリだ。 昨今相次いで公開されている、リッチなUIを実現するJavaScript/Ajaxライブラリとは異なり、MJLの機能はとてもシンプルだ。もともとWeb制作会社であるミツエーリンクスが「自社標準ライブラリ」として作成したものだけあって、汎用性・実用性を重視したライブラリになっている。 具体的な機能は以下の6つ。確かにどれもよく使いそうなものばかりだ。 画像のロールオーバー Flashオブジェクト埋め込みの機能拡張 新規
Webデザイン・デザイナーに役立つネタのまとめ | デザインフィードデータベース
Webデザイン・デザイナーに役立つネタを収集して、データベースにまとめて公開しています
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[jQuery]パラメータを利用して別ページから特定のタブをアクティブにする方法
デザインサンプルで学ぶCSSによるスタイリング～「フォーム（検索ボックス）」編
http://welkin.s60.xrea.com/blog/200903-CSS_Hacks_for_IE8_etc.html&page=2
サービス終了のお知らせ
worldending.jp