MarkDownで書いたファイルを置くだけでWiki化できるMDWikiを導入してみた。 - Qiita
MarkDownファイルを書くだけで簡単にWiki化できるMDWikiを導入してみました。 日本語情報が少なかったことと、恐ろしく便利なのにあまり日本で使われていなさそうだったので書いてみました。 情報共有Wikiを作りたいけどDB用意したくないとか、簡単で軽量なwikiを求めている人に向いています。 MDWikiの特徴 ・3MB程度と軽量 ・JavaScriptだけで動く ・DBを使用しない ・スマホのページビューに対応している ・記事更新がMarkDownファイルを配置するだけで簡単 ・MarkDownなのでQiitaからのデータ移行も簡単 ・GitHub／GoogleDrive／Dropbox／Disqus／facebook／twitterなどとも連携できる。 ・特にGoogleアカウントでグループ管理していてGoogleドライブを利用しているような組織にはお勧め ダウンロード ht
こんなHTMLとCSSのコーディング規約で書きたい - Qiita
HTML と CSS のコーディングルールを作ろう HTML と CSS のコーディング規約を中心に、メンテナンス性の良い HTML や CSS をコーディングする際に重要だと思うポイントをまとめています。 誰に向けた記事か この記事には、HTML や CSS を書く人に役立ちそうな内容が書いてあります。 特に初級者から中級者の方で、HTML や CSS を一通り学習した方からの反応が良いです。 まだ HTML や CSS の学習を始めて間もないという方は、先に案件やプロジェクトをこなしコーディング経験を積むことをお勧めします。経験を積むとよりこの記事の内容への理解が深まるはずです。 HTML と CSS を書くときに大切なポイント2点 HTML と CSS を書くときに大切だと思うことを書きます。 1. HTML と CSS を書かない あなたがいま書いている HTML と CSS は、
クローラ作成に必須！XPATHの記法まとめ - Qiita
最近クローラーを作成する機会が多く、その時にXPathが改めて便利だと思ったので XPathについてまとめてみました！ XPathを学ぶ方の役に立てれば幸いです。 初級編 XPathとは XPathはXML文章中の要素、属性値などを指定するための言語です。 XPathではXML文章をツリーとして捉えることで、要素や属性の位置を指定することができます。 HTMLもXMLの一種とみなすことができるため、XPathを使ってHTML文章中の要素を指定することができます。 例えば、 <html> ... <body> <h1>ワンピース</h1> <div class="item"> <span class="brand">iQON</span> <span class="regular_price">1,200円</span> <span class="sale_price">1,000円</sp
Webオーサリングツールまとめ【ホームページ制作に使える・無料ツールあり】
Webオーサリングツールまとめ【ホームページ制作に使える・無料ツールあり】 Webオーサリングツールをまとめた記事です。フリー（無料）で使えるものからプロ向けの高価なツールまであります。Windows・MacのOS対応についても比較しているので、ご自身のPC環境にあったツールを見つけてみてください。 テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査 ホームページを制作をこれから始めたい！という方のためにWebオーサリングツールを紹介します。
“Vivliostyle” CSS組版システム
ワンソース・マルチユースで 電子書籍もWebも紙の本も。 Webブラウザベース自動組版システム 2015年8月29日 村上むらかみ 真雄しんゆう, Vivliostyle Inc. Vivliostyle（ビブリオスタイル）とは vivlio（βιβλίο /vivlío/ ＝ ギリシャ語〈本〉）＋ style 本 の 組版くみはん・スタイル。 本の作り方や読み方の新しいスタイルを、 世界の誰でも自由に使えるオープンな標準技術で。 紙でも電子でも、 表現したいように表現できる自由と、 読みたい形で読める自由を （＝アクセシビリティー） CSS 組版って何？ CSS 組版 ＝ HTML（またはXML）＋CSS で組版 Web ページも電子書籍（EPUB）も、HTML＋CSS で出来ている。 PDFも、印刷して紙の本も作れる。 CSS 組版で本を作っている出版社の例 米オライリー社（組版エンジ
CSSの content プロパティーを使いこなそう！
2015年4月8日 CSS CSSの小技やスニペット集なんかを見ていると、ちょくちょく見かける content プロパティー。「そういえば、こいつ一体何者…！？」と思った方もいるかもしれないので、今更ながら改めて content プロパティーの紹介をしようと思います。 ↑私が10年以上利用している会計ソフト！ content プロパティーって何？ content プロパティーは、要素の前後に、:before または :after という擬似要素を使ってテキストや画像などのコンテンツを挿入する際に使用します。擬似要素とは、HTMLなどの文書には記述されていない要素をCSSによって新たに作り出された架空の要素です。Webクリエイターボックスでも、過去記事「かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技」や「経歴や会社の沿革ページに！簡単なCSSで実装す
今日から使える！HTML5,CSS3のコーディングメモ7個 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、LIGフィリピン支社代表のせいと(@seito_horiguchi)です。 ちょっと前からHTML5.1やCSS4が話題になっていますね。 とはいえ、まだHTML5やCSS3の内容さえ把握できてないよ！という方も多いのではないでしょうか。(´ω｀) そこで今回は、あえてHTML5,CSS3の小ネタを紹介してみたいと思います。 すぐに実務で使えるものばかりなので、ぜひお試しあれ！ HTML5、CSS3のコーディングメモ7個 1. どんなサイズの画像でも固定サイズの枠にいい感じに表示させる方法 imgタグではなく、divなどのタグにインラインでbackground-imageに画像のパスを指定し、background-size: coverを用いることでいい感じの見栄えにすることができます。 メディアサイトやブログサイト、複数人で運用していてルールを統一しづらいプロジェクトなどで有
コーディング（HTML、CSS）を独学で学ぶ人のための学習ポイント - DESIGNMAP
タグは語源をおさえていく HTMLのタグは、語源がある。pタグであれば、paragraph、h1はheading、ulはunordered list、dtはdefinition termである。タグは語源でおさえておくと自然に覚えられるだろう。 また実際に頻繁に使うタグはわずかである。細かいタグはその都度リファレンスサイトで調べればいい。 CSSはHTMLの構造に依存したセレクタを書かない 運用段階までを考えると、CSSのコツはHTMLの構造に依存したセレクタを書かないことである。 <div class="news"> <h2>News</h2> <ul> <li>新書体「やすらか」をリリースしました。</li> </ul> </div> というようなHTMLの場合、従来は .news h2 { font-size: 16px; text-align: center; } というように H
ol や ul タグで 括弧付き数字 を使った 箇条書き :Tips & FAQ | arbk-works Blog
html<ol class="paren"> <li>あか</li> <li>あお</li> <li>きいろ <ol class="paren"> <li>たんぽぽ</li> <li>ひまわり</li> </ol> </li> </ol> css.paren{ counter-reset:item; list-style:none; } .paren li:before{ content:"(" counters(item, "-") ")"; counter-increment:item; margin-right:0.5em; } .paren li{ padding-left:1.5em; text-indent:-1.5em; } バリエーションcss "li:before" の content 部分を変えれば, 括弧と区切り文字を自由に設定できます. content:"(" co
ElectronとHTML/CSS/JavaScriptでデスクトップアプリを作ろう【入門編】 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
お盆も終わり暑さも少し落ち着いてきたので、秋はもうすぐそこ。 こんにちは、先生です。 今回は、Electronを使ってデスクトップアプリを作る方法をご紹介します。 そもそもElectronとは？ http://electron.atom.io/ Electronというものをご存知でしょうか。 ElectronはGitHub社が開発した、デスクトップアプリを作れるクロスプラットフォーム実行環境です。オープンソースのMITライセンスなので、商用利用も無料で可能となっています。 Node.jsとHTML5で作ることができるので、フロントエンドエンジニアは新しい言語を学習することなくWindows、Mac、Linuxのアプリケーションを作成できます。 Slack、Visual Studio Code、Avocodeなど今話題のアプリケーションで使われています。 Electronの準備 Electr
既存のhtmlを使ってWordPressテーマ化する時の必要最低限の手順 | バニデザノート
HTMLファイルのほうが多くを占めるサイトの場合、「既存のテーマファイルをカスタマイズするより、htmlファイルをベースに構築したほうが早いかも」、と思うことがあり、最低限どこを直していけばいいかを書いてみたいとおもいます。 テーマの基準となる.htmlファイルを /WPの置かれているフォルダ/wp-content/themes/new_theme 内にコピーします。ファイル名は、index.php に変更。 「new_theme」は、好きなテーマファイル名でOKです。 css、js、画像フォルダは、既存のhtml郡の中に置いたままでもいいですし /new_theme内に複製コピーしてもOKです。 各ファイルパスだけ、相対パスだとWPのパーマリンク設定によってはうまく動かないことがあるので WPのテーマフォルダと違うところにある場合は絶対パスで http://xxxx.com/css/cs
軽量でシンプルなレスポンシブフレームワーク「Skeleton」 | バニデザノート
「Skeleton」は、レスポンシブCSSフレームワークです。「シンプルで、羽根のように軽い」がコンセプトで、基本的なhtmlコンポーネントと、グリッドレイアウトのみが入っています。 モバイルファーストな意識が高く、ファイル自身も少なく軽量なので全体が見渡しやすく扱いやすい印象です。 960gsベースの、グリッドシステムです。HDなPCサイズでのみ横幅を広げるなど、イレギュラーなこともCSSをいじれば可能です。シンプルなコンポーネントのみだからオーバーライドしなくてもできるのが素敵。 <!-- .container is main centered wrapper --> <div class="container"> <!-- columns should be the immediate child of a .row --> <div class="row"> <div class=
HamlだのMarkdownだのSlimだのJadeだのSassだのSCSSだのLESSだのStylusだのCoffeeScriptだのLiveScriptだのTraceurだの一体なんなのよ！？ | Crack the Game, Win a Jackpot
HamlだのMarkdownだのSlimだのJadeだのSassだのSCSSだのLESSだのStylusだのCoffeeScriptだのLiveScriptだのTraceurだの一体なんなのよ！？ 長いタイトルですがつまりそういうことです。主にCODEPENで使えるHTML/CSS/JavaScriptのテンプレートエンジンとかプリプロセッサとか軽量プログラミング言語とかをまとめてみました。後半尻すぼみになってる感は否めません。 HTML関連 人気順 いきなりですがGoogleのトレンドを調べてみました。最初にこれを頭に入れておくと良いんじゃないかと思います。2010年10月から2014年10月までの期間です。（Markdownってなんでこんなに低いんでしょうか…Googleトレンドの使い方間違ってるのかなぁ？） Haml HTML Abstraction Markup Languageの
Webデザインの勉強を始める人が幸せになれるツール＆サービス
2015年7月7日 便利ツール 先日超初心者さん向けにHTML・CSSを使ってWebページを作る講座を開いたのですが、予想通りやはり「これから勉強したい！」という人は、何から勉強すればいいのかがわからない事が多いです。また情報が多すぎて必要なツールもどれを選んだらいいかわからないケースもよく耳にします。そこで今回はその時教えたツールやサービスを中心に「これだけはそろえておこう！」というものを紹介します。あまりたくさん挙げても使い切れないかなーと思ったので、かなり絞っています。まずはこれらをとっかかりにし、自分好みのものを探していってくださいね！ ↑私が10年以上利用している会計ソフト！ 環境を整えよう まずはWebサイト制作をするための環境を整えましょう。 テキストエディター テキストエディターは、HTMLやCSSなどを使ってWebページを作成する際に使うツールです。Windowsに最初か
[HTML5] 新要素まとめ【2014/2/14版勧告候補】 - Qiita
こんなsectionは○○だ 1.見出しが無い 見出しが無い/用意できない = 章や節ではない = sectionじゃない 2.段組みのためだけに使う sectionはdivの代わりじゃない セマンティクスを意識しよう nav サイトナビゲーションセクションを表す。 <nav> <ul> <li><a href='/'>サイトトップ</li> <li><a href='/about'>このサイトについて</li> <li><a href='/contact'>お問い合わせ</li> </ul> </nav> こんなnavは○○だ 1.nav要素を大量に使っている nav要素を使うことができるのは、そのサイトにとって主要なナビゲーションだけ。 多くても３つくらい たとえば、ヘッダメニュー、サイドメニュー、ぱんくずリストはnav 検索ボックス、リンク集は非nav 2.リストじゃない セマンティ
![[HTML5] 新要素まとめ【2014/2/14版勧告候補】 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/e046ca639b0ef553e0aaa08942c2f4b9b300ac6b/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9JTVCSFRNTDUlNUQlMjAlRTYlOTYlQjAlRTglQTYlODElRTclQjQlQTAlRTMlODElQkUlRTMlODElQTglRTMlODIlODElRTMlODAlOTAyMDE0JTJGMiUyRjE0JUU3JTg5JTg4JUU1JThCJUE3JUU1JTkxJThBJUU1JTgwJTk5JUU4JUEzJTlDJUUzJTgwJTkxJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LWNsaXA9ZWxsaXBzaXMmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz04ZmYyMjZjMDYyZmM0OTZlNzBiZDc4ZDA4MjUwNTgzYQ%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwbWFjY290c2FuJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz1mZjJmMjZkMTc0MTUyYjFiMTZlZTZjODNiYTlhZDEyMg%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3D61e64db1c2b5e89c255a4b15721526f6)
サイト制作を外注するなら知っておきたいWeb用語41個
ウェブの世界は横文字が多くて何だか小難しい・・・。とは言え、サイト制作を外注するなら、ある程度Web用語を理解しておくと、制作会社とのコミュニケーションがスムーズに進みます。 制作会社としても、出来れば専門用語や横文字は使わずに、分かり易く説明したいのですが、日本語に訳すとかえってややこしくなってしまう場合などには、どうしても、ウェブ用語を使わざるをえないのです。 そこで、今回は最低限知っておくと良さそうな基本的なWeb用語をご紹介します。これらの用語を知っておくと、制作会社との共通言語となり、打ち合わせでの認識齟齬を減らし、制作が効率的に進んでいくと思います。 目次 ● HTML関連 htmlソースorソース htmlタグorタグ タイトル ● レイアウト、構造関連 カラム ヘッダ、メイン、サイドバー、フッター 階層 ユーザビリティ CMS ● デザイン関連 レスポンシブウェブデザイン（
CSS3で画像の一部をiOS（曇りガラス）風にぼかす方法：レスポンシブ対応
Posted: 2015.05.07 / Category: HTML&CSS, javascript / Tag: CSS3, jQuery iOS風のぼかしは画像が全画面表示だったら色々jQueryプラグインがあったのですが、今回は一部の要素の背景に重ねたかったのでちょっと試してみました。 確認環境： Chrome42, Firefox37, Safari7, iOS8, Android 4.4 均一の余白で配置するバージョン paddingのみでぼかすパネルを配置する方法です。これならCSSオンリーでいけます。 html&cssは下記のようにします。 html <div class="panel"> <div class="panel-in"> <div class="panel-main"> 内容文が入ります。 </div> </div> </div> css *::before,
[42-3] link要素の「rel属性」の値（リンクタイプ）
[42-3] link要素の「rel属性」の値（リンクタイプ） 最終更新日：2019年07月05日 （初回投稿日：2012年06月29日） <link>要素の「rel属性」と「hreflang属性」で指定した「他言語版ページ」がある場合、検索エンジンはユーザの言語環境にあわせて自動的に検索結果を切り替えることができます。 そのほかにも「rel属性」を使って、検索エンジンに情報を提供することができます。 今回は、<link>要素の「rel属性」の値（リンクタイプ）と、その使い方を見てみましょう。 <link>要素は内容が多いため 記事を分けています。 [42-1] link要素で 外部CSSファイルの読み込み・グループ化をしよう <link>要素全体の話と、外部CSSファイルの読み込み方法 [42-2] link要素の media属性で 外部CSSをメディア別に切り替えよう media属性で
![[42-3] link要素の「rel属性」の値（リンクタイプ）](https://cdn-ak-scissors.b.st-hatena.com/image/square/0369ecd9c29f6086e78d26a2468f5f731f42a00a/height=288;version=1;width=512/https%3A%2F%2Fblog-imgs-110-origin.fc2.com%2Fh%2Fo%2Fn%2Fhonttoni%2Fogp_image.jpg)
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
headに<base target="_blank">１行入れるだけで、全リンク�のデフォルトを_blank化できた - Qiita