タグ

関連タグで絞り込む (11)

タグの絞り込みを解除

tipsとhtmlに関するyomogiのブックマーク (22)

  • あまり知られていない、フォームをCSSでスタイルするために役立つ便利なセレクタとその使い方


    フォームをCSSでスタイルするのは難しいと思われていました。しかし、input要素とそれに関連する要素をスタイルするためのあまり知られていないセレクタがあります。いくつかは比較的新しいセレクタですが、昔から存在するセレクタもあります。 フォームの見た目だけでなく、機能も強化するCSSの便利なセレクタとその使い方を紹介します。 Advanced CSS-Only Form Styling by Jonathan Harrell 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 フォームにスタイルを適用したデモ :placeholder-shown :required :optional :disabled :read-only :valid :invalid :in-range/:out-of-range :checked フォーム
    あまり知られていない、フォームをCSSでスタイルするために役立つ便利なセレクタとその使い方

  • もし、HTMLのテキスト周りでデザイナーからこんなお願いをされたら... - Qiita


    HTMLのテキストはPhotoshopのように融通が効かないから、デザイナーからの細かいお願いはだいたい断っている...なんてことありませんか？ モダンブラウザは色んなプロパティが対応してきているので、できることも増えています。 今回は、知っているといざというとき便利なテキスト周りのCSSを集めてみました。 ﹁日本語、文字詰めできないかな？ほら、このカタカナとかキモい。。﹂ ﹁Webで文字詰めだと？無理なんだよあきらめな！﹂なんていう時代はもうとうに過ぎ去っています。OpenTypeのフォントであれば、日本語でもちゃんと文字詰めできるんです。 .class { -moz-font-feature-settings: "palt"; -webkit-font-feature-settings: "palt"; font-feature-settings: "palt"; } ↓こんなかんじで
    もし、HTMLのテキスト周りでデザイナーからこんなお願いをされたら... - Qiita
    yomogi
    yomogi 2017/11/22
    文字詰めや両端揃えなどの話。リガチャ（合字）を調整できるのは知らなかった。
    リンク

  • [CSS]iOS でフォームにフォーカスした時の自動ズーム問題を回避する方法｜CSS｜WEBデザインの小ネタとTIPSのまとめサイト「ウェブアンテナ」

    iOS でテキストフォームをタップしてフォーカスした時、ページ（の文字サイズ）が拡大表示される問題を回避する方法のご紹介です。 テキストフォームに文字を入れようとすると拡大表示される iPhone でウェブサイトを見ていて、テキストフォームにタップしたら… こんな感じでズームしてしまう経験はないでしょうか。 meta viewport にuser-scalable=no を指定する 以下のように、<head>タグ内のmeta viewport でuser-scalable=no を指定することで、ズームを回避することが可能です。

    [CSS]iOS でフォームにフォーカスした時の自動ズーム問題を回避する方法｜CSS｜WEBデザインの小ネタとTIPSのまとめサイト「ウェブアンテナ」

  • divとsectionとarticle要素それぞれの特徴、使い分けと組み合わせ方 -HTML5のセクショニング コンテンツ


    HTML5は、ドキュメントを構造化する際に用いるセマンティックなコードです。あなたがどんなタグを使うかによって、ユーザエージェントにその意味を伝えます。 HTML5のタグにはさまざまなものがあり、中でもsectionとarticle要素は、div要素より有意義な方法でコンテンツを区分する手段として導入されました。これら3つをどのように使い分けるか確認しておきましょう。 Sectioning Content in HTML5 -Div or Section or Article下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 divとsectionとarticle、それぞれの特徴 divとsectionとarticle、どれを使う？ sectionとarticleの組み合わせ方 divとsectionとarticle、それぞれの特徴d
    divとsectionとarticle要素それぞれの特徴、使い分けと組み合わせ方 -HTML5のセクショニング コンテンツ
    yomogi
    yomogi 2015/11/04
    要素内のコンテンツに意味がなければdiv。意味があるコンテンツで、独立しても成り立つものはarticle、そうでなければsection。
    リンク

  • シンプルなHTMLとCSSコピペで実装できるタイトル（見出し）のデザインサンプル 50 | NxWorld


    画像は使用せずにCSSだけでスタイリングしたタイトル︵見出し︶のデザインサンプルで、似たようなものやちょっとCSS追記した程度のものも多いですが全50種類です。 全体的にすごく手間がかかっているようなものはないのですが、似たようなタイトルデザインを使う場合はCSSコピペで実装できると思います。 また、一部複数行に向かないものもありますが、基本的には複数行のタイトルでも見栄えが崩れない感じのものになっており、余白やカラーなどを調整することでデザインを変更するのも容易です。 以下で紹介している内容は一部異なるものもありますが、基本的に下記のようなシンプルなHTMLを使用しています。 ただ、一部異なるものといってもいずれもspan要素を1つ追記する程度です。
    シンプルなHTMLとCSSコピペで実装できるタイトル（見出し）のデザインサンプル 50 | NxWorld

  • HTML5でWebページを作成する時のベースになるシンプルなコードで書かれたテンプレート

    HTML5でWebページを作成する時に役立つ、必要最小限のブランクのテンプレート、ナビゲーションを上部に固定配置、写真画像などの背景画像をブラウザいっぱいに表示させるシンプルなテンプレートを紹介します。 画像: Girly Drop HTML5で作成する時の必要最小限のテンプレート ナビゲーションを上部に固定配置 背景画像をブラウザいっぱいに表示 ※以前、当ブログで紹介したものもバージョンアップされています。 HTML5で作成する時の必要最小限のテンプレート まずは、HTML5でWebページを作成する時にのシンプルなブランクのテンプレート。 A Generic HTML5 Template -GitHub ライセンスはCC0 1.0で、個人でも商用でもクライアントの案件でも無料で利用できます。利用する際に、許可やコピーライトの明記などは必要ありません。 テンプレートはIE9や8以下への最低

    HTML5でWebページを作成する時のベースになるシンプルなコードで書かれたテンプレート

  • html5-css3.jp - このウェブサイトは販売用です！ -  リソースおよび情報

    このウェブサイトは販売用です！ html5-css3.jp は、あなたがお探しの情報の全ての最新かつ最適なソースです。一般トピックからここから検索できる内容は、html5-css3.jpが全てとなります。あなたがお探しの内容が見つかることを願っています！

  • CSSでfloatを指定したボックスを含むボックスの背景が出なくなる件 - Fsiki


    ﹁CSSで段組したらFirefoxで背景が出ねーよっ﹂て話をよく聞くので色々試してみました。 コンテンツメニュー 元になるHTML 特に何も考えずfloatを使った場合 外のボックスに幅を与えてみる 一般的な解決方法 その他の解決方法 overflowを使う 最終回答 番外編 更新履歴 このドキュメントについて 元になるHTML <div id="container"> <div class="leftBox">内容</div> <div class="rightBox">内容</div> </div> 例1(ブログ) class="leftBox"のボックスの内容は﹁サイドバー﹂。class="rightBox"の内容は﹁記事部分﹂。 例2(ウェブサイト) class="leftBox"のボックスの内容は﹁ローカルナビゲーション﹂。class="rightBox"の内容は﹁情報﹂。 例3

  • [CSS]ビューポート(vw, vh)とパーセント(%)、レスポンシブに適した単位の賢い使い分け方法

    先日の記事「フォントサイズの指定方法（翻訳版）」で、CSSの比較的新しい単位「ビューポートの単位(Viewport Units)」について触れました。この単位「vw, vh, vmin, vmax」はブラウザのビューポートのサイズに基づくもので、これらの単位で指定した実際の大きさはビューポートの大きさによって変化するため、レスポンシブデザインにあった単位と言えるでしょう。 これらの単位を使うことは「フォントサイズの指定方法」でフォントサイズに使うことを反対しましたが、レイアウトでは非常に役立つ単位です。 Viewport vs. Percentage Units 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 ビューポートの単位(Viewport Units)とは 要素を幅いっぱいに指定 (% > vw) 要素を高さいっぱいに指定 (

    [CSS]ビューポート(vw, vh)とパーセント(%)、レスポンシブに適した単位の賢い使い分け方法

  • CSSを書く、設計する時に参考にしておきたいCSSのガイドライン・スタイルガイドのまとめ


    大規模なプロジェクト、長期に渡るプロジェクト、複数のメンバーが関わるプロジェクト、そして明日の自分も一年後の自分が見ても分かる、メンテナンス性に優れ、一貫性のあるCSSを書くのに役立つガイドラインやスタイルガイドを紹介します。
    CSSを書く、設計する時に参考にしておきたいCSSのガイドライン・スタイルガイドのまとめ

  • tableをレスポンシブでも破綻しないようにする簡易的な1手法 – WEBUTUBUTU


    レスポンシブテーブルテスト レスポンシブ設定は便利なものです。1ソースでいろいろな幅の画面(=デバイス)に対応できますから、サイトがブログであればメリットがあります。 WordPressにもレスポンシブ設定が施されているものもありますし、自分でカスタム、あるいは一からテーマ作成すれば同様に利用できるでしょう。 もちろん、WordPressにこだわる必要もなく、何らかの手段で画面サイズをブレークポイントとして可変可能であれば成立します。 が、これは構造部分だけの話で、HTMLタグの種類によっては実現の難しいものもあります。 今回は代表的なtableについて少々。なお、特に目新しい方法ではありませんので、﹁その程度か﹂というレベルです。 [2015.1.1追記:﹁記事に手を入れずに対応する方法﹂を追記] [2015.1.1修正:コード内のscrollをautoに変更] 簡易的な方法でtable
    tableをレスポンシブでも破綻しないようにする簡易的な1手法 – WEBUTUBUTU

  • CSSで出来るレスポンシブ対応を考えた table レイアウト | ウェブ戦略・コンサルティング UNIONNET Inc.


    2014.08.18 ▼2021年最新版 ︻コピペOK︼制作会社が実際に使っている、レスポンシブ対応のtableレイアウト スマホ対応・レスポンシブが当たり前になってきてるこの時代、コーダーさんにとってtableがなかなかやっかいものになってきてますね… 会社概要くらいならまだ良いんですが、情報量が多いtableはそのままでは 320px で閲覧した際、なかなか悲惨な事に… 対応方法としては﹃responsive-table.js﹄を代表に、様々なやり方がありますが、今回はCSSで出来る事を紹介したいと思います。 目次2セルの場合の使用した例 横に長い場合 overflow-x とinline-block を使用した例 リスト風にした場合 list-item を使用した例 最後に2セルの場合の使用した例2セルでよく作られてる、会社概要やフォームなどで使えるかと思います。 ﹃
    CSSで出来るレスポンシブ対応を考えた table レイアウト | ウェブ戦略・コンサルティング UNIONNET Inc.

  • コーディング中のクラス名で迷いたくない！よく見るコンポーネントの名前17選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作


    こんにちは。LIGフィリピン支社代表のせいと(@seito_horiguchi)です。 コーディングをしていて、クラス名に迷うことってありませんか？ ボタンや見出しといった、比較的単純なコンポーネントなら﹁.button﹂﹁.headline﹂など、すぐに思いつくかもしれません。 しかし、それが複雑なコンポーネントだったりすると、なかなか思いつかないものです。 そんな悩みを解消したいと思いまして、いろいろなサイトのソースコードを見て、開発者がどんなクラス名をつけているのか調査してみました。 今回は、その中からよく使われていたクラス名と、﹁これはナイスネーミング！﹂と思ったクラス名をピックアップしたいと思います。 thumbnailサムネイル画像。 アイキャッチ画像やギャラリーページの画像一覧などで用いられます。 avatar ユーザのアバター画像。 Webサービスのユーザ情報ページや、ブ
    コーディング中のクラス名で迷いたくない！よく見るコンポーネントの名前17選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
    yomogi
    yomogi 2015/06/22
    英語のつづりを間違えると、軽く学力を疑われる点にも注意。
    リンク

  • 【CSS】決定版！リセットCSS総まとめ


    HTML、CSSでコーディングを始めるときに各ブラウザが持っているデフォルトのCSSを一度リセットする目的のリセットCSS。今回は、現在使われているリセットCSSをまとめてみました。 リセットCSS とは？ 各ブラウザ(IE、FireFox、Chrome、safari等)は、タグ毎にデフォルトスタイルをそれぞれ独自にもっており、それらをリセットするスタイルシートは一般的に﹁リセットCSS﹂と呼ばれています。ブラウザのデフォルトスタイルを有効に使っていこうという考え方もありますが、ブラウザ間の表示差異(例えば、ブラウザ毎に文字サイズが変わったり、余白の広さが変わったりなど)に悩まされることも多々あり、それを解消するために一度まっさらな状態にリセットしてから CSS を書き始めるためのものです。 リセットCSS のメリットとデメリット メリット ブラウザ間の表示の違いを効率良く最小限に抑えるこ
    【CSS】決定版！リセットCSS総まとめ

  • スマートフォンサイト制作にdisplay:tableとdisplay:table-cellが便利！


    2012/10/18‥画像に一部誤りがありましたので、修正致しました。 こんにちは。 スマートフォンサイト制作案件が増えて楽しいKanaです。 スマートフォンサイトのコーディングは、古いブラウザ (ie6とかie6とかie6とか！)のことを考えるとできなかったCSSの指定ができるので、とても楽しいですね！ スマートフォンサイトの制作はリキッドレイアウト。 ナビゲーションの数が奇数！…均等にするにはwidth指定面倒だな〜画像とテキストを横に並べなきゃ…縦方向の揃え位置を指定できたらいいのに…。と思ったことはありませんか？ そんな時の強い味方がdisplay:tableと、display:table-cellです。 スマートフォンサイトのコーディングを頻繁にされている方は、既にご存知かもしれませんが、これからスマートフォンサイト作るよ！という方には、とても便利だと思います！ display:
    スマートフォンサイト制作にdisplay:tableとdisplay:table-cellが便利！

  • Facebook風の無限スクロールが作れるinfinite scroll｜こうめの“これから使える”jQueryプラグイン


    圧倒的な人気を誇るJavaScriptのライブラリー﹁jQuery﹂。サイトに効果をあたえるプラグインが多数あることが魅力ですが、そのプラグインを探すことがWeb制作者の手間になっています。本連載では、﹁こうめ﹂さんこと大竹孔明さんがおすすめのプラグインと実装方法、実装例を紹介します。︵編集部︶ ﹁infinite scroll﹂は、スクロールしてページ下部まで移動すると、次のページを自動的に読み込んで表示するjQueryプラグインです。 インフィニティスクロールという機能でTwitterのタイムラインや、Facebookのフィードでも採用されており、ユーザーが手動でページ送りする手間を軽減します。 WordPressのブログ記事や、ECサイトの商品ページ、またギャラリーサイトなどで効果的な表現になりそうですね。 step1 jQueryプラグインの読み込み jQuery本体をjQuery
    Facebook風の無限スクロールが作れるinfinite scroll｜こうめの“これから使える”jQueryプラグイン

  • あなたがコーディング初心者を脱する方法


    比較的経験の浅めの人のHTMLとCSSコーディングを見ることが増えたのですが、その際にこうしたほうが良いかなーと思う箇所が共通してたりするので、まとめてみました。 ただ以下にあげる例は、状況によっては使わないといけなかったりするので絶対ではありません。そう絶対ではありません。 floatを覆っている要素の高さをだす 要素をfloatすると、それを覆っている要素の高さがなくなります。その高さをだす場合は以下のような方法をとります。 親要素にoverflow: hidden;を指定する 親要素にclearFixを使う 強引にheightで高さをだしている場合をよく見るのですが、その方法だと中の要素が変わるたびに指定をしなおさないといけなくなりますので、height以外の方法をとるのがオススメです。 floatを解除する方法のまとめ: 小粋空間 floatはclearする 先ほどのclearFi
    あなたがコーディング初心者を脱する方法

  • CSSでfloatを解除する方法のまとめ


    CSSのfloatを解除︵クリア︶する方法をまとめてみました。 以前、floatを解除するテクニックとして以下の記事をエントリーしたのですが、その後色々なテクニックがあることに気がつきました。 CSS の after 擬似要素で回り込みを解除する ということで、そもそものfloatの問題︵というか仕様︶と、その対処方法についてネットで調べた情報を一通りまとめました。1．floatにより親要素の高さが出なくなる︵＝背景がなくなる︶問題 親要素の中にある子要素にfloatプロパティが設定されていると、内容をもたない親要素の高さが0になるという仕様になっています。 例えば、次のCSSとHTMLを例にします。 <style> #container { width: 200px; background: #ddd; } .box { width: 25px; margin: 10px; paddi
    CSSでfloatを解除する方法のまとめ

  • CSS3 「rem」って何だ。


    CSS3を勉強する際に大切なことは2つあります。ひとつ目は、”知っているプロパティをいかに上手に使うかということ”、二つ目は、”知らないプロパティをもっと勉強すること”だと言えます。 今回は、後者のあまり知られていないであろう﹁rem﹂を紹介いたします。とは言っても﹁rem﹂は プロパティではなく単位になります。単位表示でおなじみの﹁em‥エム﹂に似ていますが﹁em﹂の様に親要素の値に影響を受ける事はありません。 フォントサイズの指定を考えてみましょう。 ﹁px﹂を利用するとフォントサイズを固定することができて制作する際には便利だったりしますが、最近ではスマートフォンなどのモバイルサイト向けに﹁Responsive Web Design﹂というデザイン手法で﹁em﹂のような相対単位を﹁Responsive Type Setting﹂として利用します。 ただし、IEでは﹁em﹂を利用すると
    yomogi
    yomogi 2012/09/22
    emが直感的に分かりにくくなるのに対して、rem(root em)は分かりやすい。
    リンク

  • Google Chromeでポップアップがうまく開かない | loftimg™ blog

    Google Chrome βがリリースされたので、早速入れていろいろなサイトを見てみました。 レンダリングエンジンにはSafariなどに使用されているWebKitとのことで、現行動いているサイトでHTMLのレイアウトの崩れはありませんでした。ただJavaScriptでポップアップ表示させているサイトで一部他のブラウザと違う挙動をしているところがあったのでメモ。 window.openでポップアップウィンドウを開いたあとに、サイズ調整や位置調整をしているJavaScriptの実行順序によってうまく機能しない場合がありそうです。 以下サンプル（このサイトをポップアップして、フルスクリーンにするJavaScript） サンプル（×） 実行順序 window.openwindow.resizeTo(screen.availWidth,screen.availHeight);window.move

    yomogi
    yomogi 2012/04/02
    JSの記述順に依存するとの説
    リンク
  • 1 2 次のページ

お知らせ

もっと読む

公式Twitter

  • @HatenaBookmark

    リリース、障害情報などのサービスのお知らせ

  • @hatebu

    最新の人気エントリーの配信

はてなブックマーク

公式Twitter

はてなのサービス

  • App Storeからダウンロード
  • Google Playで手に入れよう
Copyright © 2005-2024 Hatena. All Rights Reserved.