デザイナさん直伝のCSSテクニックが満載！「RubyistのためのCSS勉強会」を開催しました - give IT a try
はじめに さる2016年1月9日、西脇.rb＆神戸.rbの合同勉強会として「RubyistのためのCSS勉強会」を開催しました。 主催者の僕自身が「参加して良かった！」と思えるぐらい有益な情報がたくさん詰まった勉強会になったので、今回のエントリではこの勉強会の内容を紹介します。 もくじ ちょっと長いので、先に目次を載せておきます。 はじめに もくじ 講師は合同会社フィヨルドの町田さん！ この勉強会で講義してもらったテーマ 座学編 Railsの app/assets/stylesheets 内のディレクトリ構成例 最近注目を集めているAtomic Designについて 3種類のリセット系CSSの特徴について 変更に強いマークアップのルールについて プログラマとデザイナの協業について ハンズオン編 進め方の具体例 1問目：グローバルナビゲーションの作成 2問目：アラート画面の作成 3問目：記事
【成功の秘訣公開】プログラミングを独学する時のNG項目と効率的な勉強パターン(Ruby, Python, Java, Swift) - プログラミングとデザイン、スタートアップの話
2020年1月28日更新 独学でプログラミングを勉強してエンジニアになれるか、挫折するかを分けるものは何でしょう？それは「効率の良い勉強方法を知っているか」と「やってはいけないことを知っているか」という2点です。 この記事では、プログラミングの挫折する可能性を限りなく低くし、エンジニアになれる方法を現役エンジニア目線でお伝えします。 その勉強方法だと絶対挫折しちゃうよ...ということがよくあります。どうして成功したのかということはメソッド化することは難しいですが、どうして失敗したのかということはケーススタディから学ぶことができて、それを避けることができます。 早く勉強したい！という焦る気持ちを落ち着かせて、独学を始める前にこの記事で「やってはいけない勉強方法」と「効率のいい勉強方法」を頭に入れておきましょう。 確実に挫折する勉強の仕方 本から勉強を始めてしまう チュートリアルから始めてしま
Rails Tutorial以前 - Web系エンジニア入門レベルを達成するには - - 国境の南
Webエンジニアになりたいと思って、まずはじめに取り組んだのはRails Tutorialだったのだけれど エンジニアを志して半年程経ったこのタイミングで色々と思う所があって、 同じ轍を踏む人が少しでも減ればと思い 初学者が効率的にWeb系エンジニアとしての入門レベルを終えるにはどうすればいいのかという形でまとめる そもそもRails Tutorialとは ちょっとしたサイトを作ったことがあって(=HTML, CSSを使える） 入力した数字の素数判定が出来る程度のプログラミング能力があれば*、 とりあえず解説を読み下して、TwitterモドキをRailsで作れる丁寧なチュートリアルサイトのこと railstutorial.jp *実際どうかしらん、Rails Tutorialに自分が初めて取り組んだ時のレベル感 Rails Tutorial いい点と悪い点 いい点 とにかく写経すれば、ログ
[翻訳] Rails Guideの翻訳を進めました｜TechRacho by BPS株式会社
こんにちは、hachi8833です。これまでチマチマ翻訳してきたRails Guideへのリンクをご紹介します。ガイド全体から見ればまだ半分ぐらいですが、サイズの大きいファイルから先に翻訳を進めてきたので、残っているのは比較的小さなファイルです。 注意: これらのファイルは今のところ翻訳が完了しただけであり、レビューなどはまだ行われていません。各人の責任でご利用ください。 補足: Githubに置いたことでmarkdownは簡易整形されていますが、画像は表示されません。Railsガイド ガイドラインに記載されている方法で Railsガイドをビルドすれば画像+CSSのあるガイドが得られます。 ファイル間のリンクはビルドが前提なので、そのままでは無効です。 訳していて怪しいと思った箇所には●を付けてとっとと先に進んでいます。 原文に忠実な訳とは限りません。原文より情報を増やしたり言い方を変えて
CSSフレームワーク「Compass」の基礎
Compassのメリット CSSスプライトが簡単に作成できる Compassでは、フォルダに配置するだけで、CSSスプライトで記載された一枚画像が簡単に作れます。CSSスプライトを利用すれば、1ページ辺りの画像の読み込みを何度も実行せずにすむため、ページの高速化につながります。 独自のmixinが利用できる グラデーションやベンダープレフィックスを自動で付与してくれる機能があります。 独自の関数が利用できる 画像のサイズを取得したり、三角関数の計算をしたりできる関数があります。 mixinや関数はCompassの公式リファレンスで紹介されています。ここでは記載できないほどのmixinや関数がありますので、一度見てみると面白いかと思います。 上記に加え、第1回目に記載したこちらのSassのメリットももちろん享受できます。 読みやすい 変数や繰り返し処理が使える 成果物の品質を統一できる 高速
Nokogiriを使ったRubyスクレイピング [初心者向けチュートリアル]
プログラム初心者な方向けに始めたRailsチュートリアルシリーズです。今回はRubyでスクレイピングをしたいという人向けに『Nokogiri』というライブラリを使ったスクレイピングのチュートリアルを作ってみました！ (05-02 08:10) 補足： Windowsではじめての人向けの記事を追加 🏈 目次(1) Webスクレイピングとは？ (2) Nokogiriとは？ (3) 最初に読んでおくと捗りそうな記事 (4) Gem Nokogiriのインストール (5) Yahoo!Japanのトップページからtitleを取得 (6) NaverまとめTechページの注目一覧のタイトル・画像を取得 (7) 実際にコードを書くときに参考になるサイト (8) Railsへの組み込み 🐝 (1) Webスクレイピングとは？WebスクレイピングとはWebサイトのHTMLデータを収集して、特定のデー
![Nokogiriを使ったRubyスクレイピング [初心者向けチュートリアル]](https://cdn-ak-scissors.b.st-hatena.com/image/square/c2ea7e72d0d7f3ba6c237909f321e67ffbdaa24e/height=288;version=1;width=512/https%3A%2F%2Fmorizyun.github.io%2Fimg%2Fog_image.png)
Colors - A nicer color palette for the web.
The code /* To be used in combination with a base border class i.e something like .border { border-style: solid; border-width: 1px; } */ .border--aqua { border-color:#7FDBFF;} .border--black { border-color:#000000;} .border--blue { border-color:#0074D9;} .border--fuchsia { border-color:#F012BE;} .border--green { border-color:#2ECC40;} .border--lime { border-color:#01FF70;} .border--maroon { border
Sass - チュートリアル
この文書は古いSassウェブサイトに載っていたチュートリアルの訳で、2013年12月現在もう新しいウェブサイトには存在しません。新しいウェブサイトでのチュートリアルにあたるSassの基本の日本語訳を参照してください。 Translation of: Sass - Tutorial Ruby と Sass のインストール まず、Sass がちゃんと動作するようにします。OS X を使用しているのなら、既に Ruby がインストールされているでしょう。Windows ユーザーならば Ruby のWindows インストーラーで、Linux ユーザーならパッケージ・マネージャーでそれぞれ Ruby をインストールすることが出来ます。 Ruby のインストールが完了したら、以下のようにして Sass のインストールを行います: gem install sass 最初の Sass スタイルシート 非
Sass、そしてSassy CSS (SCSS)
CSSを拡張したメタ言語であるSass、そしてその別文法として定義されたSCSSについて、960.gsなどのCSSフレームワークと絡めて、Sass (主にSCSS)の良さを解説する。 CSSフレームワーク Sass Sassy CSS aka SCSS SCSSでCSSフレームワーク 2カラムレイアウトの作成 clearfixやReset CSSの組み込み カラム幅の変更 カラムの入れ替え SCSSで完結することの意義 まとめ 最後に CSSフレームワーク 960.gsやBlueprint、BlueTripなどCSSフレームワークと呼ばれるものは色々ある。フレームワークと名乗るだけのことはあって、それらの生産性はとても高い。テンプレートで適切にクラス名やIDを埋め込むだけなので、複雑怪奇なCSSコーディングを意識することなく誰でも簡潔にきれいなカラム・レイアウトを作成できる。 HTML 4
Getting started | Less.js
It's CSS, with just a little more. Use with Node.js: npm install -g less > lessc styles.less styles.css Or the browser: <link rel="stylesheet/less" type="text/css" href="styles.less" /> <script src="https://cdn.jsdelivr.net/npm/less" ></script> Or try the online playground ! 🆕 Less (which stands for Leaner Style Sheets) is a backwards-compatible language extension for CSS. This is the official do
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IT業界・エンジニアの転職ならTech Stars Agent
CSS, jQueryからPython, Rubyまで、制作者の困ったを解決するコードのスニペットを共有する無料サービス -Code Pad
【イマ得】エミナルクリニック梅田院の口コミまとめ＆口コミで人気の医療脱毛ランキング発表
HTML, CSS, jQueryから、Ruby, PHP, Java, Python, Git, 正規表現などウェブ制作・開発に役立つチートシートのまとめ -OverAPI