CSS変数がもっと便利になる新しい記述方法、CSSの次世代変数@propertyがすべてのブラウザにサポートされました

2024/08/08 55 users property カスタムプロパティ CSS変数 CSS 変数

CSSの@propertyがFirefoxにサポートされ、デスクトップ・スマホのすべてのブラウザでサポートされました。 @propertyは次世代変数と呼ばれるもので、これまでの変数（カスタムプロパティ）の使い勝手が大幅に向上します。@propertyによるカスタムプロパティの記述方法、@propertyを使ったCSSのテクニックを紹介します。 ... 続きを読む

実は大量にあるWindowsのファイルパス記述方法まとめ

2023/04/29 179 users Windows MacOS Linux ファイルパス 結果

macOSやLinuxではファイルパスの記述方法が非常にシンプルですが、Windowsには幾通りものファイルパス記述方法が存在しています。そんなWindowsのファイルパスについて調査した結果を、ファイル管理アプリ「Fileside」を開発するErik Jälevik氏がまとめています。 The weird world of Windows file paths | Fileside htt... 続きを読む

Bashを学べる全20回の入門動画　MicrosoftがYouTubeで無料公開

2023/03/11 437 users YouTube bash スクリプト Microsoft 学習

Bashを学べる全20回の入門動画　MicrosoftがYouTubeで無料公開：Bashの学習が他のスキルに役立つ理由 Microsoftは初学者向けにBashを解説する動画をYouTubeで公開した。全20回の動画ではターミナル操作の基本、ファイル操作、スクリプトの記述方法を解説している。 Microsoftは2023年2月21日（米国時間）、初学者向けにB... 続きを読む

gihyo.jp編集部におけるMarkdown記法 | gihyo.jp

2022/08/04 99 users gihyo.jp Markdown markdown記法

本稿では、gihyo.jp編集部で利用しているMarkdownファイルの記述方法を主に解説します。 注意：gihyo.jp編集部内でのみ採用しているMarkdownの書き方をまとめた文書を、記事の体裁を取って公開したものです。なお、記事公開後に記述方法を追加・変更する可能性もあります。 Markdownとは？ はじめに、筆者の把握している... 続きを読む

CSSでブロック要素の幅をコンテンツのサイズぴったりにしたい時のこれからの記述方法 | コリス

2021/08/04 191 users コリス section inline CSS div

sectionやdivやpなど、ブロック要素をボーダーで囲うと、全幅（親要素の幅）になります。そのブロック要素の中のコンテンツが少なく、ボーダーの幅をコンテンツのサイズに合わせたい場合は、どう実装していますか？ ブロック要素のままでは親要素の幅になってしまうので、通常はdisplay: inline;やdisplay: inline-block... 続きを読む

これで分かった！CSS GridとFlexboxの使い方を習得できるチートシート、ゲームまとめ - PhotoshopVIP

2019/07/12 456 users Grid Flexbox CSS flexbox レイアウト

この記事では、CSS FlexboxとGridをつかってお好みのレイアウトを作成するコツやポイントをまとめた使い方ガイドやチートシート、ゲームなどをまとめて紹介しています。 ゲーム感覚で新しいCSSプロパティを学習することができたり、記述方法をど忘れしてしまったときなどにも便利で、お好みのレイアウトをオンラインで作... 続きを読む

息子の高校に行ってきた

2018/06/05 484 users 息子 高校 ラケット 校長 担任

どうにもやりきれなくて、もやもやを書き出してみる。 今日、息子の高校に行ってきた。 昨日の夕方、携帯に息子の担任の先生から連絡があった。 内容は ６限目の数Ⅱの小テスト中に、記述方法で息子が質問をしてきた。 質問は禁止だったから他の生徒の迷惑になるので叱って机を廊下に出そうとした。 息子が抵抗したので息子の部活のラケットを鞄から出して取り上げようとしたら、それにも抵抗された。 息子が校長に訴えると... 続きを読む

あなたが知らないJavaScriptの便利すぎるショートハンド19選 - WPJ

2017/07/14 80 users WPJ ショートハンド ウロコ JavaScript 短縮

日頃書いているJavaScriptをもっと短く書く方法を知っていますか？ 目からうろこ、すぐに使えるJavaScriptのショードハンドを紹介します。 JavaScriptを使うすべての開発者に向けて、私が長年かけて身につけたJavaScriptのショートハンド（短縮記法）を資料にしました。コードの違いが分かるように通常の記述方法も併記しました。 1．三項演算子 if-else文を1行に収めた短縮... 続きを読む

正規表現：最短一致でマッチさせる表現まとめ。 | 開発ブログ | WWWクリエイターズ

2017/06/07 56 users 正規表現 Greedy 開発ブログ デフォルト マッチング

正規表現を使ってで、最短一致でマッチングを取ります。 正規表現では、「*」などの量指定子を利用してマッチを検出した時、通常は最長一致を検出しますが、特定の記述方法によって、パターンの最短一致を表現できます。 正規表現での「.」「＋」「?」「{n}」などの量指定子は、デフォルトでは「Greedy（欲張り）なマッチ」を行います。一方で、そのような量指定子の直後に「?」を置くことで、「Non-greed... 続きを読む

CSSスプライトとstepsを使ってアニメーション画像を作ろう | Webクリエイターボックス

2015/11/17 257 users steps プロパティー CSSスプライト CSS 動作

CSSで動かすアニメーションには、私自身まだまだ使いこなせていないプロパティーがたくさん眠っています。その中のひとつが steps というプロパティーでした。これまでよく使っていた滑らかな動作ではなく、段階ごとに要素を動かすことができます。実際にはどんな場面で使えるんでしょうか？今回はそんな steps プロパティーにフォーカスしてみます。 steps の記述方法 steps は animatio... 続きを読む

【徹底解説】JSON-LDを使ったschema.orgの記述方法 | 海外SEO情報ブログ

2014/10/09 169 users JSON-LD シンタックス Schema.org 徹底解説

[対象: 上級] この記事では、JSON-LDをシンタックスに用いたschema.orgの記述方法について詳しく解説します。CSS Niteで講演2014年9月20日（土）に、CSS Nite LP36 powered by In-house SEO Meetup 「ビジネスに活用できる2014年SEOトレンド」がベルサール神田 イベントホールで開催されました。僕は出演者として登壇し、セマンティッ... 続きを読む

SVGアイコンを実用するために知っておきたい、リンク周りの記述方法 | Webクリエイターボックス

2014/07/01 166 users SVGアイコン Webクリエイターボックス SVG 実用化

以前書いた「アイコンフォントからSVGへ！より手軽にベクター画像を表示しよう」という記事でSVGの基本や効率よく使用する方法を紹介しましたが、実際にWebサイト内で使うにはもう少し具体例が必要だなーと思ったのでリンク関連を中心に補足します。基本的な記述方法を覚えて実用化していきましょう！ SVGにリンクを貼る SVGにリンクを貼りたい場合、単純に a タグで svg を囲んでもうまくリンクを貼るこ... 続きを読む

「構造化データ」がよく分かる！初心者向け徹底解説 ++ SEO HACKS公式ブログ

2014/05/27 227 users SEO HACKS公式ブログ 構造化データ ボキャブラリー

SEOの文脈においても頻繁に話題になる「構造化データ」。意外にそこまで詳細に理解されている方は多くないのでは？と思います。ここでは構造化データやリッチスニペットの概要から、HTMLでの記述方法、テストツールなど、全体像を掴んで頂ければと思います。今回はコンサル部門サブマネージャーの巣鷹による執筆。 目次 セマンティックWebについて 構造化データとは 構造化データを使用するメリット ボキャブラリー... 続きを読む

レスポンシブWebデザインはviewportとメディアクエリーからはじめろ！ | 株式会社Bark to Imagine

2014/01/07 313 users 横幅 キリン 住友商事 概念 viewport

今話題の「レスポンシブWebデザイン」。 有名なところでは、 「TOYOTA新卒採用ページ」、「キリン」、「住友商事」 などがあります。 ブラウザの横幅に応じて適切なデザインを表示する技術ですが、実際はどのような目的で使われているのでしょう。 今回はそんな「レスポンシブWebデザイン」の概念から記述方法までといった、次世代Webサイトの入門的な内容をわかりやすく解説していきます。 レスポンシブWe... 続きを読む

レスポンシブデザインにするための基本的な方法｜WEB Drawer

2013/04/02 51 users WEB Drawer レスポンシブデザイン 方法 rel 普及

スマートフォンの普及で出てきた「レスポンシブ・ウェブデザイン」。 今回は「レスポンシブ・ウェブデザイン」にするための基本的な方法を見て行きたいと思います。 使い方 記述方法は以下になります。 外部ファイル読み込む時の記述法 <link href="css/mini.css" rel="stylesheet" media="only screen and (幅の指定)" > @importでの方法 ... 続きを読む

jQuery の .on() と .off() を理解する - tacamy memo

2013/03/03 568 users jQuery foo function OFF click

2013-03-03 jQuery の .on() と .off() を理解する 初心者向けの本とかだと、イベントは jQuery オブジェクトの後に直接指定する、 $('.foo').click(function(){...}); のような記述方法で説明されている場合が多いですが、少し複雑なことをしようとすると、それだと困ることが出てきます。そんなときに便利なのが .on() を使ったイベント設... 続きを読む

CSSの記述を高速化する、Emmet (Zen-Coding)｜Web Design KOJIKA17

2012/10/18 288 users Emmet Zen-Coding 真価 プロパティ CSS

Emmetは、Zen-Codingの次期バージョンの名前です。 Zen-CodingはHTMLの記述方法が取り上げられることが多いですが、個人的には、CSSの入力補助こそ真価が発揮されると思っています。 私は、EmmetまたはZen-Codingがなければ、CSSのプロパティを打つのが苦痛なほどです。 Emmetから、さらに多くのプロパティに対応し、数値も含めて展開できるようになりました。CSSの... 続きを読む

絶対に覚えておきたいHTML5の『video要素』超基本を知る!! | HTML5でサイトをつくろう

2011/12/26 448 users video要素 Flash プラグイン HTML5 超基本

video要素について 今回はHTML5新要素の中でも注目度が高い｢video要素｣の基本的な記述方法をご紹介します。 video要素はFlashなどのプラグインを使用することなく動画をウェブ・ページに表示することができます。ですが、IEが8まで対応していないことなどから動画コンテンツはまだまだFlashを使ったものが多いように感じます。今後ブラウザの対応が進めば、video要素を使った面白い動画... 続きを読む

IE6などのクロスブラウザに強くなる、22のHTML+CSSコーディングの基礎 : Web Design KOJIKA17

2011/06/04 1224 users クロスブラウザ Twitter Opera コーディング 解釈

Twitterなどを見てると、 「IE6がー！」とか 「IE6,7,8,9、Firefox、webkit系、Operaで同じレイアウトにするの大変」などのツイートをたまに見るので、クロスブラウザでも差が出にくく、効率の良くなるコーディングの基礎を紹介します。 気をつけるHTMLの記述方法 HTMLの記述方法を間違えていると、ブラウザCSSの解釈が変わってきます。 以下のようなことは基本的なことです... 続きを読む

PHP入門

2008/10/05 798 users PHP入門 四則演算 構文 変数 オブジェクト指向

PHP入門ですこれからPHPのプログラムを開始される方を対象として、PHPの基本的な構文の解説とプログラムの記述方法を学習していきます。 関連カテゴリ:PHPインストール, PHP関数 PHPプログラムの基本事項 文字列 数値と四則演算 変数 条件分岐 ここから下は現在更新中です。 配列 制御構造 ユーザー定義関数 PHPでオブジェクト指向のプログラミングを行うためのクラスの利用方法について確認し... 続きを読む

UIオートメーションによる自動UIテストの実践 ― ＠IT

2008/06/03 205 users クロノス 自動UIテスト 実践 UIテスト テスト

特集：UIオートメーションによる自動UIテストの実践 WindowsアプリのUIテストを自動化しよう クロノス　亀野 弘嗣 2008/06/03 読者の方々は、UI（ユーザー・インターフェイス）にかかわるテスト（以下UIテスト）を自動化できているだろうか？ UIテストを自動化しようとしても、UIテストのコードは記述しにくく、記述方法に一貫性がない、などの理由から、自動化をあきらめる場合が多いのでは... 続きを読む

RubyのプログラミングやRuby on Railsなどの解説を行います

2007/05/17 367 users Ruby プログラミング Ruby on Rails 解説

Ruby及びRailsの基本から応用まで解説していますRubyインストール Rubyのindows環境へのインストール方法や追加ライブラリのインストール Ruby入門 Rubyのプログラミングをこれから開始される方を対象としたリファレンス Ruby正規表現の使い方 正規表現の基本的な記述方法からパターンマッチングの実例など 正規表現の基本 位置の指定 任意の文字と繰り返し(量指定子) 複数の候補か... 続きを読む

lighttpd + FastCGI は mod_perl + Apache1.3 より１割ほど高速 :: Drk7jp

2005/09/24 189 users FastCGI lighttpd セキュア mod_perl

lighttpd + FastCGI は mod_perl + Apache1.3 より１割ほど高速 巷で超高速 Web サーバとして話題になっている lighttpd を試してみました。lighttpd に関する日本語ドキュメントは非常に少なく、ちょっと込み入った設定ファイルの記述方法とかの解析に手間取りました。 lighttpd のコンセプトは、「セキュアで省メモリで高速に動作し、柔軟性もある... 続きを読む