このCSSなら簡単！フォームのチェックボックス・ラジオボタンとテキストをベースラインに揃えて配置
フォームの実装で面倒なのがフォーム要素とテキストを揃える、特にチェックボックス・ラジオボタンとテキストをベースラインに揃えることです。 flexboxでalign-item: baseline;を使用すると、チェックボックス・ラジオボタンとテキストを揃えるのは簡単に実装できます。複数行のテキストにも対応します。 <div class="flex-demo --start checkbox-input"> <label for="demo"><b>flex-start</b> 複数行の長いテキストでも大丈夫</label> <input type="checkbox" id="demo"> </div> <div class="flex-demo --center checkbox-input"> <label for="demo2"><b>center</b> 複数行の長いテキストでも大丈
【保存版】CSS Flexboxでレスポンシブ対応のレイアウトを実装するHTMLとCSSのシンプルなコードのまとめ
CSS Flexboxで実装するWebページでよく見かけるレスポンシブ対応のレイアウト、カードレイアウト、ナビゲーションバー、サイドバー、聖杯レイアウトなどのHTMLとCSSのコードを紹介します。 コードは非常にシンプルなので、テンプレートやスニペットとして再利用できます。 Master CSS Flexbox 2021 🔥- Build 5 Responsive Layouts🎖️|| CSS 2021 by Joy Shaheb 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 Flexboxの構造・各プロパティと値 実装の準備 Level 1: シンプルなカードレイアウト Level 2: ナビゲーションバー Level 3: サイドバー Level 4: 少し複雑なカードレイアウト Level 5: Holy Grai
えっ、著作権の帰属を表すHTMLタグがあるんですか？ - Qiita
smallタグ smallタグです。 かつては文字を小さく表示するために使われるタグでしたが、今ではセマンティックな役割が与えられています。 そのうちの1つが著作権の帰属を表すです。 なんでこの記事を書いたのか smallの役割って意外と知られていない気がする 最近レビューで連続でこの話をした という2つの理由から記事を書きました。 内容の補足 コピーライト表記ってありますよね？ © 2019-2021 Example Corporation All rights reserved. みたいなやつです。 色々なサイトのマークアップを見学していてspanタグで実装されていることが多いことに気がつきました。 しかしHTML Living Standardのsmallタグの章を見てみると Small print typically features disclaimers, caveats, l
Gopher道場 自習室 - Gopher道場
Gopher道場 自習室とは Gopher道場は1度に受け入れる人数に限界があり、これまで申し込み課題を元に選考を行って、選考を通過した方のみに参加して頂いていました。 しかし、どなたでも参加してほしいという思いもあり、希望するすべての方にGopher道場のコンテンツを提供するGopher道場 自習室を行うことを決めました。 Gopher道場 自習室では、以下のようなコンテンツや学びの場を提供します。 Gopher道場の講義を録画した動画（10時間以上分） Slackにおける受講者同士のコミュニティ Gopher道場卒業生による課題のレビュー（ボランティアでご協力頂いているのでベストエフォートです） Slackへの参加方法 以下のリンクからGopher道場 Slackに入り、#studyroomチャンネルにお越し下さい。 Gopher道場 Slack登録リンク 動画コンテンツ Gopher
超高機能！HTMLエディタ【入力補助付き】5選 - Findy
ホームページを作るときにHTMLを直接打ち込むことがありますが、テキストエディタではコードが長くなると見辛いですよね。 でも入力を補助してくれる機能があればかなり楽にコードを書き足したり編集したりできるようになります！ 本記事ではフリーソフトで高機能な「入力補助付きのHTMLエディタ」をご紹介します！ Aptana 商業用エディタのAdobeやDreamweaverにも負けないと言われるほどのフリーエディタです。 zen-coding、HTML5、CSS3にも対応しています。 ダークカラーを背景としたインターフェースで、非常に見やすいです。 海外で作られているエディタですが、日本語化するためのプラグインも用意されています。 詳しくは以下の記事をご覧ください。 studio-fun.net – Aptana Studio 3 Betaを日本語化して使う ⇒ Aptana Crescent E
Red Hat、「OpenShift.io」発表。Webブラウザだけでチーム開発／タスク管理／エディタとデバッガ／デプロイなどを実現するクラウドサービス。Red Hat Summit 2017
Red Hat、「OpenShift.io」発表。Webブラウザだけでチーム開発／タスク管理／エディタとデバッガ／デプロイなどを実現するクラウドサービス。Red Hat Summit 2017 Red Hatは5月2日から3日間、米マサチューセッツ州ボストンで開催した年次イベント「Red Hat Summit 2017」において、チーム開発やWeb IDE、デプロイなどを含む総合的なクラウドアプリケーション開発環境を実現するサービス「OpenShift.io」（オープンシフトアイオー）を発表しました。 OpenShift.ioは、クラウド基盤となるOpenShiftの上で、Web IDEの「Eclipse Che」、ビルドやデプロイ環境を構築する「fabric8」、パフォーマンスモニタの「Performance Co-Pilot」、そのほかOpenJDK、WildFly Swarm、Ecl
Erlang World
top World ! {message, "why erlang"} 更新 最終更新日 08年 07/23 "gen_fsm 1" "マニュアル getting started with Erlang"を追加。 9月あたりまで多忙のため、不定期更新となります。 現在、マニュアル邦訳を一緒にやって頂ける方を募集しています。ある程度成長したら マニュアルはこのサイトから独立させるつもりなので、気兼ねなく連絡下さい。 ページの内容やブラウザへの表示に関しておかしな部分がありましたら、ここまでご連絡下さい。 表示に関する場合であれば、OSとブラウザの種類、バージョンを教えて頂けると助かります。 2ちゃんねる 【関数】Erlang【エリクソン】 このサイトについて このwebページはプログラミング言語Erlangの解説を目的としたページです。 Erlangは歴史もあり、機能も充実している言語なので
[CSS]知ってると便利！「:target疑似クラス」を使ったスタイルシートのテクニックと注意点
:target疑似クラスは、ターゲットとなるアンカーリンク先の要素を表します。例えば、長い記事をユニークなidでセクションに分け、それぞれのセクションにアンカーリンクを設置します。:target疑似クラスを利用すると、ターゲットとなるセクションごとにスタイルを適用することができます。 :target疑似クラスを使ったスタイルシートのテクニックと注意点を紹介します。 The :target Trick :target以外の便利な疑似クラス・疑似要素については、下記のページを参考に。 使い方をしっかりマスターしておきたい便利な5つの疑似クラスと疑似要素 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 :target疑似クラスを使って、コンテンツを表示・非表示 :target疑似クラスを使って、ナビゲーションをスライドアウト :target
![[CSS]知ってると便利！「:target疑似クラス」を使ったスタイルシートのテクニックと注意点](https://cdn-ak-scissors.b.st-hatena.com/image/square/a2245872982c8e900d7bcc462d8385b1f0845ff9/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201603%2F2016070901.png)
CSSコーディングテクニック : 詳細度、単位、flexbox、mixin | POSTD
(2016/7/15、記事を修正いたしました。) 最近、ビギナーからベテランのデベロッパに至るまで、CSSに手を焼く人を多く見かけます。そうした人たちの中には、CSSの機能を好まず、別の言語を使った方がいいのではないかと考えている人もいます。もともと、CSSのプロセッサもこうした考え方から生まれました。書くべきコードを少なくできることを期待して（ 以前の記事で ご紹介しているとおり、普通はそうではありません）CSSのフレームワークを使う人もいれば、CSSを完全に見限り、スタイルの指定にJavaScriptを使うという人もいます。 しかし、あなたが取り組んでいるパイプラインにCSSプロセッサをいつも取り入れる必要があるとは限りません。どんなプロジェクトであれ、開始の時点から、膨れ上がったフレームワークをデフォルトに取り込む必要はありません。また、CSSを使うところで、代わりにJavaScri
意外と今っぽくなる、CSSやjQueryで実現するエフェクトまとめ
作成：2016/02/8 更新：2016/06/29 Web制作 > CSSやjQueryで実現する、今までにないようなエフェクトを実現するために知っておくと便利なエフェクトをまとめました。トレンドをおさえた最近のものを厳選してピックアップ。ファーストビューなどで、一味違った面白さを出したいときに。 エンジニア速報は Twitter の@commteで配信しています。 セグメンテッド コントロール pocketなどに見られる「リスト・タイルビュー」など表示形式の切り替え。コンテンツを切り替えるセグメンテッド コントロール（SegmentedControl）。少し古い記事ですが、他になさそうだったので。 Blueprint: View Mode Switch もうひとつはcodepenから。 See the Pen DropDown2Segment by ActiveCodex (@Acti
CSSの:nth-childと:nth-last-child擬似クラスの使用例 - NxWorld
今さらな内容になりますが、未対応だったIEのサポート終了によって今後ますます使う場面は増えるでしょうし、恥ずかしながら指定方法によっては一瞬どう記述するかど忘れしちゃうことがたまにあるので備忘録も兼ねて。 CSSの擬似クラスにある:nth-childと:nth-last-childの使用例を自分が見たい時にすぐ確認できるようひと通りまとめました。 説明時に利用しているサンプルイメージやコードは、ul内に10個のli要素を記述してデフォルトで青いボックスが並んでいる見た目になるようCSSを指定しています。 それを:nth-childと:nth-last-childを使って指定されたものを赤いボックスに変化させており、実際のブラウザ表示を見たい場合はCodePenにデモをアップしておいたのでこちらをご覧ください。
Gemの作り方(入門編) - Qiita
はじめに まずどうやってひな形を作るか。ですがこれは bundle gem という、bundlerがデフォルトで提供しているコマンドを利用するのが一番簡単です。 今回はhello_worldという名前でgemを作るので、bundle gem hello_worldとします。 実行すると、このような形でひな形が生成されます。これを使ってgemを開発していくことになります。 gemspec Gemの作成でまず大事になるのが gemの名前.gemspec というファイルです。例えば上記で生成したひな形だと # coding: utf-8 lib = File.expand_path('../lib', __FILE__) $LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib) require 'hello_world/version' Ge
【Webデザイナ－・コーダー向け】すぐに使えるSCSS入門｜基礎編 | DevelopersIO
はじめに 早速ですがみなさん、黒い画面（コンソールやターミナル）はお好きですか？ ちなみに僕は最近やっと黒い画面に対していくつかの呪文使えるくらいになりました。文系理系でもどちらでもなくさらに低学歴の僕にとっては潜れば潜るほど黒い画面がつきまといます。（今では好きですよ、黒い画面） 今回は、すぐに使えるSCSS入門｜基礎編ということで、「黒い画面など見たくない！」というあなたにも、GUI操作だけですぐに使えるアプリケーションのインストールからSCSSの基本的な利用方法について、実際の開発に使えるポイントを押さえて解説していきたいと思います。 SCSSを覚えて生産的で楽しいWebサイト制作・アプリケーション開発をしていきましょう。 まだSCSSを知らない方向けに「SCSS」って？ 前回の記事「Media Queriesの記述を少し楽にしてくれるSCSS（Sass） Mixin（自作）」からの
Write cross-platform native apps in Ruby | RubyMotion
RubyMotion lets you quickly develop cross-platform native apps for iOS, Android and OS X, all using your favorite editor and the awesome Ruby language you know and love. Let's see how RubyMotion works I'm a developer You will feel at home. RubyMotion features a statically-compiled version of the Ruby language designed for native mobile platforms, as well as a command-line based extensible toolchai
AngularJSの便利なツール20選 | POSTD
皆さんはAngularJSに興味がありますか？ この記事では、AngularJSのための最適なツールと選りすぐりの情報をリストにまとめています。Angularを使ってアプリケーションの開発をする際には役立つ内容です。 Webアプリケーションを動的に設計したいWeb開発者の多くは、 フレームワークとしてAngularJSを選択するようになってきました 。AngularJSの開発者が新たにAngularJSプロジェクトを立ち上げる場合、本格的にWebサイトを開発しようとすると、非常に多くのツールが必要になります。 AngularJS初心者の場合は、まず始めに AngularJSの良書 を何冊か読むと良いでしょう。 私たちは、オンラインでAngularJSを学習するための、膨大な AngularJSのチュートリアル リストも作成しています。 AngularJSでWebアプリケーションを開発する際
コーディングに最適な日本語対応の等幅フォントSource Han Code JPとは – ICS MEDIA
コーディング向けの日本語対応の等幅フォント「Sourceソース Hanハン Codeコード JPジェイピー（和名：源ノ角ゴシック Code JP）」が、2015年6月4日に公開されました。「源ノ角ゴシック Code JP」は、プログラミングやHTML/CSSのコーディング、ターミナルでのテキスト表示など、和欧表示用フォントとしての利用を想定されたフォントです。 ダウンロードはこちらから Release Fonts (OTF, OTC) · adobe-fonts/source-han-code-jp · GitHub ※このフォントは無償でダウンロード可能です。OTCとTTFの両方のフォーマットで配布されているので、Windows/macOSともに簡単にインストールできます。 ※上記リンクの「Fonts version ［バージョン番号］ (OTF, OTC)」となってい箇所の［Sourc
クロスサイトリクエストフォージェリ(CSRF)とその対策
本資料は、web アプリケーションにおける脆弱性のひとつ、CSRF (クロスサイトリクエ ストフォージェリ) の仕組みとその対策に関する説明資料です。 また、CSRF 対策のためのライブラリのいくつかについて、その概要と適用例も紹介しています。 Webアプリケーションを作成する開発者の方々が、CSRF 脆弱性に対する理解を深め、よりセキュアなWebアプリケーションの開発の一助となれば幸いです。 自習用の資料や勉強会での資料としてご活用ください。 - 改訂版+1: 図版や誤記の修正 (2015年10月20日) ※ コメントくださった皆様ありがとうございます! - 改訂版: JPCERT/CC Web サイトにて公開 (2015年10月6日) - 初版: OSC2015Hokkaido 講演資料 (2015年6月13日)
CodeCombat - Coding games to learn Python and JavaScript
Our innovative game-based learning technology has transformed the way students learn to code. Game-Based LearningWith our unique approach, students embrace learning as they play and write code from the very start of their adventure, promoting active learning and a growth mindset. Text-Based CodingOur custom code engine and interpreter is designed for beginners, teaching true Python, JavaScript, an
[JS]スマホでもデスクトップでも快適！水平スクロールコンテンツを簡単に実装できるスクリプト -horizonScroll.js
マークアップは非常にシンプル、スクリプトの設置も簡単、スマホでもタブレットでもデスクトップでもすいすい快適に操作できる水平スクロールコンテンツを実装できるjQueryのプラグインを紹介します。 デモのアニメーション horizonScroll.jsの使い方 Step 1: 外部ファイル 当スクリプトとjquery.jsを外部ファイルとして記述します。 <head> ... <script type="text/javascript" src="jquery-1.10.2.js"></script> <script type="text/javascript" src="jquery.horizonScroll.js"></script> </head> スマホなどタッチデバイス対応にする場合は、touchSwipe.jsも加えます。 <head> ... <script type="tex
![[JS]スマホでもデスクトップでも快適！水平スクロールコンテンツを簡単に実装できるスクリプト -horizonScroll.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/87c79333735eb75d10033e33d194426b66f5def3/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015031609.png)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Free prototyping tool for web & mobile apps - Justinmind