タグ

2014年1月16日のブックマーク (5件)

  • 「女は家事、男は仕事」は、誰に対する差別?

    年末年始はどのように過ごされましたか? クリスマス(前々回)は誰と? 年末ジャンボ(前回)は当たりましたか? そんなことより年末から年明けまでずっとバタバタしていて、3連休でようやくホッとした、なんて方もいらっしゃるかもしれません。 実は、結婚紹介業の申し込みが、この時期に多いってご存じですか? クリスマスと年末は「それどころやあらへん!」とフル稼働して、ふと気がつくと正月は「ぼっち」。田舎に帰ると親だの親戚だのから、無言・有言のプレッシャー。「しゃーない、試してみるか」というのが、この時期なんですって。 さて今日は、新聞でも取り上げられ、いささか物議を醸している学会誌の表紙、という変わったネタを扱ってみようと思います。とりあえず、下の画像を見てください。どうやらツイッターなどでは炎上しているらしいのですが……。

    「女は家事、男は仕事」は、誰に対する差別?
  • CSS3のFlexboxを基本から理解して、使い方をマスターしよう! | 株式会社LIG(リグ)|DX支援・システム開発・Web制作

    こんにちは、王です。デザイナーやってます。 今回は「Flexboxを基から理解して、使い方をマスターしよう!」ということで、初耳の方でもざっとFlexboxで何ができるか分かるように短い動画を用意しました。 動画の中で使ってたデモをアップしたので、確認してみたい方は以下のリンクをどうぞ! デモ 昨今では、当然ながらデジタルデバイスサイズの多様化でレスポンシブデザインとやらが流行っています。 同じサイトをさまざまなスクリーンサイズに応じたデザインをしなければならない上に、コーディングにも手間がかかります。制作側からしたら何かと厄介ですよね。 「なるべく手間をかけずに作りたい!」という世界中のデザイナーの声に応えて、「Twitter Bootstrap」をはじめとした数多くのフレームワークが徐々に脚光を浴びはじめて久しくなります。 ただ、これらはあくまで古い技術の組み合わせで、革新的な技術

    CSS3のFlexboxを基本から理解して、使い方をマスターしよう! | 株式会社LIG(リグ)|DX支援・システム開発・Web制作
  • CSS3のflexboxでフレキシブルレイアウト | buckamarge blog

    buckamarge blog への訪問ありがとうございます。更新情報を知るには RSS フィードをご利用ください。また来てくださいね ! 一昨日仕入れたネタです。 仕入れたてほやほやw css3で新しく追加された機能でflexってのがあって 画面サイズに合わせてdivとかの要素を並べ替えちゃおう!っていう なんともflexibleでcoolでHOTなやつなんだ flex 「俺を使いこなせばJqueryなんて使わなくても 一つのHTMLでスマホのレイアウトも対応できるぜ flexibleでcoolでHOTだろ?」 まずは某サイトでソースマルコピしたデモを見てもらった方がわかるかな デモページ ブラウザの幅を小さくしたりすると要素が動き出すんですよ! スマホでもイケそうでしょ? ちなみにこのソース、さっきも言ったけど某サイトのデモをctrl+a ctrl+c ctrl+v したの

  • 【HTML5】レスポンシブデザイン テンプレート - HTML5, jQuery役立つ情報ブログ|天下一Web道会

    HTML5でレスポンシブデザインのレイアウトテンプレートを作りました。 是非ご参考までに。 【index.html】 <!DOCTYPE html> <!--[if lt IE 7]> <html class="ie6" lang="ja"> <![endif]--> <!--[if IE 7]> <html class="ie7" lang="ja"> <![endif]--> <!--[if IE 8]> <html class="ie8" lang="ja"> <![endif]--> <!--[if IE 9]> <html class="ie9" lang="ja"> <![endif]--> <!--[if gt IE 9]><!--> <html lang="ja"> <!--<![endif]--> <head> <meta charset="utf-8"> <meta h

    【HTML5】レスポンシブデザイン テンプレート - HTML5, jQuery役立つ情報ブログ|天下一Web道会
  • 使えるとレスポンシブWebデザインに便利なCSS

    デフォルトのボックスモデルではwidth、heightの値にはpaddingとborderの値を含みませんが、box-sizingプロパティの値にborder-boxを指定すると、widthとheightの値はpaddingとborderの幅を含むようになります。 #box-sizing{ -moz-box-sizing: border-box; box-sizing: border-box; } 特にコンテンツの幅を指定するときや、Fluid Grid Systemを作成するときに計算が簡単になります。 例えば以下の図のような4カラムのGrid Systemで2カラム分の相対幅を求めるとします。 デフォルトの場合2カラム分の幅は60px×2+20px=140px、全体の幅は320pxとなるので、140÷320×100=43.75%となります。これにmarginやpaddingでガターの幅

    使えるとレスポンシブWebデザインに便利なCSS