iroiro.co - Expand Your Literary: Download and Explore Books in PDF Format Online!
Publisher : Chronosports Release Date : 2005-04-21 ISBN : Total Pages : 168 pages Rating : 4.3/5 ( users download)
[CSS]Flexboxでハンバーガーメニューを作ろう
プラグインやフレームワークを使わずにレスポンシブ対応のナビゲーションが作れないかとここ1年半ほどずっと考えていました。制作現場では時間の制約などの関係でプラグインの導入が現実的だと思うのですが、せっかく勉強しているので、今回はFlexboxを使ってレスポンシブ対応のナビゲーションメニューを作ってみました。 実装手順 手順は以下です。 マークアップ Flexboxで並べる ブレイクポイントでレイアウトを切り替える スクリプトを書く ハンバーガーメニューを作る 実際に作ってみましょう 初めてハンバーガーメニューを実装する場合、訳が分からなくなるかもしれませんが、テンプレートのようなものなので、この際覚えておきましょう。 1.マークアップ よく見かけるロゴとメニューが横並びのレイアウトの文書構造を書いていきます。 <header> <nav> <h1>Panda Custom</h1> <ul>
![[CSS]Flexboxでハンバーガーメニューを作ろう](https://cdn-ak-scissors.b.st-hatena.com/image/square/1e7edafafb3d5462be7930e6fe85905760fda054/height=288;version=1;width=512/http%3A%2F%2Fpilgrim-guild.com%2Fwp-content%2Fuploads%2F2017%2F02%2Fflexbox.png)
日本語対応！CSS Flexboxのチートシートを作ったので配布します | Webクリエイターボックス
2021年12月18日 CSS, ダウンロード FlexboxとはFlexible Box Layout Moduleのことで、その名の通りフレキシブルで簡単にレイアウトが組めちゃう素敵ボックスです。現在ほとんどすべての最新ブラウザーでFlexboxをサポートしており、Flexboxを使ったレイアウト組みが今後のWebデザインのスタンダードとなるでしょう。Webクリエイターボックスでは以前からFlexboxの使い方について紹介してきたのですが、最近Flexboxが浸透してきたこともあってか各プロパティの使い方について質問される機会が増えてきたので、チートシートとしてまとめてみました。この記事ではなるべく画像メインでプロパティーの使い方を紹介したいと思います！ ↑私が10年以上利用している会計ソフト！ 動画で学ぶCSS Flexbox この記事はYouTube動画でも解説しています。動画派の
CSSが苦手なWebデザイナーが知っておきたい、デザインに関係するCSSのテクニックのまとめ
Webデザイナーはデザインの知識やテクニックだけでなく、どのような実装テクニックがあり、何が実現可能なのか知っておくことで、さらに素晴らしいデザインを作りだすのに役立たせることができます。 Webデザイナーにとって、CSSは難しく感じるかもしれません。しかし全部を覚える必要はありません。デザインに関わるいくつかの有用なCSSのテクニックを紹介します。 20 essential CSS tricks every designer should know イラスト: Girls Design Materials 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 1. 絶対位置への配置 2. 全称セレクタ（*） 3. すべてのスタイルを上書き 4. 左右の中央に配置 5. 天地の中央に配置（テキストのナビに） 6. ホバーエフェクト 7
あまり知られていないBootstrapスタイルテクニック、小技16個まとめ
[fancy_box]この記事は海外デザインブログScotch.ioで公開された「Bootstrap 3 Tips and Tricks You Might Not Know」と「Bootstrap 3 Tips and Tricks You Still Might Not Know」の著者Nicholas Cerminaraより許可をもらい、ポイントをまとめて抄訳しています。Thanks again, @nickforthought!![/fancy_box] Twitter謹製フレームワークBootstrap 3は、フロントデベロッパーの開発スピードアップの手助けをしてくれる機能が多数収録されています。ときには特別なコンテンツのためにCSSやJavaScriptを使ってプログラムした後に、Bootstrap初期設定だけで解決できることに気付いたことがあるかもしれません。 これではWeb
CSSのvw, calc()を使用した、レスポンシブ対応のフォントサイズを指定するこれからのテクニック
本文や見出しなどのフォントサイズをスマホ時やデスクトップ時で変える時、通常はMedia Queriesでスクリーンサイズごとに文字サイズを指定していると思います。 ここで紹介するフォントサイズの指定方法はちょっと新しいアプローチで、最初にベースとなるフォントサイズを設定し、スクリーンサイズが大きくなるにつれ、Viewport Unit（ビューポートの単位）で加算してサイズを大きくします。 Viewport Unit Based Typography 以下、各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 Viewport Unit（ビューポートの単位）とは？ フォントのサイズ指定のためのビューポートの使い方 他の文字の要素をビューポートで指定 縦のリズムとモジュラースケールをビューポートで指定 フォントサイズの指定の精度をアップする さらに精
WordPresssをデータベースなし(SQLite)で使う方法
WordPressを使うには普通MySQLデータベースが必要ですが、データベースなしでも使うことが出来る方法があります。 正確には、なしではありません。SQLiteというデータベースをMySQLの代わりに使います。 SQLiteはPHPが使えるサーバーであれば基本的にどこでも使えますので、MySQLが使用不可な共用レンタルサーバーでも使えます。要するにロリポップの月額100円プラン(エコノミープラン)でもWordPressが使えます。 SQLiteの特徴 「エスキューライト」と呼びます。簡易的なデータベースで、PHP5以降で標準で使えます。データベースサーバーが別に必要ではないので便利です。ちなみに、FireFoxの設定ファイルなどはSQLiteを使ってますので、SQLiteマネージャーなどで中身が見れます。 バージョン2と3があって、SQLite3と書いてなければ一般的にバージョン2を指
[CSS]画像置換「-9999px」のパフォーマンスを改善した新しいテクニック
テキストで実装した見出しなどを画像に置換するテクニックで「-9999px」が有名ですが、そのパフォーマンスを改善するテクニックを紹介します。 Replacing the -9999px hack (new image replacement) [ad#ad-2] 画像置換：-9999px 改善したテクニック 画像置換：-9999px -9999pxを使った画像置換のテクニックは、下記のようになります。 HTMLは見出し要素で実装します。 HTML <h3 id="sample06">見出しのテキスト</h3> 「text-indent:-9999px;」でテキストを見えない位置にし、見出しとなる画像を背景画像として表示します。 #sample06{ width:300px; height:50px; background:url('bg-01.gif') no-repeat 0 -250p
text-indent:-9999pxでテキスト飛ばさなくてもテキスト非表示にして画像に置換できる方法 - ディレイマニア
長らくtext-indent:-9999pxでテキスト飛ばして画像に置換する方法を使い続けてきました。 しかしこの手法を使うのはあまりよろしくないと言われています。 というわけで、画像置換のときに使える代替案をご紹介します。
【WordPress】 TwentyTwelveの微妙なメニューボタンをカスタマイズする | work.log
WordPress のテーマ TwentyTwelve のメニューボタンをカスタマイズしたのでそのメモ書きです。 スマートフォン・タブレットで TwentyTwelve を表示すると下記のようなメニューボタンが表示されます。 TwentyTwelveのメニューボタン ちょっと微妙と思ったのでこれを下記のようにカスタマイズしました。 カスタマイズしたTwentyTwelveのメニューボタン 今回のカスタマイズ方法を以下に記載していきます。 TwentyTwelveのメニューボタンを削除する TwentyTwelve デフォルトのメニューボタンが不要になるのでまずはこれを取り除きます。 このメニューボタンは header.php の 43 行目 (デフォルトの場合) から呼び出されているのでこの行を削除します。 <nav id="site-navigation" class="main-nav
single.phpでmoreの前後を別々に表示したい
やりたいことは、<!–more–> の直下、記事続きが始まる前に 全ページ共通のコンテンツをデフォルト挿入したいということです。 MTの場合だと普通に出来るのですが、WPではその概念がなかったようでしたので、 お分かりになる方がいらっしゃいましたらご教示いただけますでしょうか。 よろしくお願いいたします。 sigeoさん、こんにちは。 プラグインにすることも出来ますが、今回はお手軽にユーザー関数での実装でいってみます。 まず、利用しているテーマフォルダ内にある、functions.phpに以下のコードを追加します。（<?php ?>の括りの中にいれてください。） これが呼び出されると、本来一括りにされていたmore前後の記事のhtmlが分けられた状態で 戻されてきます。 function get_the_divided_content( $more_link_text = null, $s
続・WordPressにて 子ページのタイトルだけでなく本文も一覧で取り出す | 鉄王
ここ最近すっかり放置プレイ気味の本サイトにも、当方のつたないtipsなどをググってお越しくださる方がいらっしゃいます。本当にありがたい限りです。 ということで、2009年1月10日（！）のエントリー『WordPressにて 子ページのタイトルだけでなく本文も一覧で取り出す』にお越しくださった方のリクエストにお応えして、「ホント、こんな情報をご活用くださって感謝です」という思いで続編を公開したいと思います。 リクエストは、出力されたタイトルに当該記事へのパーマリンクを付加したいというもので、コードはこのようになりました……が、ご利用はくれぐれも計画的におねがい申し上げます <?php $page_id = mysql_real_escape_string ( $post -> ID ); $array = $wpdb -> get_results ( "SELECT ID, post_ti
more(続きを読む)がある場合のみ実行する条件分岐方法
#未検証。「〜」は省略の意味ですー。 global $post, $page, $pages; $hasmore = false; //ここからループ処理 〜 the_post(); 〜 the_content(); // とか get_the_content() とか 〜 $content = $pages[$page - 1]; if ( preg_match( '/<!--more(.*?)?-->/', $content, $matches ) ) $hasmore = true; 〜 //ここまでループ処理 if ( $hasmore ) get_sidebar(); kzさん 回答ありがとうございます。 経験が浅くphpもろくに理解していないため 記述内容がよくわからず理解がむずかしかったです。 sidebar.php内に下記を記述しています。 <?php if(is_cate
WordPressでブログじゃないWebサイトを作るときのいろいろ（サンプル付き）
とても長い記事になってしまいましたが、WordPress を使って、コーポレートサイトのサンプルを作ってみました。WordPress はブログだけじゃなくて、色んな Webサイトが作れますよね！今回は、私が WordPress でサイトを作る時にやっていることをまとめてみました。 今までこのブログの中で、いろいろな WordPress の Tips を書いてきました。でも WordPress を使った Webサイトの作り方そのものは、今まで書いた事がありませんでした。そこで今回は、 WordPress を使ってブログじゃない Webサイトをまるごとひとつ作って、私なりの作り方をまとめてみました。 今回のサンプルサイトでは、WordPress の固定ページ機能はもちろん、カスタム投稿タイプやカスタムタクソノミー（カスタム分類）を使って作っています。 ページを表示する為に使っているテンプレート
WordPress(ワードプレス)の親ページに子ページのリストを表示させる方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
とある案件にて、Wordpressの親ページに子ページのリストを表示させる方法を調べたのでメモ。 初めはフォーラムの「親ページに属する全子ページのタイトルと本文を表示」を使った方法を考えていましたが、何故か上手くいかなかったため、テンプレートタグの「wp_list_pages」を使う事にしました。 「WordPress で現在のページの子ページのリストを表示する」を参考にほぼ思い通りの処理が出来ました。それに加えて今回の案件では携帯用ページも制作しており、そちらではwp_list_pagesタグのデフォルト表示であるliタグを使わない方法を探しました。 一度はWordpress本体の中身を書き変える事も考えましたが、「wp_list_pagesのli要素の中を変更 (WordPress)」を参考にstr_replace関数を入れることで思う通りの処理になりました。 【携帯用タグ】 <?ph
どや！？WordPressでページ毎に違うサイドバーを表示させる方法 | デザインどや！？
サムネイル画像をつけたので、トップページがゴチャゴチャしてしまいました。 そこで、サイドバーにある「最近の投稿」をトップページだけ外してみました。 作業は簡単で数分で完了。 ①サイドバー(sidebar.php)をコピー サイドバーを複製します。 名前は、「sidebar-2.php」「sidebar-3.php」など、連番にします。 ②メインインデックスのテンプレート (index.php)を開く サイドバーが表示される部分 <?php get_sidebar()?> を <?php get_sidebar('2'); ?> に変更 ①で付けた名前の番号を括弧内に記述 これで、簡単に2つのサイドバーができました。 「sidebar-2.php」を編集すれば、トップページだけ違うサイドバーになります。 これでゴチャゴチャ感がなくなってスッキリしたトップページになりました。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Loading...
The Blog | Welcome to Adobe Blog
Google Maps Javascript APIでフォームでの住所入力を自動補完する・「Autocomplete for Addresses and Search Terms」
ページ高速化のため .htaccess でキャッシュ設定を絶対やっておこう！
