いざという時に使える13のHTML&CSS Tips集Update2023.05.12Release2023.04.13Coding HatenaにシェアするTwitterにツイートするPocketにストックするFeedlyに登録する いざという時のために覚えておくと便利なHTML＆CSSのTipsを13個紹介します。何かで困った時に読み返してみてください。何かでお役にたてると思います。 テキストの円形回り込み See the Pen shape-outside by Kobayashi (@Pulp_Kobayashi) on CodePen. 円形の画像の縁に沿ってテキストを回り込ませるCSS Tips。実際には画像の縁を判定して回り込んでいるのではなく、shape-outsideプロパティを使用し、circle(50%)を指定することで、要素の回り込みの形状を円形にしています。 CS
2021年3月4日 CSS CSS小技集シリーズの第4弾！「【第3弾】少しのコードで実装可能な15のCSS小技集」から約2年。またまた便利でサクッと使えるコードが続々登場しています！初心者さんからベテランさんまで要チェック！ ↑私が10年以上利用している会計ソフト！ 目次 要素の上下左右中央配置 画面幅いっぱいに画像を配置 リストマーカーの色を変える 言語にあわせて引用符を変更 クリックで文字列を選択 背景画像を見切れないよう繰り返し表示 入力時の縦線の色を変更 ドラッグで要素のサイズを変更できるようにする floatは flow-root で解除 文章をカラム分けしてラインを入れる HTML・CSSの全コードは各サンプルの「HTML」や「CSS」タブを、別タブでのサンプル表示は右上の「EDIT ON CODEPEN」をクリックしてご覧ください！ 1. 要素の上下左右中央配置 ボックスを要
2020年初め、Chromium版のMicrosoft Edge（以下新Edge）がリリースされました。新Edgeは「Microsoft Edge Legacy」（以下Edge Legacy）と比べて多くの機能が使えるようになっており、Chrome・Firefox・Safariのモダンブラウザと遜色ないレベルになっています。 先日5月29日にリリースされた「Windows 10 May 2020 Update」では、Edge Legacyの開発が終了することもアナウンスされており（参考記事「Windows 10 features we’re no longer developing - Windows Deployment」）、今後のWindows標準ブラウザは新Edgeとなっていくでしょう。 ウェブ制作の面で嬉しいことは、多くのCSSやJavaScriptの機能が使えるようになったことで
Linux踏み台を使わずにWindowsインスタンスへのリモートデスクトップ接続をSSHトンネル化する | DevelopersIO
Linux踏み台ホストを使わずにWindowsインスタンスへのリモートデスクトップ接続をSSHトンネル化する方法について調べました。 みなさん、こんにちは！ AWS事業本部の青柳＠福岡オフィスです。 今回は、Windows の「リモートデスクトップ接続」に関して調べてみました。 はじめに リモートデスクトップ接続の SSH トンネリングとは？ Windows をリモートで操作する場合に標準的に使われる「リモートデスクトップ接続」ですが、リモートデスクトップ接続で使用する RDP プロトコル (TCP/3389) ではなく SSH プロトコルを使って接続を行いたい場合があります。 例えば、以下のような要件・背景が考えられます： サーバ側あるいはクライアント側で、ファイアウォール等によって通信可能なポートが SSH (TCP/22) のみに制限されている セキュリティ強化のためパスワード認証で
という点について分析したNBER論文が上がっている。論文のタイトルは「Inequality of Fear and Self-Quarantine: Is There a Trade-off between GDP and Public Health?」で、著者はSangmin Aum（明知大学校）、Sang Yoon (Tim) Lee（ロンドン大学クイーン・メアリー校 ）、Yongseok Shin（セントルイス・ワシントン大学）。 以下は導入部の一節。 Our model provides a framework for quantitative analysis and can be used to evaluate and predict the aggregate and distributive effects of real-world policies in variou
【はてなブログ】WordPressみたいな会話形式の吹き出しを使おう💓（コピペOK / 初心者向け） - 【ちゃんこめBlog】インド在住OLの雑記ブログ
Kome こんにちは！ はてなブログでWordPressよりも可愛く洗練されたブログを作ることを目指しているKome（@chankomeppy）です♪ こんな吹き出し、見たことありませんか？ 吹き出しを使うと、文章ばかりの記事やお堅い内容の記事がカジュアルで読みやすくなったり、ブログにオリジナル感がでたりするので、使ってみたいなぁ～と思っている方は多いはず。 WordPressではテーマに実装されていたり、プラグインを使うことで簡単に吹き出しを利用することができますが、はてなブログに吹き出しの機能は標準装備されていないので、自分でCSSをいじってカスタマイズするしかないんですよね。 初心者ﾌﾞﾛｶﾞｰ やってみたいけど、難しそうだから手を出せてないんだよね～ Kome はてなブログでも簡単に吹き出しを導入できるんだよ！ この記事で紹介するコードをコピペして、自分好みにカスタマイズするだけ！
環境 第1章 Deviseをはじめよう 001 Deviseを使ってみよう 002 ヘルパーを使ってみよう 第2章 モジュールを使う 003 モジュールとは？ モジュールの種類 モジュールのカラム モジュールのルーティング モジュールのコントローラーとビュー モジュールのメソッド モジュールのメール送信 モジュールの設定 004 Registerableモジュール コントローラーとルーティング 設定 参考 005 Database Authenticatableモジュール コントローラーとルーティング カラム 設定 メソッド メール 参考 006 Rememberableモジュール カラム 設定 メソッド 参考 007 Recoverableモジュール コントローラーとルーティング カラム 設定 メソッド メール 参考 008 Validatableモジュール バリデーション項目 設定 参
Last Commit Date of Markdown Sources: Tue Oct 25 10:20:24 2022 +0000 i The Rust Programming Language 日本語版 著：Steve Klabnik、Carol Nichols、貢献：Rust コミュニティ このテキストのこの版では Rust 1.58（2022 年 1 月 13 日リリース）かそれ以降が使われているこ とを前提にしています。Rust をインストールしたりアップデートしたりするには第 1 章の「インス トール」節を読んでください。 HTML 版は https://doc.rust-lang.org/stable/book/で公開されています。オフラインのときは、 rustup でインストールした Rust を使って rustup docs --book で開けます。 訳注：日本語の
2022年11月にOpenAIから“ChatGPT: Optimizing Language Models for Dialogue”というタイトルでChatGPTのアプリケーションが公開されました。 かなり話題になっているので知っている方や実際に使ったことがある方も多いかもしれませんが、ChatGPTとは、AI、特に自然言語処理の技術を使った対話のためのシステムといったところです。 今回はそのChatGPTの概要を簡単に説明し、ChatGPTが大学センター試験の英語を解いたら何点になるかを検証したいと思います。 私自身センター試験を受けたのは25年前ぐらいで、試験問題を解いたりする気にはならないので、基本的に答えが合っているか？だけを見ていきます。 深堀りしないので、そこはご容赦ください。 あと、下線を表現できないのどの問題があるので、ある程度質問の仕方を調整しています。 ですので厳密な
はじめに OpenAIが3月に発表していたものの実装していなかった、画像および音声を取り扱うことのできるマルチモーダルモデル「GPT4-V」のdeployが発表されました。本当に全部この会社がやればいいんじゃないか？ ChatGPTのPlus/Enterpriseユーザーに2週間かけて提供するそうです。最近ChatGPTのほうの処理能力が落ちつつあってGPT-4のAPIばっかり使ってるんですが、ChatGPT Plusは解約できそうにないですね。 GPT4-Vを中心としたV&LのLLMはDocumentUnderstandingの文脈での活用が期待されており、先日Googleを中心としたグループもLMDX: Language Model-based Document Information Extraction and Localizationという論文を発表していました。Geminiなん
LVM の動作について 〜 ディスクデータ移行と pvmove, lvconvert を例題として - VA Linux エンジニアブログ
概要 LVM について pvmove と lvconvert --mirror の動作 実験 解説 pvmove の後処理 dm_suspend / dm_resume の詳細 実験 まとめ 執筆者 : 岩本 俊弘 概要 クラウド全盛のこのご時世においても、物理マシンのお守りをしないといけないことはあって、古くなったディスクの交換作業が必要になった。 出社は避けられないものの、なるべくオフィスでの滞在時間を減らしたい。 pvmove コマンドというものがあって、online のままディスクを移行できる。 だが、このコマンドの解説記事は少なく、アンマウントしてから pvmove を実行しろといった記述があるものもある。以下はわりと正確なものである。 https://access.redhat.com/documentation/ja-jp/red_hat_enterprise_linux/7
書いた記事をEPUBで電子書籍化しました｜note
今まで「不動産 x IT」として書いてきたことをまとめて、電子書籍（EPUB）にして見よう、と思い立ちました。 単にやったことがないからやってみよう、というだけだったりします。「そこに山があるから登るんだ」、みたいな。 基本は「不動産情報デジタル標準化の覚書」をベースに、その中で「詳しくはこっちで書きました」みたいに追記して個別の記事に分散していた内容など関連する記事をすべて本文に取り込み、それを一つのEPUBで電子書籍化、みたいな感じです。（EPUB化の手順はここに書きました） 「不動産情報デジタル化の作法」と題し、直接は関連しない記事も「付録」にて全部入りにしています。全部で約15万文字。だいたい新書とかと同じぐらいでしょうか。なかなか大変でありました。 ソフトウェア開発的に言うと、これ、元プロジェクトからフォークして派生させて新たな奴を作るパターンですね。上手くやらないとあとあと変更
この記事は31億市場!? チャットの作り方[1日コース]の2コマ目の記事です。 今回やること まずはUIをhtmlとcssだけで作っていきます。 内容は初歩的な内容なので、初心者の方以外は読み飛ばてください。 これができると何が良い？ チャットUIを作ることで、チャットに必要なHTMLとCSSの構造がだいたい理解できます。 大枠のhtmlを作る 今回は、まずHTMLとCSSだけでチャットUIを作ってみます。 エディタはVS Code使ってます。 新規ファイルを作成してindex.htmlとします。 コードを入れていきましょう。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
本日はWEB業界未経験の筆者がWebサイトの作成について触れていきます！ WEB制作会社への就職を決意してからの自己学習時間「100時間」をアウトプットしていきたいと思います。今回はシングルカラムページを作成していきます！ 【シングルカラムページの作成】 HTML/見出しとプロフィール Section要素を配置し、class属性名前をつける＆クラス名を追加する プロフィール分のエリアを作成する セクション内のテキストをマークアップする 太文字にする為の印をつける 画像を配置する 経歴セクション 表組みを作成 CSS/メインビジュアルの設定 背景画像を設定する 背景画像の大きさを調整する 背景画像の表示位置を調整する コンテンツエリアのスタイル設定をする コンテンツエリアの背景を白くする コンテンツエリアの上部、内側に余白を設定する。 メインエリアの幅を指定する 見出しを装飾する 大見出しの
カスタマイズの記事でいくつか紹介していますが、はてなブログにはデフォルトで読み込まれているCSSにすでに何個もデザインが記述されています。運営側のベースデザイン用だとは思いますが、利用者側でも同じように使えるようです。 そこで、デフォルトのCSSの中から便利そうな既存デザインを6つまとめてみました。使えそうなものがあったらぜひ取り入れてみてください。 はてなブログの既存デザイン 1.中央揃え・左揃え・右揃え 2.回り込みとその解除 3.余白をなくす 4.文字の装飾 5.箇条書きアイコン 6.見出し まとめ スポンサーリンク はてなブログの既存デザイン 1.中央揃え・左揃え・右揃え .center { text-align: center; margin-left: auto; margin-right: auto; } .textleft { text-align: left; } .te
本日はWEB業界未経験の筆者がHTMLについて触れていきます！ WEB制作会社への就職を決意してからの自己学習時間「100時間」をアウトプットしていきたいと思います。 【C S Sの基本知識】 C S Sの基本文法 一つのセレクタに複数のスタイル宣言をする 複数のセレクタに同じスタイル宣言をする 特定の場所にあるセレクタだけに別の指定をする テキストを装飾するプロパティ 文字サイズを指定する font-size 文字の太さを指定する font-weight 行と行の間隔を指定する line-height 行の揃えを指定する text-align 文字の色を指定する color 要素の外側の余白サイズを指定する margin 要素の内側のサイズを指定する padding 要素の高さと幅のサイズを指定する height/width C S Sを記述する場所 タグのstyle属性に直接記述する
概要 2023年10月、Google (Gmail) と米Yahoo (※) から、メール送信者向けのルール強化についての発表がありました。 2024年初旬に、それら2社が提供するメールサービスに対して送信した電子メールを受け取ってもらうための必須要件が追加されるというものです。 これは、大手メールボックスプロバイダー (MBP) において、送信ドメイン認証の必須化、いわゆる "No Auth, No Entry" が適用される格好であり、メールサービスに関わる人が把握しておくべき変化かと思います。 本記事では、Googleと米Yahooの発表内容や、M3AAWGのコメントをまとめておきます。 (※) アメリカのYahooの話なので、日本のYahoo! Japan (LINEヤフー株式会社) が提供するメールサービス (@yahoo.co.jp) のことではありません。 SPF、DKIM、
はてなブログ「関連記事」をカスタマイズします！ ずっと気になっていた「関連記事」をカスタマイズしました。 記事下に表示される「関連記事」ですが、ワンタッチで表示・非表示が選べます。 「デザイン」→「カスタマイズ（スパナのマーク）」→「記事」の「関連記事を記事下に表示する」のチェックボタンで選べます。 私は、表示はしたいけど表示の仕方がイマイチだなぁ...と思っていたので、今回カスタマイズしてみました。 気に入らなかった点 ●カスタマイズ前の表示（ＰＣ）がこちら。 横に間延びしているような感じで、スカスカしたような印象。 あと、タイトルの下に表示される説明文が不要。（ほんの少ししか表示されないからなくていい。） ●カスタマイズ前の表示（スマホ）がこちら。 タイトル下の説明文が、画像の下に入り込んでいてゴチャゴチャ感が凄い。 以上が気に入らなかった点です。 レッツ！カスタマイズ！ カスタマイズ
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
いざという時に使える13のHTML&CSS Tips集 | BUILD Journal
【第4弾】少しのコードで実装可能な10のCSS小技集
全モダンブラウザ対応のCSS機能が爆増。Chromium版Edgeのもたらす次世代CSS表現 - ICS MEDIA
英韓の明暗はどこで分かれたのか？ - himaginary’s diary
Devise入門 64のレシピ - 猫Rails
The Rust Programming Language: 2018 Edition
OpenAI の ChatGPT がセンター試験の英語を受けたら何点ぐらい取れるか試してみた
GPT-4V(ision) System Cardをざっくり訳した - Qiita
ゼロから作る、簡単WebチャットUIの作り方 - Qiita
自己学習60時間【シングルカラム】作成レビュー!! - 未経験WEBディレクターのススメ
HTML/CSS｜初心者必見！はてなブログで今すぐ使える既存デザイン - くろネコのんびりブログ
未経験からweb制作【基礎学習とCSS】 - 未経験WEBディレクターのススメ
2024年、Gmailと米Yahooによる "No Auth, No Entry" 等 - 朝から昼寝
【はてなブログカスタマイズ】記事下の「関連記事」をカスタマイズ！記事の説明消します - わたし、シーズン2