タグ

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

タグの絞り込みを解除

cssに関するstealthinuのブックマーク (120)

  • ナビゲーションバー～Bootstrap4移行ガイド

    Bootstrap3.xの設定例 赤背景が変更箇所 <nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#Navber" aria-expanded="false"> <span class="sr-only">ナビゲーションの切替</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navba

    ナビゲーションバー～Bootstrap4移行ガイド
    stealthinu
    stealthinu 2018/07/09
    navbarの書き方、Bootstrap3→4で全然違うじゃん… うええ。
    リンク

  • Bootstrapにてulに対する横並び、list-inlineが効かない

    stealthinu
    stealthinu 2018/07/09
    Bootstrapでlist-inline指定してても横並びにならないのはBootstrap4から仕様変更されlist-inline-itemをしていしないといけないためらしい。がなぜいきなりこの問題出たかが不明。今まで3だったのが4に切り替わった？
    リンク

  • CSSで文字にボーダー(縁取り)をつけたい。 - かもメモ


    Illustratorの線やPhothopのレイヤースタイルの境界線みたいに文字にボーダー(縁取り)をつける方法のメモ。 といっても、イラレの線やPhoshopの境界線みたいにバチッとした縁取りを付けるのは難しそうです。 1. text-stroke を使う方法 text-stroke サポート状況IE以外はそこそこサポートされてきてるっぽい。 プロパティには-webkit-のブレフィックスが現状では必要。(なぜかFirefoxも。-webkit-text-stroke ってプロパティ名？) 書き方 /* width | color */ -webkit-text-stroke: 2px #000; 又は -webkit-text-stroke-width: 2px; -webkit-text-stroke-color: #000; ボーダー(縁取り)は文字の内側に付く ※ color:
    CSSで文字にボーダー(縁取り)をつけたい。 - かもメモ
    stealthinu
    stealthinu 2018/06/29
    CSSでふちどりフォントにする方法。
    リンク

  • 最高のモックアップツールかもしれないBootstrap Studio - Qiita


    1. モックアップツールって何使ってる？？ 2017年の11月くらいから、毎日コツコツと作っていたWebアプリケーションをなんとか完成しました　︵色々あってリリースはまだしていません...︶。Webアプリケーションを作り始めるときに、はじめに﹁設計﹂と﹁モック﹂を作りました。 世の中に出ているモックツールのまとめ https://navi.dropbox.jp/mockup-tool https://www.mockplus.com/blog/post/webux-10 色々と調べた結果﹁Bootstrap Studio﹂が良さそうだったので、有料版を購入してみましたが、とても良く、Qiitaにもあまり情報共有されていなかったので、使ってみた感想などを、まとめようと思います。 2. Bootstrap Studioについて Bootstrap Studio https://bootstra
    最高のモックアップツールかもしれないBootstrap Studio - Qiita
    stealthinu
    stealthinu 2018/02/13
    bootstrap使ったモックをWYSIWYGで作れるツール。有償だが2500円程度。
    リンク

  • そろそろ真面目に、HTMLで帳票を描く話をしようか - Qiita


    帳票といえばPDFとして生成するのが一般的でしょうか?でも、2015年の今、あえてHTMLで描くのがホットです(個人的に)。ミリ単位で設定された高度な帳票も、CSSを駆使して簡単に作ることができます。業務システムでもモダンブラウザを選択することが増え、@pageなども積極的に使えるようになったこと、SPA(Single Page Application)の台頭、いろいろと条件が揃ってきました。 書いてたら結構長くなっちゃったので、さくっとコードだけ見たい方は、Paper CSSリポジトリをどうぞ。 はじめに HTML帳票のメリット 2015年現在、HTML帳票を選択する幾つかのメリットがあります。 ライブリロードで、リアルタイムなスタイル調整 バックエンドではなくフロントエンドで生成できる 前者は、gulpやGruntの普及で、CSSにしろHTMLにしろ、リアルタイムにプレビューできる環
    そろそろ真面目に、HTMLで帳票を描く話をしようか - Qiita
    stealthinu
    stealthinu 2016/12/12
    HTMLでもそこそこ帳票書けるらしい。うーん、やってみる、か？
    リンク

  • 20160930 フロントエンド高速化 業務編 (社内勉強会)

    スタートアップやプロダクトの成功に必要な「アイデア×プロダクト×実行×チーム×運」の 5 つの項目について解説した概要のスライドです。急成長するプロダクトの初期に役立てていただければと思います。 プロダクトマネージャーやスタートアップの CEO の方向けにどうぞ。 ※ Japan Product Manager Conference 2016 の登壇資料です

    20160930 フロントエンド高速化 業務編 (社内勉強会)
    stealthinu
    stealthinu 2016/10/06
    CSSやjQueryの最適化の話。jQueryの方はこれで速くなるんだろうとは思うのだけどなんか悲しくなるものが多い。
    リンク

  • CSSの display: inline、display: block、display: inline-block をマスターしよう！ | たねっぱ！


    CSS の display プロパティについて紹介します！ display: inline・display: block・display: inline-blockについてのおさらい。HTMLとCSSひよこちゃん向け！ いろいろ便利な CSS の display プロパティ。今回は display: inline display: block display: inline-block についておさらいしてみます。HTMLひよこちゃん向けの記事です！ displayプロパティで、ブロック・インライン・インラインブロックをおさらいしてみた displayプロパティ displayは、要素の﹁表示形式﹂を指定するプロパティ。 ブロックレベル要素をインライン形式で表示したり、インライン要素をブロックレベル形式で表示することができます。 構造的にはブロックレベル要素なんだけど、インラインとして表示
    CSSの display: inline、display: block、display: inline-block をマスターしよう！ | たねっぱ！
    stealthinu
    stealthinu 2016/06/20
    inline-blockとinlineはどう違うのか勉強になった。さらにIE7でinline-blockが問題出ることの対処法もあり。
    リンク

  • 幅可変でmargin:0 auto; ~display:tableの不思議~ - Qiita

    概要 inline要素のようにテキストの長さによって要素の幅を変え、さらにその要素をmargin:0 autoで中央寄せに出来ないかっていうのを以前に悩んだのですが、対応策があったので紹介します。 ちょこちょこ使えて意外に便利だったっりします。 試行錯誤 marginをかけるのでinline要素では無理で、block要素だと幅が親要素に依存してしまうので

    幅可変でmargin:0 auto; ~display:tableの不思議~ - Qiita
    stealthinu
    stealthinu 2016/06/10
     インライン要素でもmargin autoでセンタリングする方法。display tableにする。表示結果まとめたページがわかりやすい。  

    ●css
    ●webデザイン
      
    リンク

  • CSSで中央寄せにする方法まとめ | たねっぱ！


    CSSで中央寄せ方法(inlineやblockで方法をかえよう！)。text-align:centerやmargin:auto。レスポンシブの場合なんかも紹介します！ CSSで中央寄せにする方法(inlineとblockで方法をかえよう！) おはこんばんちわ、やのっぱです(´・ω・｀) そういえば、周りでcssによる中央寄せがうまくいかないって声をよく聞いてたのでいくつか書いてみたよ。 思いつく限りの中央寄せの方法を書きます。 注意！ 本記事はreset.css、clearfixを導入した状態を基準としてソースコードを載せています。1．margin: 0 auto;︻block要素を中央に︼ 定番の中央寄せです。 でも、要素がwidth:100%;だと無理です。 margin取れないからです。 例︶ <style> .marginTest { width:100%; height:40p
    CSSで中央寄せにする方法まとめ | たねっぱ！
    stealthinu
    stealthinu 2016/06/10
     CSSでセンタリングする方法まとめ。インライン要素だとtext-alignで、block要素だとwidth決めてmargin autoで。要素と方法合ってないとセンタリングされない。  

    ●css
    ●webデザイン
      
    リンク

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


    平素より﹁PHPプロ！﹂をご愛顧いただき、誠にありがとうございます。 2006年より運営してまいりました﹁PHPプロ！﹂ですが、サービスの利用状況を鑑みまして、2018年9月25日︵火曜日︶をもちましてサービスを終了させていただくことになりました。 サービス終了に伴いまして、2018年8月28日︵火曜日︶を持ちまして、新規会員登録ならびにQ&A掲示板への新たな質問、回答の投稿を停止させていただきます。 なお、ご登録いただいた皆様の個人情報につきましては、サービス終了後、弊社が責任をもって消去いたします。 これまで多くの皆様にご利用をいただきまして、誠にありがとうございました。 サービス終了に伴い、皆様にはご不便をおかけいたしますこと、心よりお詫び申し上げます。 本件に関するお問い合わせはこちらよりお願いいたします。
    stealthinu
    stealthinu 2016/03/10
    いまさら携帯向けのコンテンツも作らないといけなくて携帯での文字コードやCSSについて参考に。こういう情報はどんどん失われていくので困る。
    リンク

  • モバイルサイトの3キャリア共通CSSと最新コーディング事情 : LINE Corporation ディレクターブログ


    こんにちは、﹁livedoor Blog﹂を担当している吉沢です。 スマホの登場で、すっかりケータイ (フィーチャーフォン/ケータイ/ガラケー) が日陰に追いやられた感がありますが、ケータイも毎年進化していて、モバイルサイトの開発が行いやすいケータイがユーザへ浸透してきています。 livedoor Blogでは、スマートフォン分野に注力しながら、月間15億PVあるケータイ版のUI最適化にも引き続き取り組んでいます。今回は、livedoor Blogで採用した事例を元に、この先1〜2年のケータイ開発・運用に役立てられる、3キャリア共通の CSS から最新のコーディング事情を紹介したいと思います。 アクセスシェア〜ライブドアの場合 まずはどの世代のケータイをメインに開発して表示くずれを起こさないようにするか検討するため、アクセスシェアを把握します。1年前と比べると、iモードブラウザ2.
    モバイルサイトの3キャリア共通CSSと最新コーディング事情 : LINE Corporation ディレクターブログ
    stealthinu
    stealthinu 2016/03/10
    いまさら携帯向けのコンテンツも作らないといけなくて携帯でのHTMLやCSSの対応状況を確認していて大変に参考になった。
    リンク

  • CSSでの表見出しの均等割付 (css3版) - 鍋の底


    NSEG Advent Calendar 2015 - Adventarにエントリを書きたいと思っていたら、ネタが降ってきたので急いで書きました。 というわけで12/23のエントリになります。 さて、ワープロなどにある均等割付を、Web でも表現したいという需要があります。 このとき css では text-align に justify を指定すると思います。 この文章のように複数行ある場合には、効いているように見えますが、tableの見出しセルを均等割付をしたい場合には、うまくいきません。 Webでしらべても﹁text-align justify 効かない﹂がサジェストに現れるくらいには、効かないもののようです。 なぜこうなるのか、文章に対する均等割付から考えてみましょう。 均等割付の際には、段落の最後で、均等に割り付けてしまうと、むしろおかしくなります。 そのためか、段落の最後で
    CSSでの表見出しの均等割付 (css3版) - 鍋の底
    stealthinu
    stealthinu 2015/12/24
    『tableの見出しセル（ここではth）が均等割付にならないのは、段落の最後と認識されてしまっているから』そういうことか。
    リンク

  • サンプルコードで学ぶ CSS プログラミングの基本テクニック


    サンプルコードで学ぶ CSS プログラミングの基本テクニック この記事について NSEG Advent Calendar 2015 の8日目の記事です。2日目の CSS Bird に続いて、CSS プログラミングの基本テクニックを紹介します。 INPUT[type=radio] ~ LABEL 最も基本的なテクニックの一つです。 まず先頭にラジオボタンを並べ、その後ろに各ボタンに対応したLABEL を﹁position: absolute﹂で重ねておきます。 そこからタップのアクションに対する変化として、ラジオボタンの checked に応じて LABEL の z-index を変化させることで、同じ場所のタップで次々に隣のラジオボタンの状態を変化させていくことができます。 以下がサンプルコードです。 ラジオボタンの場合は、LABELの1クリックで﹁対応するラジオボタンへの chec
    サンプルコードで学ぶ CSS プログラミングの基本テクニック
    stealthinu
    stealthinu 2015/12/08
     CSSだけでアクションプログラムを作るためのテクニック。てかCSSってupto doとかループの構文あるんだ…　それすら知らんかった。／違かった。ここの部分はrubyで書いてあるテンプレートだった。  

    ●css
    ●nseg
      
    リンク

  • A clone of Flappy Bird written in CSS


    A clone of Flappy Bird written in CSS CSS Bird Open in a new window この記事について これは NSEG Advent Calendar 2015 の2日目の記事です。 NSEG とは NSEG は長野県とコンピューターをテーマにした勉強会で、月1回のペースで開催されています。 勉強会の内容や形式は固定されておらず、フリーテーマの発表会、講師を招いての講演会やハンズオンセミナーなど、様々な形で開催されています。また NSEG 単独での開催だけでなく、他の団体と合同で開催している回も数多くあります。 そんな中、少し前の話になりますが、第17回勉強会ではMozilla勉強会との合同という形で開催され、私はその際に CSS プログラミングについての発表をしたことがあります。この記事ではそれにちなんで、CSS プログラミングとは
    A clone of Flappy Bird written in CSS
    stealthinu
    stealthinu 2015/12/02
    ソース読もうとしたけどもうなにがなんだか…だったｗ　とりあえずCSSだけでこんなことすら出来る、ということだけは理解した。
    リンク

  • Widthの発音について

    The document discusses CSS properties like width, linear, and relative. It mentions CSS Nite events from 1996-2011 and references getting up at midnight. The author's Twitter handle is provided as @swwwitch and an email takano@swwwitch.com. The document contains technical CSS and HTML terms when discussing width properties and formatting text.Read less

    Widthの発音について
    stealthinu
    stealthinu 2015/06/16
    widthは「ウィドゥス」でいいってよ！「d」を気持ちだけ発音しとけば良いのか。
    リンク

  • Bootstrapで日本語をより美しく表示させることにこだわった無料のテーマ -Honoka


    Bootstrapは人気のフレームワークですが、日本語のコンテンツを表示するために最適化されているとは言えません。フォント指定・文字サイズをはじめ、日本語をより美しく表示するためのさまざまなアプローチを取り入れたテーマ﹁Honoka﹂を紹介します。 単に使用するだけでなく、他のものでも日本語を美しく表示させるのに役立ちます。 Honoka Honoka -GitHub 日本語フォントは、たくさんのフリーフォントがあります。 2017年用、日本語のフリーフォント 259種類のまとめ Honokaの特徴 Honokaのデモ Honokaのアプローチ -Bootstrapでの日本語表示最適化 Honokaの利用方法 Honokaの特徴 Honokaは、Bootstrapでより美しく日本語を表示させることにこだわったオープンソースのテーマファイルで、これをベースにWebサイトを作成したり、既にBo
    Bootstrapで日本語をより美しく表示させることにこだわった無料のテーマ -Honoka
    stealthinu
    stealthinu 2015/05/26
    Windowsでもジャギーじゃない綺麗なフォントで表示してくれるBootstrapベースのCSSフレームワーク。
    リンク

  • 【CSS】ul,olのリストを横並びにするときにfloatじゃなくてdisplay:inline-blockを使う方法 - ディレイマニア


    ul,olのリストを横並びにするとき、floatを使う人も多いと思いますが、僕はdisplay: inline-block;を使って横並びにする方法が好きで良く使ってます。 先日初心者向けのHTML,CSSのマークアップ勉強会にて、このプロパティを知らない方が多くて驚きました。 おそらくこの方法を知らない人がまだまだいると思われますのでご紹介します。
    【CSS】ul,olのリストを横並びにするときにfloatじゃなくてdisplay:inline-blockを使う方法 - ディレイマニア
    stealthinu
    stealthinu 2015/02/03
    floatではなくinline-blockでリストを横並びにする方法。floatだと使った後にclearしてやる必要がある。ブ米より謎の隙間は要素間のスペースをなくせば大丈夫らしい。
    リンク

  • white-space プロパティ(空白文字及び折返しの取扱) - CSS リファレンス


    平成27年12月15日現在の定義です。 プロパティの定義 空白文字及び折返しの取扱。 定義のある水準 第一水準 (CSS1) 以降。 第三水準以降はテキストモジュールで。 WAP 2.0 での定義 必須プロパティ。 但し、KDDI/沖縄セルラー端末等では nowrap 値のみ実装。 対象メディア 視覚系メディア。 対象要素 全要素。 上位要素からの値の継承 あり。 第二水準でのプロパティ値 以下のいずれか‥ inherit 上位から継承。normal半角空白文字等は一つに纏める 行端で適宜折返しをする nowrap 半角空白文字等は一つに纏める 行端で折返しはしない pre 半角空白文字等はそのまま扱う 行端で折返しはしない pre-wrap 半角空白文字等はそのまま扱う 行端で適宜折返しをする pre-line 半角空白文字は一つに纏める 行端で適宜折返しをする 改行文字では改行す
    white-space プロパティ(空白文字及び折返しの取扱) - CSS リファレンス
    stealthinu
    stealthinu 2014/09/29
    cssで改行を反映できるようにする white-space: pre-lineとpre-wrapはCSS2.1以降とのことでIE8以降で使えるとのこと。
    リンク

  • white-space｜プロパティ｜CSS HappyLife ZERO

    white-spaceプロパティは、半角スペースやタブなどの空白類文字をどのように扱うか指定します。 対応ブラウザ プロパティの解説 値 normal｜pre｜nowrap｜pre-wrap｜pre-line｜inherit 初期値 normal 適用される要素 全ての要素 継承 します パーセント値 N/A メディア visual 値の解説 normal 連続する空白類文字は1つの半角スペースにまとめて、行ボックスの端まで行くと必要の応じて自動的な改行をします。 任意の位置で改行する場合は、br要素などで行います。 pre 連続する空白類文字の削除を禁止して、自動的な改行はしません。 ソース内の改行位置やbr要素が有る場合はその位置で改行されます。 nowrap normalと同様に連続する空白類文字を1つの半角スペースにまとめますが、自動的な改行はしません。 任意の位置で改行する場合は

    stealthinu
    stealthinu 2014/09/29
    cssで「white-space: pre-line」指定すると<br>タグなくても単に改行するだけで改行に出来る。pre-wrapだと改行の他に空白もそのまま空白として扱うように出来る。
    リンク

  • Bootstrap 5 & Vanilla JavaScript - Free Material Design UI KIT

    Material Design for Bootstrap 5 & Vanilla JavaScript Standard Bootstrap version built with plain JS (but works also with jQuery)

    Bootstrap 5 & Vanilla JavaScript - Free Material Design UI KIT
    stealthinu
    stealthinu 2014/09/29
    Googleの「Material Design」推奨に合わせたbootstrapのデザインテンプレート
    リンク
  • 1 2 3 4 5 6 次のページ

お知らせ

もっと読む

公式Twitter

  • @HatenaBookmark

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

  • @hatebu

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

はてなブックマーク

公式Twitter

はてなのサービス

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