タグ

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

タグの絞り込みを解除

CSSに関するluccafortのブックマーク (87)

  • フロントエンド全然わからないマンが、ちょっとでも見た目のいいWebサービスを作ろうとしてやったこと - Qiita


    はじめに サーバーサイドプログラミングを勉強していると、自分でWebサービスを作りたいという気持ちがわいてくるものです︵私はそうでした︶。しかし、ここで大きな問題が立ちはだかります。どんなにすごい機能をつけても、いい感じのデザインのWebサービスでないとそもそも使ってもらえないのです。 試しに、QiitaのトップページのCSSを無効にしてみました。使える機能は変わらないはずなのに、全く使う気が起きなくなりますね。 しかしそうは言っても、フロントエンドの経験がほとんどないとどうすれば見た目をいい感じにできるかがわかりません。今回は、ちょっとでも見た目のいいWebサービスを作るために、そんな状況の私がやってみたことをまとめました。 (この記事は、あくまで私が試行錯誤した結果をまとめたものであり、その結果出来上がったサービスの見た目の良さを保証するものではありません) 書いている人のプロフィール
    フロントエンド全然わからないマンが、ちょっとでも見た目のいいWebサービスを作ろうとしてやったこと - Qiita
    luccafort
    luccafort 2018/03/23
     "ここで大きな問題が立ちはだかります。どんなにすごい機能をつけても、いい感じのデザインのWebサービスでないとそもそも使ってもらえないのです。"わかる…が最近はBootstrapとかMaterialUIとか選択肢が増えてきた。  

    ●bootstrap
    ●フロントエンド
    ●CSS
    ●HTML
    ●vuejs
    ●webサービス
    ●web
    ●rails
    ●programming
      
    リンク

  • Storybookをまず動かす！ReactとVueの最小環境を作った - zuckey blog


    最近Storybookを会社で導入していて、環境設定についてまとめました。 基本的には、公式サイトのとおりですが、コンポーネントの例の記載がなかったり、ReactとVueでできるものが異なったりして、困った部分が合ったので、すぐに動く環境を作りました。 github.com 本エントリのコードはNode v8.9.4の環境で動作を確認しています。 Storybook？ https://storybook.js.org/ The UIDevelopment Environment ReactやVueなどのUIライブラリで作成したコンポーネントの動作やデザインをエンジニア、デザイナ間で共有、閲覧できるツールです。 Storybookという名前の通り、あるコンポーネントやコンポーネントの集合に対して、storyを複数用意し、storyごとの振る舞いを閲覧することができます。 環境構築 Stor
    Storybookをまず動かす！ReactとVueの最小環境を作った - zuckey blog
    luccafort
    luccafort 2018/03/19
     読んだぞ。なるほど、React/Vueがあるのいいな。家帰ったらちょっと書いてみよ。  

    ●npm
    ●JavaScript
    ●設定ファイル
    ●vuejs
    ●Vue
    ●config
    ●CSS
    ●コンポーネント
    ●ライブラリ
      
    リンク

  • Compass の送別会 - Pepabo Tech Portal


    2018 年3月15日、渋谷のはずれにある中華料理店﹃東亜飯店﹄では、 Sass の拡張フレームワークの Compass の送別会がしめやかにとりおこなわれていた。 ﹁えー、それではですね、きょうは長年われわれのチームでいっしょに働いてきた Compass くんがついに卒業ということで、 minne のデザイナーの @shikakun から挨拶があるそうなので、よろしくお願いします﹂ はい、ありがとうございます。 Compass、いままでほんとうにありがとう。 Compass は、SCSS を CSS へトランスパイルする機能だけでなく、 CSS3で追加されたプロパティにベンダープレフィックスを付与してくれる mixin や、指定したディレクトリに画像ファイルを放り込むだけでスプライト画像も生成してくれる、とっても便利なライブラリでした。なんと最初のリリースは 2009 年で、
    Compass の送別会 - Pepabo Tech Portal
    luccafort
    luccafort 2018/03/16
    導入コストよりも脱退コストのほうが高いのよくわかる。メンテナンスされないことが宣言されたライブラリとどうおさらばするか？というのはプロダクトとしてはかなり大きい方向転換だよなあ。
    リンク

  • Blotter.js

    Production Version Minified, 402kb Development Version Uncompressed, 752kb Overview When applying effects to text on the web, designers have traditionally been constrained to those provided by CSS. In the majority of cases this is entirely suitable – text is text right? Yet still, there exist numerous examples of designers combining CSS properties or gifs and images to create effects that evoke so

    Blotter.js
    luccafort
    luccafort 2018/02/19
    文字のエフェクトつけるという点は真新しいわけじゃないんだけどGLSL使ってるところとか今風で楽しそう。
    リンク

  • 「フロントエンド開発者」の終焉 | POSTD


    元記事の著者より‥この記事は主に北米文化で私が見たことを反映しています。 誰かに職業をきかれたら、私は﹁フロントエンド開発者です﹂と答えます︵答えは相手によって変わることもあります︶。10年か20年前は、自分の仕事に必然的に伴うものが何なのかは、かなり明瞭でした。インタラクション用にHTMLやCSSを書き、JavaScriptも多少は書いていました。駆け出しの頃、PHPやMySQLの作業に職務の大半を費やしていたとはいえ、フロントエンド開発者として見られる方が好きです︵これに関しては、後に詳しく説明します︶。この状況は、2010年の初頭に変わり始めました。JavaScriptが、重要で、非常に大きな存在になってきたのです。昨年の初め頃から、たくさんのフロントエンド開発者に会うようになり、あることに気付きました。フロントエンド開発者は、もはや、私が以前から知っているフロントエンド開発者ではな
    「フロントエンド開発者」の終焉 | POSTD
    luccafort
    luccafort 2018/01/19
    言いたいことはわかるし疑問を持ったことがないとは言わないがこの手の疑問は収束と分散を繰り返すというのが自論なので多分またフロントエンドなんとかが生まれては消えるだけだと思う。
    リンク

  • 意外と知られていないHTMLの基本の話


    私はWeb制作が初めての方向け講座だけでなく現役の制作者の方向けに様々なWeb講座をしていますが、現役のWeb制作者の方でもHTMLに関して意外と知られていないんだなと思うことがいくつかあります。 特に、HTML5以前の古いHTMLの使い方のまま覚えている方が多いように思われますので、この記事ではそれを中心に取り上げてみました。 なお、この記事はHTML 5.1およびWHATWG HTML Standardの仕様書を参考に書いています。 width=”100%” のように数値以外の文字列を “” に入れるのはNGたとえばimg要素などで、ブラウザの幅いっぱいに画像を表示したいという場合、昔はimg要素に width=”100%” のような属性をつけることがありましたが、HTML5からはwidthなどの属性値に数値以外を含めることができなくなっています。︵つまり%などの単位を含めることがで
    意外と知られていないHTMLの基本の話
    luccafort
    luccafort 2017/09/29
    "strong要素はそのコンテンツに対する強力な重要性、深刻性、または緊急性を表す"なるほどストロングgfx問題のことか。
    リンク

  • Web技術に関する基本的な知識はいつ身につくのか - stefafafan の fa は3つです


    雑なタイトルという感じでアレですけどふと思ったというか。学生時代の僕やTwitterでフォローしてる情報系っぽい学生の方で、Webよくわからないという発言をたまに目にします。そういえば大学で情報系の学部にいましたが、Webに関すること本当に何も習っていない気がした。JSやCSSの存在を微妙に耳にしたくらい。ネットワークっぽい学部だったらインフラよりの話とか勉強したりするのかな。そういえばデータベースの講義も受けていたのを思い出した。全体的に情報系の人は大学でC言語やJavaを最初に習ったりするという勝手な印象があるけど、自分の視野が狭すぎるだけなのかもしれない。あーそうそう前提として僕はプログラミングを本格的に初めたのは大学からです。Web系の知識が豊富な学生は趣味でWebサービスを作っていくうちに勝手に学んでいってる印象がある。私はWeb系に就職したので仕事をしつつちょっとづつ学んできま
    Web技術に関する基本的な知識はいつ身につくのか - stefafafan の fa は3つです
    luccafort
    luccafort 2017/08/29
    自分が情報系の大学を出ているわけではないのでいまいち大学で何を習っているのかがわからないことがある。基本的な知識、どこまでが？という疑問が常にあって自分は基本的な部分を収めてないのではという不安感。
    リンク

  • 🙋つらい時に挙げる札 - みずぴー日記


    こういうのを作った。元ツイートが消えているので出典が示せないが、 死にたいにゃんシールが一番近いと思う。 🛒材料 Seriaでそれっぽいのを買った。PPシート 不透明 家具用のアルミパイプ ✂️制作風景 TextEditで縦書きテキストの画像を作った。フォントはヒラギノ明朝が一番それっぽかった。 この画像を調整して紙に印刷した。PPシートに貼って、札の形に切った。両面テープがあると思ったらなかったので、糊で貼りつけた。 アルミパイプをガムテープで貼り付けて完成。 🚨利用例 作ったはいいけど使い道がなかったのでオフィスに持っていったら、肥大化したCSSを修正するときに使われていた。 ﹁我々のオフィスにはカンバンはあるがアンドンはなかった。それがこれにより補完される﹂とかいう話をしてた気もする。 つらいときにあげる札を上げながら仕事してる— わかり亭めろたん。 (@renyamizun
    🙋つらい時に挙げる札 - みずぴー日記
    luccafort
    luccafort 2017/08/28
    辛い時に挙げる札の"フォントはヒラギノ明朝が一番それっぽかった。"がわかりみにあふれているのは何故だろう…。
    リンク

  • CSS書きたくなさすぎ問題2017 - DRYな備忘録


    css書きたくない。できればjsも書きたくない。js必要なの嫌。軽くやりたい。という個人の日記です。 参考 Best CSS Frameworks of 2017 | Three29 10 Free Lightweight CSS Frameworks for a Fast Start 2017年にチェックしておきたい、CSSの軽量フレームワークのまとめ | コリス ググれ。 lightweight css framework - Google 検索 Gridだけやりたいやつは除外した。 Bootstrap Materialize mui ︵追記︶UIkit ︵追記︶Semantic UIPure Bulma Skelton Spectre.css Kube Vuetify Fictoan avalanche Beuter Vanilla Milligram InvisCSS Look
    CSS書きたくなさすぎ問題2017 - DRYな備忘録
    luccafort
    luccafort 2017/05/31
    "なんか適当な軸でマッピングにしてビジュアライズしてくれ誰か頼む"ほんまこれ。誰か頼む！！！ところで個人的にはSkeltonが良さげにみえる。
    リンク

  • SPAにおけるCSSについて、ひとつの解（追記あり） - エンジニアをリングする


    SPAにおけるCSSのありかたについてずっと悩んでたけど昨日今日で一筋の光明が見えた— よしこ (@yoshiko_pg) 2017年4月7日 この話を簡単にまとめておこうと思います。 結論を先に書くと﹁今のところtemplate literal内にCSSを記述する形式のCSS in JSがいい感じ。Reactならstyled-componetnsが良かった﹂という感じです。 悩んでいたこと コンポーネント指向でSPAを作っていく上で、CSS︵というかスタイリング︶はどう書いていったらいいんだろう？ということに結構悩んでいました。 HTMLとJSがコンポーネントとしてまとまっていく中でCSSだけは今まで通り別物として扱い、BEMなどでグローバルスコープと戦うのか？はたまたCSSの枠をはみ出てJSコンポーネントの粒度に合わせたコンポーネント化をするのか？ 加えて、見た目も挙動も複雑なアプリケ
    luccafort
    luccafort 2017/05/09
    2年ぶり通算2度目でようやくCSS in JSの問題点とか理解した。VueJSのscoped CSSが解としては一番いいんだけどあれは後発ゆえの強みとある程度の密集を許容するかどうかがキモなのかもしれない。
    リンク

  • CSSのposition:stickyがすごく便利 | q-Az


    最近新しく追加された position の新しい値 sticky が場合によってはすごく便利なので記事を書いてみます。 対応ブラウザがまだあまり多くないので実用性は乏しいかもしれませんが、今まで JavaScript の力を借りなきゃ出来なかったことがたったの2行の CSS で出来てしまう魔法みたいな position の値です。 position: stickyMDN が説明が詳しいので貼っておきます。 参考‥position - CSS｜MDN 簡単に言うと﹁スクロールでその位置まで来たらそれ以降は fixed する﹂みたいな感じです。 サンプルこの記事内で﹁position: sticky﹂や﹁サンプル﹂など h2 要素に position: sticky をかけています。対応ブラウザであれば h2 要素が fixed しているはずです。 HTML<h2 class="h2-stic
    CSSのposition:stickyがすごく便利 | q-Az
    luccafort
    luccafort 2017/03/06
    タイトルとかがやりやすくなるし便利機能なのでは。
    リンク

  • Keiyaku CSS


    Keiyaku CSS Crazy Style Formatter for Japanese Contract Document Unfortunately, the style in Japanese contract document is totally crazy. I hope this CSS library cures that a bit: write a document logically structured in markdownorHTML, apply keiyaku-csstoit then, you’ll get a well-formed document good luck! 概要 Keiyaku CSS︵以下、﹁本件ライブラリ﹂という。︶は、Markdownで書かれた契約文書を、適切な印刷書式にスタイリングするための、CSSライブラリです。 ユ
    luccafort
    luccafort 2017/01/08
    すごい良いんだけどPDFじゃないから駄目です…みたいなこといわれそう。つらい。
    リンク

  • 2016年に見直したHTML5・CSS3コーディング手法6選 - ICS MEDIA


    HTML・CSSコーディングを取り巻く状況は、数年前と大きく変わっています。最近では、2016年11月にHTML 5.1が勧告されたり、2015年8月頃にChromeのブラウザーシェアがInternet Explorerを抜いたりといったニュースがありました。また、2017年4月にはWindows Vistaのサポートも終了するため、今後対応すべきはWindows7のIE 11以降となります︵※︶。当たり前だと思っていたコーディング技術を今一度見直す時期にきているのではないでしょうか。本記事では2016年に見直した、今の時代に即したコーディング技術を紹介します。 ※ 参考記事﹁Internet Explorerサポートポリシー変更の重要なお知らせ - Microsoft﹂ 1. meta keywords設定は検索順位に関係がない ウェブコンテンツのキーワードを指定するmeta keyw
    2016年に見直したHTML5・CSS3コーディング手法6選 - ICS MEDIA
    luccafort
    luccafort 2016/12/19
    Autoprefixer便利そう。ただ気になるのはベンダープレフィックスが最近のブラウザシェアでは不要って話だけどこれモバイルも含んだ上での話しなんだろうか？
    リンク

  • Reactハンズオンを主催しました - ムログ


    こんにちは、むろです。 先日、Reactハンズオンという勉強会を開催しました。 やることになった経緯 ﹁デザイナーだから…﹂を言い訳にしてReact書かない(具体的に言うと、JSXは書くけどpropsとかstateとかはエンジニアさんにお任せする)という仕事スタイルに限界を感じていたタイミングで、実務でReact経験があって教えてくれそうなひと( おおきさん・もろみーさん )を見つけることが出来たからです。 ﹁わたしにReact教えてください。あ、ていうかせっかくなのでついでに他にも教わりたい人を呼びましょうか、20人ぐらい。﹂ という感じです。 当日までにやったこと あくまで、わたしも生徒の気持ちなので当日まではあえて予習していかないようにしていました。 なので、準備はイベントを実施するためのいろいろです。 これまで勉強会は参加するサイドだったのでどんなものを準備したらいいのかわからなく
    Reactハンズオンを主催しました - ムログ
    luccafort
    luccafort 2016/08/09
    参加者が10/60というのは悲しいけど逆に考えると10人だからこそ時間内に終われたのかな？とも思うのでその点は良かったんじゃないかな。
    リンク

  • 「HTML5/CSS3モダンコーディング」読んだ - $shibayu36->blog;


    HTML5/CSS3モダンコーディング フロントエンドエンジニアが教える3つの本格レイアウト スタンダード・グリッド・シングルページレイアウトの作り方 作者:吉田真麻翔泳社Amazon 最近自分のプロジェクトのデザイナが、JavaScriptで実装しないといけないと思っていたことをどんどんCSSで実装していくのを見かけた。この出来事から、JSで実装したほうが良いか、デザイナにやってもらったほうが良いか、どちらが良いかを自分で判断できてないと感じたので、最近のCSS事情を知りたいと思って読んだ。サラッと流し読みするだけで、CSS3で利用できるようになったよく使うプロパティの概要を把握できたので、今の自分の知りたいことが分かって非常に良かった。 例えば以下のことを学ぶことが出来た。 reset.css, normalize.cssとはなにか beforeやafter擬似要素を使ったいろんな技
    「HTML5/CSS3モダンコーディング」読んだ - $shibayu36->blog;
    luccafort
    luccafort 2016/07/25
    「JSで実装したほうが良いか、デザイナにやってもらったほうが良いか、どちらが良いかを自分で判断できてない」めっちゃわかる…がだいたいJSで頑張ったほうが機種依存でしななくて済むというのが個人的結論。
    リンク

  • !importantはもう使わない！CSSの優先順位をおさらいしよう


    先日の台風で梅雨が明けた気分になっていましたが、全然そんなことなかったです。 こんにちは、フロントエンドエンジニアのあつこです。 HTMLとCSSでお仕事をするようになって暫く経つのですが 未だにスタイル効かない、何故だ。。。→優先度が低かった！ってことがたまに起こります。 Sass等メタ言語を使ってると、コンパイル後の形を想像しにくくなるのですね(´・ω:;.:... 今日はそんな﹁CSSにおけるスタイルの適応の優先順位﹂についてまとめてみました。 もくじ 0.デモの準備 1.基本の優先順位 2.タイプセレクタとclassセレクタ 3.親要素と一緒に指定する 4.idセレクタとclassセレクタ 5.つまりどうゆうこと？ 6.最終奥義!important宣言 おまけ.IEのセレクタの限界のはなし ﹁ある程度なら知ってるよ！﹂って方は5.つまりどうゆうこと？から読んでもらえれば大丈夫かと思
    !importantはもう使わない！CSSの優先順位をおさらいしよう
    luccafort
    luccafort 2015/10/01
    点数なるほど、これはわかりやすい。困ったときはこの点数表を参考にしよう。
    リンク

  • cow2design.com

    This domain may be for sale!

    cow2design.com
    luccafort
    luccafort 2015/04/22
    いや確かに発想はすごいんだけどもなんというかアレだ、これ実務とかでやってはいけない系のやつや。
    リンク

  • 最近のJavaScriptフレームワークの評価とか - albatrosary's blog


    最近JavaScriptフレームワークについて色々指標のようなものを提示するブログが流行っているようだ。適材適所のもと、これは大規模向きとか小規模向きとか早いだの遅いだの。加え﹁gitなんか覚えなくたって死なない﹂とか、UXうえい！みたいな話だと思いきや内容がUIに限ったこととか。 一体最近のフロントエンドはどうなってるんだ？という雰囲気になってきましたので、少しメモ的に書きました。 JavaScriptフレームワークについて JavaScriptフレームワークの状況を見ると︵フレームワークかライブラリかの議論は置いておき︶ DOM Web Components Virtual DOM に分かれます。JavaScriptフレームワーク初期の頃はDOMを直接操作するものが多く出現してきましたが、レスポンスなど扱いに難しい面もあり、他のアプローチが考案されました。それがWeb Compoent
    最近のJavaScriptフレームワークの評価とか - albatrosary's blog
    luccafort
    luccafort 2015/03/18
    このレベルのざっくり感だと評価だされてもうーん？と首を傾げざるを得ない印象しか受けなかった。まぁコード書けとか知らないなら覚えろとかはわかるんだけどももうちょっと深い部分まで踏み込んで書いて欲しい。
    リンク

  • 画像を拡大全画面表示するのに、まだLightBoxとか言ってんの？ - それマグで！

    フルスクリーン・モード使えよ。楽だぞ 昨今のブラウザにはフルスクリーンモードが搭載されていて、それを使うと、コピペレベルで画像を拡大表示が出来る 画像をフルスクリーンにお手軽に作るHTMLの例 <div id='img01' onclick="this.webkitRequestFullScreen();" > <img src='http://cdn-ak.f.st-hatena.com/images/fotolife/t/takuya_1st/20141129/20141129034938.jpg' /> </div> <button onclick="img01.webkitRequestFullScreen();">フルスクリーンで表示</button> #img01:-webkit-full-screen { width: 80%; background-color: rgba(

    画像を拡大全画面表示するのに、まだLightBoxとか言ってんの？ - それマグで！
    luccafort
    luccafort 2014/12/01
    フルスクリーンモードクソウザすぎてワロタｗ動画とかフルスクリーンで見ることが多いと助かる場合あるだろうけど画像とかでやられたらめっちゃうざいことこの上ないｗｗｗｗ
    リンク

  • なんでCSSすぐ死んでしまうん

    The document discusses schema design patterns for MongoDB databases. It introduces common patterns like attributes, subset, computed, and approximation. Attributes store optional fields as field-value pairs to index them easily. Subset duplicates a small subset of dependent documents to reduce working set size. Computed pre-calculates values to avoid repeated computations. Approximation uses fewer

    なんでCSSすぐ死んでしまうん
    luccafort
    luccafort 2014/11/12
    ようやく読んだ。スライド数の割にはサクサク読める。
    リンク
  • 1 2 3 4 5 次のページ

お知らせ

もっと読む

公式Twitter

  • @HatenaBookmark

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

  • @hatebu

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

はてなブックマーク

公式Twitter

はてなのサービス

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