プログラミング– category –
-
プログラミング
slick使い方決定版|基本から現場で役立つカスタマイズサンプル集まで
jQueryでスライダーを実装したいけど、複雑なコードは書きたくない slickって聞いたことはあるけど、使い方がよく分からない… この記事は、slickの導入方法から基本的な使い方、さらには現場でよく使われるカスタマイズ例やトラブル対処法までを網羅した完... -
プログラミング
HTML・CSS初心者必見!絶対に失敗しないおすすめ本10選
HTMLやCSSを勉強したいけれど、どの本を選べばいいのかわからない… そんな悩みを抱えて、何冊も比較しては決めきれずにいませんか? この記事は、これからWeb制作を始めたい初心者の方や、HTML・CSSの基礎を学び直したい方に向けておすすめの本を以下の条... -
プログラミング
WordPressのショートコード「囲み型」を作成
先日までに、ショートコードの基本と自己完結型の記事を書きました。 今回は、囲み型のショートコードを作成していきます。 囲み型のショートコードとは? 前回のショートコードの自己完結型を作成でも書きましたがショートコードには自己完結型と囲み型の... -
プログラミング
WordPressのショートコード「自己完結型」を作成
先日、ショートコードの基本の記事を書きました。 まだショートコード自体ががよくわかっていない方は是非こちらの記事から読んでみてくださいね。 今回は、基本の続きで「自己完結型」のショートコードを作成していきます。 自己完結型のショートコードと... -
プログラミング
WordPressの自作ショートコード作成の基本
今回はWordPressの便利なショートコードを自作する方法の基本や、使い方を解説していきたいと思います。複雑な処理も短いコードで呼び出せるととても便利な機能です。ぜひまだ使ったことがない方はこれを機に覚えてください。 ショートコードとは? ショー... -
プログラミング
WordPressのこれだけは覚えておきたい条件分岐タグ
WordPressを色々いじって行くと必ず「トップページではサイドバーなし」で、「固定ページや個別投稿ページではサイドバーを表示」と言った感じで現在のページに応じて処理を変えたくなってきます。そこで登場するのがWordPressの「条件分岐タグ」。 トップ... -
プログラミング
WordPressの公開日と最終更新日を表示する
公開日を表示しているサイトはよく見ますが、最終更新日を表示しているサイトはあまりないように思います。というのもWordPressのほとんどのテーマは公開日の表示機能はありますが、最終更新日も表示する機能はありません。 そこで今回はWordPressのテーマ... -
プログラミング
【CSS】親要素からはみ出して子要素を画面いっぱいにする
親要素の幅がすでに決まっている場合に、「ここだけは画面いっぱいに表示したい」と思った時に皆さんはどうしますか? 私は以前まではいちいち親要素から出すというコーディングをしていました。 自分でコーディングしているならそれで良いですが、CMSで決... -
プログラミング
Javascriptで画像にalt属性がない場合に自動で追加する方法
img要素におけるalt属性は、画像が表示できない場合に代替テキストを表示します。スクリーンリーダーで画像の内容を説明するためにも必要な属性です。 また、img要素に適切なalt属性を設定することで、検索エンジンの画像検索にヒットしやすくなり、SEO効... -
プログラミング
target=”_blank”の属性を持つaタグにだけCSSを指定する方法
aタグにCSSで下線を引いたり、文字の色を変えてリンクであることを示すのは王道のやり方ですが、aタグには新しいウィンドウでリンク先を開く属性のtarget=”_blank”があります。 ユーザビリティの観点から通常のリンクとは別であることを示すためにtarget=”... -
プログラミング
position:stickyの使い方と上手く機能しない場合の解決方法を解説
position:sticky;はスクロールしたときに、要素が指定した位置に来たところから固定させることができるとても便利なプロパティです。 position:fixed;と似ていますが、position:sticky;ならjavascriptも書かないとできなかった難しい指定がたった2行ででき... -
プログラミング
CSSのobject-fitの使い方を徹底解説!CSSで画像のトリミングができる!
CSSプロパティーの「object-fit」を使えば、簡単にCSSだけで画像を指定したサイズ(コンテナー)にフィットさせて、かつ、はみ出すの部分はトリミングができてしまいます。 要は画像として配置しているのに、「background-size」と同じことができてしまい...
