ヤベェ漫画見つけたったｗｗｗ
魅力を紹介 ※1話だけだとちらっとしか出てきてないのですが、1巻単位で読むと、ヒロインの体質は「仕事として回していくのに厳しい」という話がけっこう多いのです。 そのへんを踏まえた語り口になってるので、1話読んだだけだと「そこまで深読みしなくても…」という部分を書いてありますが、ご勘弁ください。 三沢文也 @tm2501 「先生、俺にかまわずイッてください」の魅力としましては ・えっちなのも突き抜けるとバカバカしくて笑える ・正論言うやつも出てきても、立場やその場の慣れで、正論が通らないことを面白いほどキチッと描いてる という2点。 イロモノに見えて、実は高度に哲学的なテーマを扱った作品だと思う pic.twitter.com/fskZ7NZMOk 2020-02-28 11:56:12
Gulpで複数のファイルを結合する方法 (gulp-concat) |
概要 JavaScript や CSS をコーディングする際に、管理を便利にするために役割ごとにファイルを複数に分割して、実際に動作させる際には1つのファイルに結合して動かしたい場合があります。 本稿では Gulp で複数のファイルを結合する方法について解説します。 なお、Gulp で複数のファイルを結合するには gulp-concat モジュールが便利です。 本稿では gulp-concat を用いた方法を紹介します。 本稿のゴール 本稿では、3つのファイル( src/file1.txt, src/file2.txt, src/file3.txt )を、1つのファイル( dest/file.txt )として結合して出力することをゴールとして解説します。 プロジェクト ├ gulpfile.js ├ /src │ ├ file1.txt │ ├ file2.txt │ └ file3.tx
gulp を使って自動でsass をコンパイルできるようにする - Qiita
一体何番煎じになる記事だろうか…。 gulp を使ってsass を自動コンパイルできるようにした。 【重要】追記(2022/01/02) gulpfiles.js で「gulp.task～」を使って記述する方法は、2018年12月から非推奨になっているため、この記事は参考程度に読んでください。というのを3年位経った2022年に気づきました…。 別途記事を投稿する予定です。 事前準備 gulp を使えるようにするには、予め以下をインストールする必要がある。 node.js Ruby sass これらのインストールについてはOS によって異なるため、省略。 (2019年3月22日削除) npm init node.js インストール後、gulp をインストールしたいディレクトリで以下のコマンドを実行する。
overflow-x - CSS: カスケーディングスタイルシート | MDN
CSS チュートリアル CSS の基本 CSS の第一歩 CSS の第一歩の概要 CSS とは何か CSS 入門 CSS の全体像 CSS の働き 評価課題: 経歴ページのスタイル設定 CSS の構成要素 CSS の構成要素の概要 CSS セレクター Type, class, and ID selectors Attribute selectors Pseudo-classes and pseudo-elements Combinators カスケードと継承 Cascade layers ボックスモデル 背景と境界 書字方向の操作 内容のはみ出し CSS の値と単位 CSS における大きさの指定 画像、メディア、フォームの要素 表のスタイル付け CSS のデバッグ CSS の整理 評価課題: CSS の基本的な理解度 評価課題: 素敵なレターヘッドの便箋の作成 評価課題: かっこいいボック
Webpackのビルド時間を短くするための取り組み - freee Developers Hub
メリークリスマス。freeeでエンジニアをやってます @yo_waka です。 この記事は freee Developers Advent Calendar 2017 の25日目です。 Webpack でビルドしてますか？僕は今日もビルドしています。 弊社ではフロントエンドのビルドに Webpack を用いているのですが、サービスの規模が大きくなるとともにビルド時間が長くなってきて困ってきました。 会計freee というサービスのフロントエンドの規模的にはこのような感じです。 JSコード行数: 275421行 Webpack エントリポイント数: 108 そこそこですね。 煩悩の数だけJSのエントリポイントがあります。 エントリポイントが多い理由は、元々は Rails の標準である Sprockets のみでビルドしていたものを少しずつ移行していったためです。 元々SPAで作られているアプ
sass-loader で dart-sass を使う - Qiita
モチベーション node-sass 、結構イライラポイントが多くて、代替手段があるなら乗り換えたいなあなんて思ってたところに dart-sass がナウでヤングだぜみたいな話を小耳に挟んだので、使ってみることにした。 ちなみに node-sass に感じていたイライラポイントは、以下の通り。 インストールが遅い Node.js のバージョンが上がりたてのとき、だいたいインストールで死ぬ dart-sass がナウでヤングな理由については、 Feature Watch: CSS Imports and CSS Compatibility とかを読んで欲しい。 要約すると、LibSass や Ruby Sass に搭載されていない機能が、先行的に積まれてるみたいなことらしい。( プレーンな CSS のインポートをサポートするとかなんとか) モチベとしては、「 node-sass でコケたときに
パンくずリストとは？Webサイトの基本やSEO効果など徹底解説！｜SEOラボ
一方、パンくずリストを設置しなければ、訪問したユーザーは閲覧してるページの位置や属性がわかりません。 また、クローラーはリンクを辿る機会が減るので、ページの発見や属性の認識が難しくなります。 この場合、ユーザビリティやクローラビリティが低下するので、SEOの良い効果が見込めなくなります。 こうした良くない状況を回避する為に、パンくずリストの基本を理解して、適切に活用しましょう。 この点踏まえて今回は、パンくずリストの定義などWebサイトの基本となる部分を中心に、初心者にもわかりやすくポイントをまとめて解説したいと思います。 パンくずリストとは？ パンくずリストとは、現在閲覧中のページに該当する階層やカテゴリーを訪問ユーザーや検索エンジンに正しく伝えるもので、ぱっと見ただけで現在サイト内のどのページを閲覧していて、それがどういったテーマのコンテンツなのか？といったページの内容を理解してもらう
アセットのコンパイル(Laravel Mix) 5.4 Laravel
イントロダクション Laravel Mixは多くの一般的なCSSとJavaScriptのプリプロセッサを使用し、Laravelアプリケーションために、構築過程をWebpackでスラスラと定義できるAPIを提供しています。シンプルなメソッドチェーンを使用しているため、アセットパイプラインを流暢に定義できます。例を見てください。 mix.js('resources/assets/js/app.js', 'public/js') .sass('resources/assets/sass/app.scss', 'public/css'); Webpackやアセットのコンパイルを始めようとして、混乱と圧倒を感じているならLaravel Mixを気に入ってもらえるでしょう。しかし、アプリケーションの開発時に必要だというわけではありません。どんなアセットパイプラインツールを使用してもかまいませんし、使わ
遅いSassのコンパイルが早くなる方法（普通か？）｜R太の閃光絵巻
Sassは保存してcssに書きだされるまでにいつもく3秒らい時間がかかるので、ちょっとイライラしていました。 しかし、このコンパイルを早くする設定があるのでした。 ◆config.rb このファイルの中身は大体こんなかんじになってると思いますが、 [html] # Set this to the root of your project when deployed: http_path = “/” css_dir = “../css” sass_dir = “../sass” images_dir = “../img” javascripts_dir = “../js” cache = true [/html] この中のココ！ cache = true にすればOKです。 こうすると余計なキャッシュファイルが生成されてしまいますが、その代わりほぼ一瞬でコンパイルが完了します。 もう劇的に見
初心者でもすぐできるスマホ対応jQueryアコーディオンメニューの作り方 | SONICMOOV LAB
また会いましたな！ スイカバー(ふつうのやつ)をこよなく愛するマークアップエンジニアのまりぞーですヽ(°ω°)ﾉ 先日、ついにWii UとSplatoonをゲットしました。 そろそろガチバトルでわちゃわちゃするお年頃かもしれません…ガンバルゾー！ガンバルゾー！ 今回はjQueryを利用したアコーディオンメニューの作り方をご紹介します。 前回の【初心者向け】レスポンシブなtableを作ってみる同様、初心者向けです。 また、 来年2016年1月12日からIE8がサポート対象外となるので、対応ブラウザはIE9以降とモダンブラウザ系とします。 デモでは割りとシンプルな構造なので、スマホなどたいていの端末で閲覧できると思います。 よろしくお願いします。 PCのときは横並びのレイアウトで、モバイル端末など画面が小さい場合はぬるりと動くハンバーガーに格納されるjQueryでレスポンシブなメニューを作って
<header> - HTML: HyperText Markup Language | MDN
HTML チュートリアル HTML の基本 HTML 入門 HTML 入門の概要 HTML を始めよう ヘッド部には何が入る? HTML のメタデータ HTML テキストの基礎 ハイパーリンクの作成 高度なテキスト整形 文書とウェブサイトの構造 HTML のデバッグ 評価課題: 手紙のマークアップ 評価課題: コンテンツのページの構造化 マルチメディアとその埋め込み マルチメディアとその埋め込みの概要 HTML の画像 動画と音声のコンテンツ object から iframe まで — その他の埋め込み技術 ウェブへのベクターグラフィックの追加 レスポンシブ画像 評価課題: Mozilla のスプラッシュページ HTML の表 HTML の表の概要 HTML の表の基本 HTML 表の高度な機能とアクセシビリティ 評価課題: 太陽系の惑星データの構造化 リファレンス HTML 要素 <a>
Github製のAtomエディタでターミナルやコマンドプロンプトを利用する | Free Style
Webアプリケーションの開発ではPHPやJava、Pythonなどのプログラミング言語を利用していくことがありますが、その中でMacのターミナルやWindowsのコマンドプロンプトでのコマンド操作を行うことがよくあります。データベースを操作したりファイルのコンパイル作業を行ったりと。 作業の中ではソースコードを書くエディタとは別にターミナルやコマンドプロンプトを起動しておいてコマンドを打つなど、2つのツールを使い分けて作業をしていくとこになります。 エディタとターミナルやコマンドプロンプトの画面をいちいち切り替えるのも面倒だしもっと効率よく作業をしたいという方のために、Atomエディタでターミナルやコマンドプロンプトを利用する方法をご紹介します。 Atomエディタ内でターミナルやコマンドプロンプトを利用するには「platformio-ide-terminal」というパッケージを導入します。
【CSSテク】ブロック要素の比率を維持しながら可変させる方法 | 株式会社リースエンタープライズ
皆さんこんにちは、リースブログ編集部です。 本日は、レスポンシブ対応でかなり使えるCSSテクニックをご紹介します。 高さ不明のブロック要素の比率を維持させる方法 レスポンシブで組んでいると、どうしてもブロック要素をそのままの比率を維持しながら可変させたいという要望が生まれます。 画像の可変は、width=”100%”を指定すれば画像の比率を維持しながら勝手にウィンドウサイズに合わせてサイズが変更されるので楽ですが、ブロック要素では高さ方向でつまづきがちですね。 【NG例】通常のレスポンシブ対応方法例 通常であれば、heightを指定しない限り、親ブロック要素は子ブロック要素のコンテンツによって高さが依存します。 具体的な例がこちら。 ブラウザのウィンドウサイズをグイングイン動かしてみてください。 サンプルへ 一応コードはこちらから確認頂けます。 <div class="adjust-box
属性セレクター - CSS: カスケーディングスタイルシート | MDN
CSS チュートリアル CSS の基本 CSS の第一歩 CSS の第一歩の概要 CSS とは何か CSS 入門 CSS の全体像 CSS の働き 評価課題: 経歴ページのスタイル設定 CSS の構成要素 CSS の構成要素の概要 CSS セレクター Type, class, and ID selectors Attribute selectors Pseudo-classes and pseudo-elements Combinators カスケードと継承 Cascade layers ボックスモデル 背景と境界 書字方向の操作 内容のはみ出し CSS の値と単位 CSS における大きさの指定 画像、メディア、フォームの要素 表のスタイル付け CSS のデバッグ CSS の整理 評価課題: CSS の基本的な理解度 評価課題: 素敵なレターヘッドの便箋の作成 評価課題: かっこいいボック
ハンバーガーボタンジェネレーターを作りました
ハンバーガーボタンジェネレーターを作りました Publish Date: 2019.04.17 Vueの練習も兼ねてハンバーガーボタンジェネレーターを作りました。 Hamburger Button Generator 使い方 使い方はいたって簡単で、ハンバーガーボタンの縦、横、線の太さを入力するだけで自動的HTML、CSS、jQueryのコードが生成されます。あとは、それを使いたいところにコピーするだけでOKです。 数値を入力するとリアルタイムで反映されるので、数字を変えながらボタンを作ることもできます。 カラーコードを入れれば色もカスタマイズできます。 今後の予定 いくつかアップデートをしたいと思っており、バニラJSのコードを生成できるようにする予定です。 スポンサードリンク
ドロワーメニューが作れるjQueryライブラリ「drawer.js」のご紹介！ | HPcode
対応ブラウザ CSS3をサポートしているブラウザが対象です。 IE10 ～SafariChromeFirefox 公式サイトとCDNの設置 公式サイトにアクセスするとCDNが用意されています。GitHubでファイルをダウンロードすることもできますが、CDNの方が楽なので今回はこちらを利用します。 公式サイト → http://git.blivesta.com/drawer/ 記載されているサンプルコードを元に解説していきます。 完成形のソース こちらを「index.html」などの拡張子.htmlで保存するとドロワーの動作が確認できるはずです。 <!DOCTYPE html> <html> <head> <!-- drawer.css --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/drawer
jQuery+CSS3で固定ナビゲーション→レスポンシブでハンバーガーメニューに切り替える
Posted: 2015.12.09 / Category: HTML&CSS, javascript / Tag: jQuery jQuery+CSS3を使用してスマホではハンバーガーメニューに切り替わる、固定ナビゲーションを作成してみます。 PC版のナビゲーションは基本構造は下記を使用します。 jQuery+CSS3でスクロールするとアニメーションして狭くなる固定ナビゲーション HTML #mobile-head はモバイル時色を付けてバーにします。 #global-nav はモバイル時ナビゲーションを開閉するボタンです。 三本の線がspanになります。 HTML <header id="top-head"> <div class="inner"> <div id="mobile-head"> <h1 class="logo">Logo</h1> <div id="nav-toggle
5.8 Eloquent：リレーション Laravel
イントロダクションIntroduction データベーステーブルは大抵の場合、他と関連しています。たとえばブログ投稿（ポスト）は多くのコメントを持つか、それを投稿したユーザーと関連しています。Eloquentはそうしたリレーションを簡単に管理し操作できるようにするとともに、様々なタイプのリレーションをサポートしています。Database tables are often related to one another. For example, a blog post may have many comments, or an order could be related to the user who placed it. Eloquent makes managing and working with these relationships easy, and supports seve
PHP: strip_tags - Manual
Getting Started Introduction A simple tutorial Language Reference Basic syntax Types Variables Constants Expressions Operators Control Structures Functions Classes and Objects Namespaces Enumerations Errors Exceptions Fibers Generators Attributes References Explained Predefined Variables Predefined Exceptions Predefined Interfaces and Classes Predefined Attributes Context options and parameters Su
第18回 MySQL5.7のデフォルトのSQLモードを確認してみる | gihyo.jp
長い間MySQLを使ってアプリケーションやサービスを提供していると、セキュリティの都合や機能の高性能化によってアップグレードが求められることがあります。アップグレードを行った際にアプリケーションがそのまま動いてくれる場合もあるのですが、SQLモードの設定によって動かなくなってしまうこともあります。 アプリケーションが動かなくなってしまい、仕方がないのでよくわからないけどSQLモードの設定を空にする、なんて事はありませんか？ 今回はそんなSQLモードの確認方法や、デフォルトの設定がどのような意味を持っているのかを紹介していきたいと思います。 デモンストレーション環境 この原稿を書いている時点で最新版である5.7.12を第5回 Dockerで複数バージョンのMySQLを開発環境に用意するで作成した環境で実行して確認していきます。 また、今回使用するデータは第2回 MySQLにはじめてのデータを
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
初めてのLaravel Mix | アールエフェクト
数字を入力するだけ！ハンバーガーボタンジェネレーター
Login • Instagram
NHK、2月29日に「発表! 全ファイナルファンタジー大投票」3時間半生放送
２つのページのはてブコメントを比較するツール ｜ はてなスターウォーズに勝ち残るためのツールその27
PICO-8 日本語版マニュアル - kitao's blog