タグ

CSSに関するRetsetのブックマーク (13)

  • ワイ「何でそんな小っさいコンポーネント作ってるん?w」 - Qiita

    とあるWeb制作会社にて ワイ「ハスケル子ちゃん」 ハスケル子「はい」 ワイ「今日ワイは何の仕事するんやったっけ?」 ハスケル子「確か今日からは」 ハスケル子「Nuxt.jsとVuetifyを使って管理画面を作る案件が始まるんじゃなかったでしたっけ?」 ワイ「おお、せやった」 ワイ「とある管理画面のフロントエンド開発をするんやったな」 ハスケル子「もうFigmaのデザイン見ましたか?」 ワイ「ヒグマ?」 ワイ「ヒグマなんて、写真でしか見たことないけど」 ハスケル子「Figmaです」 ハスケル子「ブラウザ上でも使えるデザインツールですよ」 ワイ「ああ、そっちな」 ワイ「Higumaのほうね」 ハスケル子「じゃあ、さっそくデザイン見ながら」 ハスケル子「コーディングしていきましょう」 ワイ「おお、頑張っていこか!」 デザインを見てみる ハスケル子「↑このキャンセルボタンとOKボタン」 ハスケル

    ワイ「何でそんな小っさいコンポーネント作ってるん?w」 - Qiita
  • CSSレイアウト時のよくやる失敗と対処法|WEB制作(html,css(スタイルシート) )|プログラムメモ

    ■floatでレイアウトしたときのボックスの間に隙間が出来る →隙間が出来るボックス要素全てに float 要素を追加 ■ <div>内に配置した<img>が<div>よりサイズが小さいと隙間が出来る → 下記を追加 img { display: block; } ■ Win IEだけずれる時があり、ずれる大きさがフォントサイズによって変わる →ずれる<div>等に vertical-align を設定する(top 又は bottom) ■ <td>内のフォントが正しく指定したとおりでない(Win IE Mac IE) →<td>の中に<span>をいれて対応する ■MacIEで<div>を floatさせると表示が崩れる。 → フロートさせるdiv の width height 属性を指定する ■<ul><li>で画像リンクを作成したときに WinIEでフォントサイズを変更すると 隙間

  • CSSの記述テクニック 階層宣言コーディング - 3ping.org

    2007-04-02追記 この記事は2007年4月1日にエイプリールフールネタとして書かれたものであり、紹介しているCSSの宣言ブロック内にセレクタを記述する方法は不正な書式であり無効です。 検索・他の記事から訪れた人は勘違いしないように注意してください。 CSSの記述はセレクタを並列に定義していくので、視覚的に構造を表すことができません。ここで定義グループごとにファイルを分割して管理したりする方法が有効になるのですが、これもXHTML文書の構造を頭にいれておかなければならないし、文書とビジュアルの結びつきをきちんと設計しなければ分割する意味がなくなってしまいます。 今日は、これらの弱点を埋める「階層宣言コーディング」という記述方法を紹介します。 次の記述は単純に文脈セレクタを使った記述です。 p.caution { color: red; font-weight: bold; } div

  • float段組の基本

    簡単なfloatの段組練習です。慣れて来たら、いろいろ応用してみて下さい。 注)floatを指定する場合はwidth指定で幅を指定するように心掛けましょう! ボックスを並べる boxAとboxBを左右に並べます。形式上boxの幅と高さを指定しています。(来の段組では、高さを指定する事はあまりありません。) パターン1 float:left;を指定してboxBを回り込ませます。 #boxA { width:200px;height:100px;float:left; } #boxB { width:200px;height:100px;float:left; } パターン2 boxAにfloat:left;を指定、boxBにfloat:right;を指定。 #boxA { width:200px;height:100px;float:left; } #boxB { width:200px;

  • CSS やってはいけないこと floatとは

    ブログテンプレートを例にとると、 記事表示部分-サイドカラム…のように、divなどの箱が横方向(左右)に分割されて表示されている部分があります。 floatとは、左右どっちに寄せるか?という「回り込み」を指定するプロパティで、 float: left; float: right; float: none;(回り込みをさせない) のように、left(左)に回り込ませる・right(右)に回り込ませる、といったようにCSS部に記述して使います。 floatに関する説明は、なんだかややこしく感じるのですが、 floatで左か右か、方向を指定しているdivやimgなどの要素は、その指定した方向に寄せられる、といったような感じです。(その後に続く要素は、指定した方向とは反対の方向に表示されます。) floatを指定する要素にやってはいけないこと ブログテンプレートなどには、必ずと言っていいですがfl

  • スタイルシートによる崩れない 2カラム 3カラム・レイアウト

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

  • スタイルシート(CSS)で段組を構成する 2 CSSで作る段組レイアウトの例 - [ホームページ作成]All About

    CSS段組2:スタイルシートで作る段組レイアウトの例HTML+CSSで「段組(マルチカラム)」を作ってみましょう。よくあるレイアウトのサンプルを用意して、その通りに段組を構成する方法をご紹介します。スタイルシートでスマートに段組を作りましょう。 スタイルシートだけで作る段組の例 前回の記事「スタイルシートだけで段組を作る」で、table要素を使わずに段組(マルチカラム)を作る方法についてご紹介致しました。 今回は、段組を用いたページ構成をサンプルとして示して、その通りの段組を作る方法をご紹介致します。 今回ご紹介するのは、下記の画像のようなページ構成です。 よくある構成ですね。 この構成の段組をスタイルシートだけで実現するサンプルソースをご紹介致します。 まずはHTMLを書く まずは、HTML部分をご紹介致します。 デザインはすべてスタイルシートで記述しますから、HTMLは非常に単純です。

    スタイルシート(CSS)で段組を構成する 2 CSSで作る段組レイアウトの例 - [ホームページ作成]All About
  • スタイルシートリファレンス(目的別)

    font …… フォントに関する指定をまとめて行う font-style …… フォントをイタリック体・斜体にする font-variant …… フォントをスモールキャップにする font-weight …… フォントの太さを指定する font-size …… フォントのサイズを指定する font-family …… フォントの種類を指定する font-size-adjust …… フォントのサイズを調整する font-stretch …… フォントを縦長・横長にする line-height …… 行の高さを指定する text-align …… ブロックコンテナ内の行の揃え位置・均等割付を指定する text-justify …… 均等割付の形式を指定する vertical-align …… 縦方向の揃え位置を指定する text-decoration …… テキストの線・色・スタイルをまと

  • UIデザインガイドラインのまとめ : could

    UIUXガイドライン UIデザインガイドラインのまとめ デザインガイドラインは、実際同じようなガイドラインを作るときだけでなく、UIデザインを考える際にも役立つ貴重な資料です。今まで個別で紹介したことはありますが、今回は一挙にまとめてリストアップしてみました。 Introduction to Apple Human Interface Guidelines 個人的に UI デザインガイドラインといえばこれ。日語訳も大変便利です Apple User Experience Guides ソフトウェア開発向けですが、イントロダクションあたりは参考になります iPhones Human Interface Guidelines 会員登録すると見れる PDF 資料ですが、上記のリンクからブラウザ上で観覧することが出来ます Windows User Experience Interaction G

    UIデザインガイドラインのまとめ : could
  • SOYAGIMI NOTE 事業者のための情報発信メディア

    Information to help businesses事業者に役立つ情報を総合的にお届けします こんにちは、SOYAGIMI Note を運営する株式会社SOYAGIMI 松永です。 このサイトは弊社顧客様のための情報提供、また様々な地域で活躍される事業者様のお役に立てる情報を発信するためのメディアです。 私たちも小規模な事業者ですので、比較的使える情報や経験をご紹介できると思います。 比較サイトなんか見ても、昨今事業者は軽く扱われがちですからね。 色んな情報やテクニックを持って、けっこう大変な時代を乗り越えていけたらいいなぁって。 Convenient tool use 便利なツールの使い方をご紹介 小規模で活動されていると、やはり人出が足りなくなるのが現状です。 しかしながら最近は無料で使えて、業務を効率化できるアプリも多数存在します。 そういったアプリの使い方などをまとめて、経

  • 403 Forbidden

    \閉鎖予定のサイトも売れるかも?/ アクセスがないサイトもコンテンツ価値で売れる場合も… ドメインの有効期限を更新してサイト売却にトライしてみましょう

  • オンライン css エディタ - Google 検索

    「CodePen」は、Webブラウザ上でHTMLCSSJavaScriptのコードを書いてそのまま実行できるWebサービスです。 無料で会員登録をしなくてもコードの確認ができますが、会員 ...

  • サービス提供終了のお知らせ

    日頃より、Momoたろうインターネットクラブをご愛顧いただきまして誠にありがとうございます。 「ホームページサービス」のサービス提供は2015年11月30日をもちまして終了させていただきました。 これまで長らくご利用いただき、誠にありがとうございました。 今後も、皆様によりよいサービスをご提供させていただけるよう、サービス品質向上に努めて参りますので、何卒、ご理解いただけますようお願 い申し上げます。 <Momoたろうインターネットクラブをご契約のお客様へ> 後継サービスとして「userwebサービス」を提供させていただいております。 詳しくは、以下のリンクをご参照ください。 ▼「userwebサービス」のご案内 http://www.ejworks.info/userhp/mmtr/index.html 今後ともMomoたろうインターネットクラブをご愛顧いただけますようお願い申し上げます

  • 1