画像をBase64でHTMLファイルに直接埋め込む方法 | design Edge
とはいえ、個人的にはコマンドラインに少々拒絶感があるのでさらに調べてみると、ChromeのDeveloper Toolsを使ってカンタンにエンコードできることがわかりました。 手順は以下の通りです。 ChromeでBase64へ変換したい画像を開きます。 Developer Toolsを開き（Cmd(Ctrl)＋Option(Shift)＋i）、「Application」パネルを選択。 左のペイン下の方に「Frames」というところがありますので、その配下の当該ファイル名をクリックして選択します。 すると、右側にBase64化されたものが表示されるので、まるっとコピー。 ペーストしたら、頭に上述の書式をペタッと貼りつければOKです。カンタンですね！ 上図の画像の場合は、以下のようになります。ブラウザのアドレズバーにペーストして確認してみてください。 data:image/png;base6
Visual Studio Codeを使うなら絶対に入れておきたい拡張機能Top20【2022最新版】 - Qiita
この記事はNuco Advent Calendar 2022の14日目の記事です。 VSCodeに必須の機能20個を紹介していきます。 インストール数と星の数は記事作成時点(2022年11月時点)のものです。 Japanese Language Pack for Visual Studio Code vscode-icons Code Spell Checker zenkaku Path Autocomplete Prettier - Code formatter indent-rainbow GitLens Git History HTML CSS Support Output Colorizer TODO Highlight vscode-random Atom One Dark Theme Trailing Spaces REST Client Live Server Jupyter
ゲーム感覚でプログラミング学べるサービス集 - Qiita
はじめに 今回はゲーム感覚でプログラミングを学べるサービスを紹介します。 ゲームを通して学んだ知識をアウトプットできるサービス集を厳選したので、ぜひ学んだ知識を「使える技術」として自分のものにしていただければと思います。 この記事の主な対象者 プログラミング初心者~中級者 基礎文法は学んだけどアウトプットができていない人 フロントエンジニアを目指してる人 楽しみながらプログラミングを学びたい人 ぷよぷよプログラミング まずはじめに紹介するのは、SNSでも話題になった、ぷよぷよを開発しながらプログラミングを学ぶことができる「ぷよぷよプログラミング」です。 ぷよぷよプログラミングでは、人気ゲームぷよぷよを開発しながらHTMLやCSSやJavaScriptといったプログラミングをしていく中で基礎となる技術を学ぶことができます。 実際にアプリ開発をしながら学べるので、インプットとアウトプットが同時
レスポンシブも対応！綺麗で見やすい表のデザイン11個[HTML&CSS] | SEO対策なら株式会社ペコプラ
表中のテキストの揃えの基本 まずデザインを見ていく前に、表中のテキストの一般的なルールをおさらいしたいと思います。 何気なく作成してた人はここを見直すだけでグンと見やすい表に変わりますよ 内容によっては変える必要もありますが、基本はこの3点です。 また、タイトルや、強調する値などは、太文字にしたり背景に色を入れたりと、他と差別化する事で見やすい表になります。 綺麗で見やすい表のデザインいろいろ それでは早速表のデザインを見ていきましょう！ なお、今回はプラン表をイメージし、見出しが縦と横に入っているパターンの表をベースで作成しています。 それに合わせ、レスポンシブ時ではdata-labelの値をcontent:attr()で取得し、表示させる方法で実装しています。 また基本的に比較表以外のパターンは全てhtml共通(行を増やしているものはありますが)にし、CSSのみ変えています。 <tab
![レスポンシブも対応！綺麗で見やすい表のデザイン11個[HTML&CSS] | SEO対策なら株式会社ペコプラ](https://cdn-ak-scissors.b.st-hatena.com/image/square/b67cceed1a4a3323357c90e6d43ed0caddd0c93f/height=288;version=1;width=512/https%3A%2F%2Fpecopla.net%2Fwp-content%2Fuploads%2F2019%2F04%2Ftable-design_main.jpg)
【コピペOK】CSSだけで実装できるおしゃれテーブルデザイン10つ
よくサービスのプランの比較に使用される料金テーブルです。人気のプランを目立たせるために中央のデータだけ大きさを変えて飛び出させています。真ん中の飛び出しているセルはposition:absoluteで実現しています。tableの幅は絶対値で固定しているのでレスポンシブ対応させる場合は横スクロールさせる必要があります。 <table> <tr> <th>無料プラン</th> <th class="popular"><span class="inner"><span class="no1">人気No.1</span>初級プラン</span></th> <th>上級プラン</th> </tr> <tr> <td>¥0</td> <td class="popular">¥5,000</td> <td>¥8,000</td> </tr> <tr> <td><a href="#">申し込み</a></
input type="file"でファイルをアップロードする方法｜HTMLリファレンス
<input type="file" name="example" accept="image/jpeg, image/png">
JavaScriptで自分だけのWeb製作エディタを構築できる「GrapesJS」を使ってみた！ - paiza開発日誌
どうも、まさとらん（@0310lan）です！ 今回は、ドラッグ＆ドロップで誰でも簡単にWebサイトを製作できるサービスのご紹介です！ そのままでもWebオーサリングツールとして大変便利なのですが、JavaScriptで好きなようにカスタマイズしてオリジナルのエディタを開発＆公開できるという面白い特徴があります。 現在、オープンソースとして活発に開発が進められているので、ぜひこの機会にみなさんも試してみてください！ 【 GrapesJS 】 ■「GrapesJS」の使い方！ それでは「GrapesJS」を使ったWeb製作エディタがどのようなツールなのかを見ていきましょう！ トップページにある「Webpage Demo」というボタンからアクセスすることができます。 登録なども不要で、すぐにブラウザ上で「エディタ」が表示されます。 この画面上で、自分の好きなようにWebサイトを製作することができ
HTMLメールはどうやって作成するの？基本と特徴を徹底解説！【保存版】
“標準的なHTMLメール”は存在しない 世の中には「標準的なHTMLメール」という規格が存在しません。例えば、マイクロソフトが提供する『Outlook』のサポートチームは『Microsoft Word』を用いてHTMLメールを作成することを推奨していますが（※）、『Microsoft Word』で作成されたHTMLメールは、GmailやiOS、サンダーバードなど別のメールクライアントでは正しく機能しないこともあります。その逆もまた然りです。HTMLメールはこういった複雑な受信環境を前提のもとに作成する必要があります。 ※この理由として「長年ユーザーにはそうしてもらっているし、セキュリティ上の観点からそうしている」という回答がサポートチームから得られたケースもあるようです。 HTMLメールを受け取る環境の組み合わせは100万以上存在する スマートフォンが浸透したことにより、あらゆる環境でHT
AdminLTE 2 | Dashboard
Support Team 5 mins Why not buy a new awesome theme?
管理画面を作る：AdminLTE 基本編 - Qiita
管理画面を作るのは大変なので、なるべく手間を省きたい。Bootstrapでもいいが、意外としょぼくなるのと、何よりメニュ周りの制御が今ひとつな感じがする。そこで、管理画面作成に特化したCSSフレームワークを使ってみる。 いくつか選択肢はあるが、ここではAdminLTEを利用してみる。 bootstrapベースとはなっているが、いろいろと独自の癖があり、「bootstrapだと動くのに・・・」みたいなことがままある。 最初に注意 まじめに、TOPメニューから作って見たが、Dropdown等、基本的な機能がうまく動作しないことがあった。どうやら、他の要素に依存しているので、header(class="main-header")だけでなく、サイドバー(class="main-sidebar")や、コンテンツ(class="content-wrapper")、フッター(class="main-fo
Seleniumを安定稼働させるために行うべき３つの設定(Headlessモードにも対応)
この記事では、Seleniumでクローリング・スクレイピングを実践で安定稼働させるために行うべき設定を3つにまとめました。 待機処理 エラー内容を通知する 処理をリトライする ちゃんと設定すれば、不安定なSeleniumでも、安定して定期実行できるようになるでしょう…！ 厳しいことを言うと、苦労して作ったSeleniumテストが不安定だったら現場には無価値ですしね〜。 この記事にまとめた内容が活かされて、安定したクローリング・スクレイピングが行えるようになったら…と祈るばかりです。 待機処理 Seleniumを使用したクローリング・スクレイピングのプログラムを安定稼働させるために、まず設定して欲しい項目があります。 それは、Web Driverの待機処理を追加することです。 Seleniumのエラーの原因は、find_element_xxxメソッドで、指定した要素が見つからないことが95%
私家版 Slim Framework チュートリアル (3) 〜 表示編 - Qiita
この記事について PHP のマイクロフレームワークのひとつである、Slim Framework ですが、チュートリアルがいまいちイケてないので、お題を流用しつつ、初学者にももう少し分かりやすくなるよう、アレンジしてみようという試みです。 本記事は第3回で、前回はこちら。 私家版 Slim Framework チュートリアル (2) 〜 ルーティングと新規作成編 - Qiita 概要 今回は、チケットの表示用ページ（一覧および１件）を実装していきます。 5. 一覧表示 5.1. View ファイルの作成 View ファイルをつくります。 templates/tickets/index.phtml というファイルを作成してください。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"/> <title>チケット管理</ti
あなたがまだ使っていないかもしれないHTML5の便利機能10選 - Qiita
こんにちは、たかとーです🧑🎤 こちらは、10 useful HTML5 features, you may not be usingの翻訳記事になります。 当記事は、Tapasさんの許可を得て翻訳しています。Tweet 10 useful HTML5 features, you may not be using HTML5は新しいものではありません。最初のリリース（2008年1月）以来いくつかの機能を使用してきました。100DaysOfCodeの取り組みの一環として、HTML5の機能リストをもう一度よく見てみました。何か見つけたかな？私は今のところあまり使っていません。 この記事では、過去にあまり使ったことがなかったが、今では便利になったHTML5の機能を10個挙げています。また、Netlifyでホストされている、実際に動作する例を作成しました。参考になることを願っています。 htt
独学者が気付きにくいこと(実践振り返り) - Qiita
はじめに こんにちはばーんです！ 今回は案件をこなすうちにレビュー(指摘)頂いた内容をまとめました。 1人で学習していると気付きにくい事が多くあるなぁ…と感じました。 実務に携わっていない方 実務経験はあるけど、チーム開発など他者と組んで仕事していない方 は見ていただけると気付きがあるのかなと思います。 結論 最初に書きますw 1. 独学だけでやりきらない方が良い メンターでなくとも、コミュニティなどで他者と交わりながら進めた方が絶対いいです。 独学だけだと知り得ない情報が沢山あるなぁと今回気づきました。 2. Gitはお金払ってもいいので覚える 神ツールなので。これも独学でやり切るのは厳しいかも… GitHub PR(プルリクエスト)のお作法 できる限りわかりやすく これはなにもIT業界だけに限った話ではありません。上司に資料を見せる時、お客様に見せる時なるべくわかりやすい説明を心がけま
もう迷わない、「@font-familyはこれでOK！」を色々考えてみた。 | unitopi - ユニトピ -
Macだから、Windowsだから、Androidだから… 端末それぞれの表示状態を気にしながらフォントを考えるのって大変ですよね。 とりあえずコレにしておけばいいや、というコピペ用テンプレが皆さん存在するのではないでしょうか？ 基本 font-family: sans-serif; sans-serif、つまりゴシック体であることを指定しています。 ただしそれ以上の指定ではないので、ブラウザ標準のものが使われます。WindowsであればメイリオとかMSゴシック系、Macであればヒラギノ角ゴシック系となります。 Windowsのことを考えると明瞭が由来でもあるメイリオがアンチエイリアスがかかって見やすいです。 しかし、Macの場合はヒラギノを優先させたいですよね。。 Macだと、多くのブラウザで日本語表記のフォント指定は無視されます。 つまり、“メイリオ”は読み込まれず、“Meiryo”と
[CSS]ウェブページを印刷対応にする際に、加えておくと効果的なスタイルのまとめ
ウェブページを制作する際に、デスクトップ・スマフォ・タブレットと多様なデバイスでの表示を検討する必要がありますが、プリンターでの印刷も忘れてはならない大切なデバイスです。 あなたのウェブページを印刷対応にする際に加えておくとよい、シンプルで効果的なスタイルシートを紹介します。 The printer is a device too! Responsive Design.isは文字通り、レスポンシブ デザインについてさまざまな情報を提供するサイトで、「プリンターも大切なデバイスですよ！」というのは、確かに忘れがちですね。 印刷対応にするスタイルはHTML5用で、シンプルながら非常に効果的なスタイルがまとめられています。 多くのウェブページはそのまま適用しても問題ないと思います。 CSS @media print { section { display: block; page-break-b
Getting Started - CakePHP 3 Bootstrap Helpers
CakePHP 3, Bootstrap Helpers CakePHP 3.x helpers for the Bootstrap 3 HTML, CSS & JS framework by @Holt59. Code on GitHub Download (.zip) Dependencies This repository contains a set of helpers that will help you combine CakePHP and Bootstrap. These helpers do not require any dependencies except the two obvious ones: CakePHP 3.x The helpers have been developped since CakePHP 3 beta, and will be kept
要素特定のテクニック — Selenium 日本語ドキュメント
starts-with¶ 多くのサイトでは、要素の id 属性に動的な値を使用しており、要素を特定することが困難です。1 つの簡単な解決方法として、XPath 関数を使って、その要素について知っていることをベースに要素を特定するやり方があります。たとえば、動的 id が <input id="text-12345" /> のような形式で、 12345 が動的に変わる数だとすると、 //input[starts-with(@id, 'text-')] という XPath を使用できます。 contains¶ ほかのテキストに囲まれている可能性がある値によって要素を特定できる場合には、contains 関数を使用できます。たとえば、 <span class="top heading bold"> という要素を、 ‘top’ クラスと ‘bold’ クラスと組み合わせることなく、 ‘headin
CakePHPでCSSやJavascriptを読み込む方法 | ぶろぐち
CakePHPでCSSやJavascriptを読み込む方法 こんにちは！ぐちです。 うちの若手がなぜか(？)苦戦していたことがある表題の件についてさくっと簡単にご紹介します。笑 default.ctp 全ページ共通のCSSやJavascriptの読み込みはレイアウトファイル(app/View/Layouts/default.ctp)に記述すると思いますが特定の画面のみで読み込ませたい場合もあると思います。そんな時は下記のように記述することで解決できます。 個別View 特定の個別ViewファイルにてHtmlHelperを使って下記のように記述します。 $this->Html->css('hoge', null, array('inline' => false)); $this->Html->script('hoge', array('inline' => false)); 以上です！！笑
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CakePHP3のテンプレート基本記法とレイアウトを用いたビュー開発を行う
